Javascriptでのダーク&ライトモードの切り替え

ダークテーマは、ウェブサイトのデザインの最も重要な側面の1つです。これは、過去数年間のトレンド機能です。これの主な理由の1つは、特にそれほど照らされていないスペースで、高輝度による目の負担を避け、安全性を提供することです。

今日のチュートリアルでは、ダークモードスイッチを作成する方法を学習します。ユーザーがこのスイッチをクリックすると、Webページ/ Webサイトのテーマがダークモードとライトモードの間で切り替わります。このチュートリアルでは、コードを大幅に変更したり、CSSを過剰に追加したりせずに、ダークテーマオプションをWebサイトに追加する方法の基本的な考え方を理解できます。

UIデザインのダークテーマに関しては、すべきこととすべきでないことがいくつかあります。このチュートリアルでは、それらについて簡単に説明します。このチュートリアルでは、HTML、CSS、VanillaJavascriptが必要です。私たちが使用するJavaScriptコードはそれほど複雑ではないので、心配する必要はありません。それでは、チュートリアルを始めましょう。

HTML：

HTMLファイルを作成し、「index.html」という名前で保存します。以下に提供するコードをコピーして、HTMLファイルに貼り付けてください。
HTMLには多くの要素が含まれていません。クラス名「container」で「div」要素を作成しましょう。コンテナはチェックボックスを閉じます。このチェックボックスには、「toggle」という名前のIDを割り当てます。ここでチェックボックスを使用する理由は、スタイルを設定してトグルスイッチとして使用するためです。
次に、HTMLにデモテキストを追加する必要があります。この目的のために、いくつかの「loremipsum」テキストを追加しています。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dark Mode Toggle</title>
    <!--Google Fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
    <!--Stylesheet-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <input type="checkbox" id="toggle">
    </div>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, ab sequi! Ipsum, reprehenderit! Dolor vero sunt corporis ea natus, nulla cum assumenda. Nostrum corporis molestiae corrupti magni. Corporis ducimus ipsam, qui et eveniet nisi excepturi sint dolore, labore velit repellat quia quasi! Repellendus quo magni voluptatem aut odit, totam sequi autem, doloremque minima tenetur placeat debitis reiciendis repudiandae dolore tempore adipisci blanditiis reprehenderit doloribus recusandae esse commodi harum ratione quisquam?
    </p>
    <script src="script.js"></script>
</body>
</html>

CSS：

スタイルシートを作成し、「style.css」という名前を付けます。次に、以下のコードをコピーして、スタイルシートに貼り付けます。

まず、ボディにパディングを追加します。次に、幅を追加し、コンテナを中央に配置します。チェックボックスをトグルスイッチのようにスタイル設定するには、疑似要素の「後」に配置します。「後」の疑似要素は、太陽を表す円のように見えます。

暗いテーマのクラスにスタイルを追加する必要があります。このクラスは、ユーザーがトグルをクリックしたときに本体に適用されます。

ダークテーマでは、背景色は「＃15181f」に設定されます。灰色またはより暗い灰色の色合いを使用します。黒の使用は避けてください。全体的に黒い色は眼精疲労を引き起こす可能性があります。グレーの濃い色合いがより適しています。フォントの色については、彩度の低いバージョンの白を選択します。

暗闇の中で、テーマのスイッチの背景色が白に変わります（または彩度の低いバージョンの白を使用できます）。'after'疑似要素は、box-shadowプロパティを使用して月のように見えるように作成されます。

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    padding: 30px;
}
.container{
    width: 100%;
    height: 40px;
    position: relative;
    margin-bottom: 30px;
}
#toggle{
    -webkit-appearance: none;
    appearance: none;
    height: 40px;
    width: 75px;
    background-color: #15181f;
    position: absolute;
    right: 0;
    border-radius: 20px;
    outline: none;
    cursor: pointer;
}
#toggle:after{
    content: "";
    position: absolute;
    height: 30px;
    width: 30px;
    background-color: #ffffff;
    top: 5px;
    left: 7px;
    border-radius: 50%;
}
p{
    font-family: "Open Sans",sans-serif;
    line-height: 35px;
    text-align: justify;
}
.dark-theme{
    background-color: #15181f;
    color: #e5e5e5;
}
.dark-theme #toggle{
    background-color: #ffffff;
}
.dark-theme #toggle:after{
    background-color: transparent;
    box-shadow: 10px 10px #15181f;
    top: -4px;
    left: 30px;
}

Javascript：

最後のステップとして、このトグルを機能させるための機能を追加する必要があります。'script.js'というJavaScriptファイルを作成します。ここに記載されているコードをコピーして、スクリプトファイルに貼り付けます。

javascriptで行う唯一のことは、「クリック」イベントリスナーをトグルに追加することです。クリックイベントでは、ドキュメント本文で「ダークテーマ」クラスが切り替えられます。このようにして、ユーザーがスイッチをクリックすると、ダークモードが追加および削除されます。

document.getElementById("toggle").addEventListener("click", function(){
    document.getElementsByTagName('body')[0].classList.toggle("dark-theme");
});

これでダークモードスイッチの準備が整いました。これは、Webページにダークモードを追加する方法の1つを紹介する小さな例ですが、先に進んでこれを展開し、Webサイト全体にダークモードを追加できます。このチュートリアルが気に入ったら、必ず私のYouTubeチャンネルをチェックしてください。次のチュートリアルでお会いしましょう。

リンク: https://codingartistweb.com/2021/07/dark-light-mode-toggle-javascript/

#javascript

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dark Mode Toggle</title>
    <!--Google Fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
    <!--Stylesheet-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <input type="checkbox" id="toggle">
    </div>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, ab sequi! Ipsum, reprehenderit! Dolor vero sunt corporis ea natus, nulla cum assumenda. Nostrum corporis molestiae corrupti magni. Corporis ducimus ipsam, qui et eveniet nisi excepturi sint dolore, labore velit repellat quia quasi! Repellendus quo magni voluptatem aut odit, totam sequi autem, doloremque minima tenetur placeat debitis reiciendis repudiandae dolore tempore adipisci blanditiis reprehenderit doloribus recusandae esse commodi harum ratione quisquam?
    </p>
    <script src="script.js"></script>
</body>
</html>

CSS：

スタイルシートを作成し、「style.css」という名前を付けます。次に、以下のコードをコピーして、スタイルシートに貼り付けます。

暗いテーマのクラスにスタイルを追加する必要があります。このクラスは、ユーザーがトグルをクリックしたときに本体に適用されます。

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    padding: 30px;
}
.container{
    width: 100%;
    height: 40px;
    position: relative;
    margin-bottom: 30px;
}
#toggle{
    -webkit-appearance: none;
    appearance: none;
    height: 40px;
    width: 75px;
    background-color: #15181f;
    position: absolute;
    right: 0;
    border-radius: 20px;
    outline: none;
    cursor: pointer;
}
#toggle:after{
    content: "";
    position: absolute;
    height: 30px;
    width: 30px;
    background-color: #ffffff;
    top: 5px;
    left: 7px;
    border-radius: 50%;
}
p{
    font-family: "Open Sans",sans-serif;
    line-height: 35px;
    text-align: justify;
}
.dark-theme{
    background-color: #15181f;
    color: #e5e5e5;
}
.dark-theme #toggle{
    background-color: #ffffff;
}
.dark-theme #toggle:after{
    background-color: transparent;
    box-shadow: 10px 10px #15181f;
    top: -4px;
    left: 30px;
}

Javascript：

document.getElementById("toggle").addEventListener("click", function(){
    document.getElementsByTagName('body')[0].classList.toggle("dark-theme");
});

リンク: https://codingartistweb.com/2021/07/dark-light-mode-toggle-javascript/

#javascript

Javascriptでのダーク&ライトモードの切り替え

HTML：

CSS：

Javascript：

What is GEEK

Buddha Community