단 한 줄의 JavaScript로 Light 및 Dark 테마 변경

그렇습니다.. CSS가 약간 포함되어 있지만 인터넷에서 찾은 답변보다 훨씬 쉬웠습니다.

내가 이루고자 하는 것은 무엇인가?
저는 이 방법으로 두 가지를 달성하려고 합니다.

1. 웹사이트가 사용자가 선호하는 방식으로 로드되도록 허용해야 합니다(이미 OS에서 테마를 선택한 부분)
2. 하지만 로딩 후에 어두운 모드와 밝은 모드 사이를 전환할 수도 있게 하고 싶습니다.

그래서 우리는 사용자가 기대하는 테마를 로드한 다음 원할 때 변경할 수 있는 웹사이트를 갖게 될 것입니다.

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월에 출시되는 기능입니다. 상당히 새로운 기능이지만 곧 적응될 예정입니다. 그리고 이 글을 쓰는 시점에서 기본적으로 지원되고 있습니다. 이에 대한 문서는 다음과 같습니다

light-dark() - CSS: 계단식 스타일 시트 | MDN

light-dark() CSS 기능을 사용하면 속성에 대해 두 가지 색상을 설정할 수 있습니다. 개발자가 밝은 색상 또는 어두운 색상 구성표를 설정했는지 또는 사용자가 밝은 색상 또는 어두운 색상 테마를 요청했는지 감지하여 두 가지 색상 옵션 중 하나를 반환합니다. 테마 색상을 기본 설정 내에 포함할 필요가 없습니다. - 색상 구성표 미디어 기능 쿼리입니다. 사용자는 운영 체제 설정(예: 밝은 모드 또는 어두운 모드) 또는 사용자 에이전트 설정을 통해 색상 구성표 기본 설정을 나타낼 수 있습니다. light-dark() 함수를 사용하면 값이 허용됩니다. light-dark() CSS 색상 함수는 사용자 기본 설정이 밝게 설정되어 있거나 기본 설정이 지정되지 않은 경우 첫 번째 값을 반환하고 사용자 기본 설정이 어둡게 설정된 경우 두 번째 값을 반환합니다.

개발자.mozilla.org

이것을 사용하면 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 요소를 참조합니다.
이전 단계에서 이미 사용자 선호 모드로 웹사이트를 열 수 있었으므로 여기서 토글 버튼을 클릭하면 다음 작업이 수행됩니다.

1. 색 구성표에 값이 있는지 확인하고, 그렇지 않은 경우 웹사이트가 사용자 선호 모드에 있으므로 모드를 변경하려면 어둡거나 밝은지 식별해야 합니다.
2. window.matchMedia("(prefers-color-scheme:dark)").matches를 사용하여 어두운 모드인지 확인하고, 어두운 모드인 경우 색 구성표를 밝은 모드로 변경합니다. , 어둡게 변경합니다.
3. 다음 번에 버튼을 클릭하면 색 구성표에 대한 값이 이미 설정되어 있으므로 어둡거나 밝은 사이를 전환하기만 하면 됩니다.

*PS: * 이것은 내 첫 번째 게시물이고 저는 아직 웹 개발의 초보자입니다. 그런데 이 방법을 검색해보니 관련 글이 하나도 없네요. 이미 알고 계시다면 클릭을 미끼로 해서 죄송합니다. 이 포스팅이 제가 새로운 프로젝트를 할 때마다 이 과정을 기억하는데 도움이 될 거라고 생각했어요.
귀하의 웹사이트가 오래된 브라우저에서 작동하도록 작업하는 경우, 이 방법은 귀하에게 적합하지 않습니다. 이 게시물에 대한 댓글로 알려주세요. 읽어주셔서 감사합니다.

위 내용은 단 한 줄의 JavaScript로 Light 및 Dark 테마 변경의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!