그렇습니다.. CSS가 약간 포함되어 있지만 인터넷에서 찾은 답변보다 훨씬 쉬웠습니다.
내가 이루고자 하는 것은 무엇인가?
저는 이 방법으로 두 가지를 달성하려고 합니다.
그래서 우리는 사용자가 기대하는 테마를 로드한 다음 원할 때 변경할 수 있는 웹사이트를 갖게 될 것입니다.
1단계: 전환용 버튼 생성
<img class="mode" src="./img/moon.svg">
달의 svg 이미지가 있는 이미지를 버튼으로 사용하고 있습니다. 두 가지 옵션 사이를 전환할 수 있는 버튼이나 확인란을 추가할 수 있습니다.
2단계: CSS에 색상 세부정보를 사용자 정의 속성으로 입력
:root{ color-scheme: light dark; --light-bg: ghostwhite; --light-color: darkslategray; --light-code: tomato; --dark-bg: darkslategray; --dark-color: ghostwhite; --dark-code: gold; } .light{ color-scheme: light; } .dark{ color-scheme: dark; }
알겠습니다. 루트에는 color-scheme이라는 속성이 표시되며 이것이 우리의 게임 체인저가 될 것입니다.
보시다시피, 밝거나 어두운 값을 취합니다. 또한 color-scheme의 값을 어둡거나 밝게 설정하는 .light 및 .dark라는 두 개의 클래스를 만들었습니다.
3단계: 코드의 다양한 부분에 색상 추가
body{ background-color: light-dark(var(--light-bg), var(--dark-bg)); }
이제 속성에서 색상(예: 배경, 색상 속성)을 요청할 때마다 light-dark()라는 함수를 사용할 수 있습니다.
이 함수는 두 가지 값을 취하는데, 첫 번째 값은 색 구성표가 밝을 때 사용되고 두 번째 값은 색 구성표가 어두울 때 사용됩니다.
네... 2024년 5월에 출시되는 기능입니다. 상당히 새로운 기능이지만 곧 적응될 예정입니다. 그리고 이 글을 쓰는 시점에서 기본적으로 지원되고 있습니다. 이에 대한 문서는 다음과 같습니다
이것을 사용하면 CSS가 OS에서 사용자 선호도를 자동으로 감지하여 원하는 색상으로 설정합니다.
우리는 첫 번째 목표를 달성했습니다. 웹사이트는 사용자가 이미 OS에서 원했던 색상 모드로 로드됩니다.
4단계: Javascript를 사용하여 다크 모드와 라이트 모드 간 전환
// mode is the toggle button mode.addEventListener("click", ()=>{ // we are getting the color scheme here let theme = document.documentElement.style.colorScheme; /* when a website is first loaded it will have null as its color-scheme value*/ if(theme == null){ // this window.matchMedia() checks if the user prefers the dark theme if(window.matchMedia("(prefers-color-scheme:dark)").matches){ /* if they prefer dark, clicking on our button should turn everything to light, the color-scheme will be given a value as light */ document.documentElement.style.colorScheme = "light"; } // Or else the color-scheme will be set to dark document.documentElement.style.colorScheme = "dark"; } /* Now since our toggle button set the color scheme, we can simply change light to dark and dark to light using below code */ else{ document.documentElement.style.colorScheme = (theme == "light")? "dark": "light"; } });
여기서 document.documentElement.style.colorScheme은 실제로 CSS의 :root 요소를 참조합니다.
이전 단계에서 이미 사용자 선호 모드로 웹사이트를 열 수 있었으므로 여기서 토글 버튼을 클릭하면 다음 작업이 수행됩니다.
*PS: * 이것은 내 첫 번째 게시물이고 저는 아직 웹 개발의 초보자입니다. 그런데 이 방법을 검색해보니 관련 글이 하나도 없네요. 이미 알고 계시다면 클릭을 미끼로 해서 죄송합니다. 이 포스팅이 제가 새로운 프로젝트를 할 때마다 이 과정을 기억하는데 도움이 될 거라고 생각했어요.
귀하의 웹사이트가 오래된 브라우저에서 작동하도록 작업하는 경우, 이 방법은 귀하에게 적합하지 않습니다. 이 게시물에 대한 댓글로 알려주세요. 읽어주셔서 감사합니다.
위 내용은 단 한 줄의 JavaScript로 Light 및 Dark 테마 변경의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!