어떻게 vanilla JS로 5분이나 더 적은 시간 안에 어둠의 테마 시스템을 만듭니다.

오래전, 나의 옛 블로그에서 나는'어떻게 jQuery로 검은색 테마 시스템을 만드는가'라는 제목의 글을 썼다.나는 지금이 jQuery가 없는 더 간단하고 깨끗하며 더 좋은 어둠의 시스템을 만드는 가장 좋은 시기라고 생각한다.
나는 같은 시스템을 사용한다(그러나 확장했다)on my own website!this GitHub repo. 에서 모든 코드를 찾을 수 있습니다.

codedgar 코드 / 5분 동안 어두운 색상 모드

vanilla JS 및 vanilla CSS의 짙은 색 모드 자습서

이 문장을 더욱 쉽게 읽을 수 있도록 나는 이 문장을 몇 조각으로 나누었다. 이것을 봐라.

CSS 변수를 소개합니다.

기초-전환류.

요약 - 설정을 저장하고 읽어들입니다.

소개 - CSS 변수

CSS 변수는 그들이 듣기에 매우 편리한 모양, 변수입니다.이것은 우리가 전체 사이트에서 사용할 색을 끼워 넣지 않고 CSS 클래스에서 모든 색을 정의할 수 있다는 것을 의미한다.
틀렸어

.dark_mode>body{
    background: #000;
}

아름답다

.dark_mode{
    --body_bg: #000;
}

CSS 변수를 사용하면 하위 선택기가 아닌 클래스를 사용할 수 있습니다.이것은 몇 가지 주제를 더욱 쉽게 만들고 한 클래스에서 모든 색을 정의하는 데 도움이 된다.
즉, 이제 색상을 정의해야 합니다.

:root{
    --text-color: #000;
    --body-bg: #fff;
}
body{
    color: var(--text-color);
    background: var(--body-bg);
}

그러니 계속해서, 당신의 CSS에서 당신이 바꾸고 싶은 모든 색깔을 찾아서 이렇게 하세요.이것은 개발자 도구를 열고 웹 사이트가 짙은 색 모드에서 필요로 하는 색을 선택하고'dark_mode'라는 클래스로 정의할 수 있는 절호의 시기입니다.
너 방금 소개했어, 만세!

베이스 - 클래스 전환.

이제 CSS를 재정의했으니 JS에 들어갈 때가 됐어. 준비됐어?우리 합시다.
우리가 해야 할 주요한 일은 단추를 만들고 그 요소를 검색하는 것이다. 우리는 간단한 것을 사용할 수 있다.

document.querySelector('#theme_toggler');

이제 요소가 생겼습니다. 이벤트 탐지기를 추가하기 위해 요소를 정의해야 합니다.

let theme_toggler = document.querySelector('#theme_toggler');

네, 그럼 우리 친구 theme\u toggler에게 뭘 할까요?우리는 이벤트 감청기를 추가하여 바디 표시의 클래스를 전환해야 한다. 이것은 매우 쉽다. 우리는 이렇게 할 수 있다.

let theme_toggler = document.querySelector('#theme_toggler');

theme_toggler.addEventListener('click', function(){ 
    document.body.classList.toggle('dark_mode');
});

예시에서 보듯이 그것은 매우 잘 일한다.
"쿨, 준비됐어? 가도 돼? 팔 좀 놓아줄래?"슬프게도 답은, 아니, 아니...봐라, 클래스를 전환한다. 그러나 사용자가 충전한 사이트를 떠나거나 권토중래하면 브라우저에 저장할 것을 알려줄 것이 없기 때문에 다시 클릭해야 한다...한 번 또 한 번.이것은 우리로 하여금 마지막 단계에 이르게 했다.

요약 - 설정을 저장하고 읽어들입니다.

자, 이제 클래스를 전환하고 한 발자국만 남았습니다. 바로 우리의 좋은 친구인 local Storage로 설정을 저장하는 것입니다.
localStorage는 사용이 간단하기 때문에 이런 상황에서 매우 적합하다.우리는 단지 세 가지 중요한 일을 할 수 있을 뿐이다.

설정 저장

검색 설정

추가 혜택: localStorage 이벤트에 이벤트 탐지기 추가

설정 저장

설정을 저장하는 것부터 시작합니다. 간단합니다.

localStorage.setItem('website_theme' , 'dark_mode');

여기서 dark_ 모드를 설정하고 있지만 사용하지 않습니다. dark_ 모드를 열고 닫으려면 다음과 같이 해야 합니다.

if(document.body.classList.contains('dark_mode')){
    localStorage.setItem('website_theme','dark_mode');
}else{
    localStorage.setItem('website_theme','default');
}

이것은 body 요소에 dark_mode 클래스가 있는지 확인합니다.없으면 기본 클래스 테마로 설정합니다.

검색 클래스

이것은 심지어 더욱 간단하다. 우리는 우선localStorage의 항목이 존재하는지 검증해야 한다. 만약 존재한다면, 우리는 localStorage에 저장된 클래스, 즉 기본값이나dark\u모드만 적용하고 이를 함수로 호출해야 한다.

function retrieve_theme(){
    var theme = localStorage.getItem('website_theme');
    if(theme != null){
        document.body.classList.remove('default', 'dark_mode'); 
        document.body.classList.add(theme);
    }
}
retrieve_theme();

얼마 안 남았어요. 그렇죠!페이지를 다시 불러오면 테마가 저장됩니다!지금 상금만 있으면 네가 마땅히 받아야 할 것이기 때문이다.

이점: localStorage 이벤트에 이벤트 탐지기를 추가합니다.

놀랍게도 이벤트 탐지기를 로컬 저장소에 추가하는 것은 상당히 간단하다.이것은 무슨 작용이 있습니까?이렇게 하면 페이지의 모든 탭이 동시에 열립니다. TLDR: 한 탭에서 변경하면 모든 탭이 변경됩니다.
네, 어떻게 할까요?간단합니다. 우리는 이렇게 합니다.

window.addEventListener("storage",function(){
    retrieve_theme();
},false);

식은 죽 먹기?제가 예의인가요?너는 이것만 알면 돼!이것은 우리의 최종 결과이다.

codedgar 코드 / 5분 동안 어두운 색상 모드

vanilla JS 및 vanilla CSS의 짙은 색 모드 자습서

결론

짙은 색 테마가 갈수록 유행함에 따라 더 적은 코드로 짙은 색의 더 좋은 짙은 색 테마를 만드는 것은 매우 좋다. 나는 네가 너의 신기한 테마를 추가하여 너의 사이트를 매우 멋지게 할 수 있기를 바란다.나중에 봐요!