あなたのウェブサイトに暗いテーマを追加する簡単な方法.

暗いテーマは何ですか？

暗いテーマは、私たちの目の歪みを減らす、UIの最大の暗い色が表示されます.最近、暗いテーマは、ほとんどのウェブサイトやアプリで見ることができる共通の傾向です.
ここでは、私はボタンをクリックするとき、暗いテーマを加える簡単な方法の1つを共有するつもりです.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ファイルの1つの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(ユーザインタフェース)に関するものです.

.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を押して、フル機能のボタンをチェックすることができます.