웹 사이트에 어두운 테마를 추가하는 쉬운 방법입니다.

어두운 테마란 무엇인가요?

어두운 테마는 UI의 최대치에 어두운 색을 표시하여 눈의 피로를 줄여줍니다. 최근 다크 테마는 대부분의 웹사이트와 앱에서 볼 수 있는 일반적인 트렌드입니다.

여기 이 블로그에서는 버튼을 클릭할 때 어두운 테마를 추가하는 쉬운 방법 중 하나를 공유할 것입니다.
Turn Your webpage from here:

To here:

Our main concern is to change the theme, so we are not focusing on beauty and other functionality.

HTML

우리는 단지 버튼을 생성하고 있으므로 HTML 파일에 단일button 태그만 있으면 됩니다.

<button id="myBtn">Push Me</button>

CSS

아래 코드는 페이지에 기본 조명 테마를 만드는 데 사용됩니다.

* {
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    background: #ededed;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

button {
    color: #000;
    background: #fff;
    border: solid .12rem #121212;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    width: 4rem;
    border-radius: 7%;
}

아래 코드는 다크 테마의 UI(User Interface)에 대한 내용입니다.

.dark-mode {
    background: #121212;
}

.dark-mode > button {
    background: #000;
    color: #fff;
    border-color: #ededed;
}

자바스크립트

이것은 push me 키를 눌렀을 때 웹 사이트에 어두운 테마를 제공하는 것과 관련된 기본 스크립트입니다.

document.getElementById("myBtn").addEventListener("click", function() {
    var element = document.body;
    element.classList.toggle("dark-mode");
});

사람! 완전히 작동하는 토글 다크 테마가 완성되었습니다. 짧고 간단하지 않습니까?

There is a small limitation, link to your JavaScript file in the body tag, and not in the head tag of your HTML code.

here 을 눌러 전체 기능 버튼을 확인할 수 있습니다.