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

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

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

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

1단계: 전환용 버튼 생성

달의 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이라는 속성이 표시되며 이것이 우리의 게임 체인저가 될 것입니다.
보시다시피, 밝거나 어두운 값을 취합니다. 또한 색 구성표의 값을 어둡거나 밝게 설정하는 .light 및 .dark라는 두 개의 클래스도 만들었습니다.

3단계: 코드의 다양한 부분에 색상 추가

body{
    background-color: light-dark(var(--light-bg), var(--dark-bg));
}

이제 속성이 색상(예: 배경, 색상 속성)을 요청할 때마다 light-dark()라는 함수를 사용할 수 있습니다.
이 함수는 두 가지 값을 취하는데, 첫 번째 값은 color-scheme이 밝게 설정되었을 때 사용되고 두 번째 값은 color-scheme이 어둡게 설정되었을 때 사용됩니다.

네... 2024년 5월에 출시된 기능입니다. 꽤 새로운 기능이지만 곧 적응될 예정입니다. 그리고 이 글을 쓰는 시점에서는 기본적으로 지원되고 있습니다. 이에 대한 문서는 다음과 같습니다.

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

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

개발자.mozilla.org

이 기능을 사용하면 CSS가 OS에서 사용자 기본 설정을 자동으로 감지하여 원하는 색상으로 설정합니다.
우리는 첫 번째 목표를 달성했습니다. 웹 사이트는 사용자가 이미 OS에서 원했던 색상 모드로 로드됩니다.

4단계: 자바스크립트를 사용하여 다크 모드와 라이트 모드 간 전환

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