Bear 블로그의 라이트/다크 모드에 대한 단계별 가이드

저는 최근에 light-dark() 색상 기능과 결합된 Prefers-color-scheme 미디어 기능을 사용하여 내 Bear 블로그에 밝은/어두운 모드 스위치를 구현했습니다.

제가 한 방법은 다음과 같습니다.

1단계: CSS 설정

CSS는 지난 몇 년 동안 light-dark() 색상 기능을 포함하여 몇 가지 멋진 새 기능을 얻었습니다. 이 기능을 사용하면 모든 요소에 두 가지 색상(밝은 모드와 어두운 모드)을 지정할 수 있습니다.

예를 들어 배경을 밝은 모드에서는 흰색으로, 어두운 모드에서는 검은색으로 설정하려면 다음과 같이 설정하세요.

body {
  background-color: light-dark(#fff, #000);
}

밝은 모드와 어두운 모드에서 다양한 색상이 필요한 모든 요소에 이 접근 방식을 적용했습니다.

2단계: HTML 추가하기

테마 토글에는 스위치, 라디오 버튼, 드롭다운 메뉴 대신 단일 아이콘을 사용했습니다. 반대 모드로 전환하는 아이콘만 표시된 상태로 페이지가 로드됩니다. 기본 테마가 어둡기 때문에 처음에는 어두운 모드 아이콘이 숨겨지고 밝은 모드로 전환하는 아이콘이 표시됩니다.

onclick 이벤트는 밝은 테마와 어두운 테마 사이의 전환을 처리하는 switchMode() 함수를 호출합니다(나중에 자세히 설명). HTML 설정은 다음과 같습니다.

<a id="preferdark" onclick="switchMode('dark')" style="display: none;">
  <!-- Icon for switching to dark mode. -->
</a>
<a id="preferlight" onclick="switchMode('light')">
  <!-- Icon for switching to light mode. -->
</a>

3단계: JavaScript 생성

JavaScript는 두 가지 주요 작업을 처리합니다.

1. 사용자가 아이콘을 클릭하면 밝은 모드와 어두운 모드가 전환됩니다.
2. 사용자의 테마 기본 설정을 localStorage에 저장하여 향후 방문 시 자동으로 로드합니다.

자바스크립트는 두 부분으로 나뉩니다. 페이지 로드 시 테마를 설정하고 <바닥글> 페이지가 완전히 로드된 후 요소를 업데이트합니다.

및 <바닥글> Bear에서 설정 > 머리글 및 바닥글 지시어.

<머리> 자바스크립트 코드

이 코드는 가능한 경우 로컬 저장소에서 이전에 저장된 테마를 검색합니다. 그렇지 않으면 사용자의 브라우저나 OS가 밝은 테마 또는 어두운 테마를 선호하는지 확인합니다. 해당 정보를 사용할 수 없는 경우 기본적으로 어두운 모드로 설정됩니다. 그런 다음 해당 모드를 :root 요소(즉, 기본 요소)에 적용합니다.

const storedScheme = localStorage.getItem("color-scheme");
const preferredScheme = storedScheme 
  ? storedScheme 
  : window && 
    window.matchMedia && 
    window.matchMedia('(prefers-color-scheme: light)').matches ? "light" : "dark";

document.querySelector(':root').style.setProperty("color-scheme", preferredScheme);

<바닥글> 자바스크립트 코드

이 코드는 이전에 에 설정된 PreferredScheme 변수를 기반으로 올바른 아이콘을 표시합니다. switchMode() 함수는 아이콘 표시를 업데이트하고, :root 색 구성표를 변경하고, 새 기본 설정을 로컬 저장소에 저장합니다.

document.querySelector("#preferlight").style.display = preferredScheme === "light" 
  ? "none" 
  : "";
document.querySelector("#preferdark").style.display = preferredScheme === "light" 
  ? "" 
  : "none";

function switchMode(mode) {
  document.getElementById("preferlight").style.display = mode === "light" 
  ? "none" 
  : "";
  document.getElementById("preferdark").style.display = mode === "light" 
  ? "" 
  : "none";
  document.querySelector(':root').style.setProperty("color-scheme", mode);
  localStorage.setItem("color-scheme", mode);
}

그리고 그게 전부입니다. Bear 블로그를 위한 밝은/어두운 모드 스위치입니다!

위 내용은 Bear 블로그의 라이트/다크 모드에 대한 단계별 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!