이지 모드 다크

7356 단어 darkmodecssjavascriptdev

CSS 및 JavaScript로 esay 다크 모드를 공유하고 싶습니다.



나는 계속해서 JS와 CSS를 배우고 이것은 CSS의 변수를 사용하는 예제이고 JS의 선택기, 이벤트, 클래스를 사용합니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>Dark Mode</h1>
    <button id="app">Change the page color</button>
</body>
</html>




 :root {
    --black: #000;
    --white: #fff;
}

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1 {
    font-size: 50px;
}

#app {
    border: none;
    padding: 10px 20px;
    background-color: #ececec;
    color: var(--black);
    text-transform: uppercase;
}

.light {
    background-color: var(--white);
    color: var(--black);
}

.dark {
    background-color: var(--black);
    color: var(--white);
}




let $btn = document.querySelector("#app"); // get button tag
let $html = document.documentElement; // get html tag and the content
let $body = document.body; // get body tag and the content
let darkMode = getComputedStyle($html).getPropertyValue("--black"); // Here I get the value it has: CSS root 
let ligthMode = getComputedStyle($html).getPropertyValue("--white"); //Get the value that has: CSS root but in this case the color white

$btn.addEventListener("click", (e) => { // Added a listener to the button

    if (e.type === "click") { // Evaluated the type of event that ran
        $body.classList.toggle("dark"); // Add a class 
    }
    $body.classList.toggle("light"); // Remove a class
});


문서 개체 모델을 처리하는 방법으로 사용하기를 바랍니다.
Vim 및 PHP 언어 서버 프로토콜 설정
실시 간 으로 데 이 터 를 감시 하 는 작은 스 크 립 트

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage