简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

Web アプリにダーク/ライト テーマを実装する方法

王林
リリース： 2024-07-19 14:22:08
オリジナル
908 人が閲覧しました

Web サイトで暗いテーマと明るいテーマを切り替えて、「自分のサイトでもそれができたらいいのに」と思ったことはありますか?さて、それができるようになりました。この記事では、HTML、CSS、JavaScript を使用して Web プロジェクトにダーク モードとライト モードを実装し、ユーザーに最高の視覚エクスペリエンスを提供する方法を説明します。

前提条件: このチュートリアルを理解するには、HTML と CSS の基本的な理解が必要です。

ダーク/ライトテーマの実装

Web サイトでダーク モード/ライト モードを設定する主なコンポーネントは次のとおりです:

  • ウェブページ

  • テーマを切り替えるボタン

  • 切り替えるテーマまたは色

  • テーマとボタンのテキストを切り替える背後にあるロジック。

ウェブページ

プロジェクトをセットアップする

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Virtual Tour App</title>
</head>
<body>
    <div class="hero-sec">
        <div class="col1">
            <h1>Everyday Is a Journey</h1>
            <p>Visit any Location Virtually, Anytime, Anywhere</p>
            <button>Tour</button>
        </div>
        <div class="col2">
            <img src="img.jpg" alt="landscape" width="560px">
        </div>
    </div>
</body>

</html>
ログイン後にコピー

プレーンな Web ページの出力

Web app theming image

トグルボタン

テーマの切り替えボタンを追加することが重要です。これは、ライト モードからダーク モードへ、またはその逆の色の変更をトリガーするボタンです。

    <button id="toggle-button">Dark mode</button>
ログイン後にコピー

How to Implement Dark/Light Themes in Your Web Apps

ライト/ダークモードのテーマ

ここには 2 つのテーマまたは色が関係しているため、これは重要なステップです。数行のコードで Web ページにさまざまなスタイルを追加する方法が必要です。テーマには CSS 変数を使用します。初めてだと思われる場合は、CSS 変数に関する私の記事をお読みください。

ステップ 1:
ライトテーマのスタイルを宣言します

:root{
    --bg: #fafaf3;
    --color: #0A0A0A
}
// This is the light theme; the default theme
ログイン後にコピー

ステップ 2:
ダークテーマのクラスを宣言します

.dark{
    --bg: #0A0A0A;
    --color: #ffffff;
}
// This is the class that will be added onclick of the button
ログイン後にコピー

注: 変数名は同じである必要があります。

これは、変数を使用せずに body 要素のみを使用して実行できます。ただし、多くの場合、背景色以外の変更が必要になるため、CSS 変数を使用することをお勧めします。一部の Web アプリのテーマでは、テキストの色、境界線の色、影などを変更する必要があります。そのため、変数を使用すると、特に大規模なアプリケーションですべての要素を完全に制御できます。

Web ページのスタイルを完成させましょう。 CSS が HTML ファイルにリンクされていることを確認してください。

:root{
    --bg: #fafaf3;
    --color: #0A0A0A
}
// This is the light theme; the default theme
.dark{
    --bg: #0A0A0A;
    --color: #ffffff;
}
body{
    background: var(--bg);
    color: var(--color);
    font-family: monospace
}
.hero-sec{
    display: flex;
    justify-content: space-evenly;
    color: var(--color);
    margin-top: 48px;
}
.col1{
    margin-top: 6rem;
    height: 40%;
}
h1{
    font-size: 2.5rem;
}
p{
    font-size: 1.3rem;
}
button{
    padding: 1rem 2rem;
    background-color: #3f51b5;
    color: #ffffff;
    border: none;
    cursor: pointer;
}
.hero-sec button{
    font-size: 1.3rem;
}
ログイン後にコピー

出力

How to Implement Dark/Light Themes in Your Web Apps

テーマの切り替えの背後にあるロジック

ユーザーがトグル ボタンをクリックすると、2 つのことが起こることが予想されます。

  • Web サイトのテーマまたはカラー モードを変更する必要があります。

  • ボタンのテキストが変更されるはずです。

テーマを変更するには
DOM (ドキュメント オブジェクト モデル) を操作して、Web ページのボタンと本文を取得します。
「ダーク」クラスを body 要素に追加する関数を宣言します (これは CSS ですでに宣言されています)。
ユーザーがダーク/ライト モード ボタンをクリックすると、この関数が呼び出されます。 JS が HTML にリンクされていることを確認してください。

const toggleBtn = document.getElementById("toggle-button")
const body = document.body

function toggleTheme() {
    body.classList.toggle("dark")
}
toggleBtn.addEventListener('click', toggleTheme);
ログイン後にコピー

テキストを変更するには
別のコード ブロックを toggleTheme 関数に追加します。このコードは単に、本文に「dark」クラスが含まれている場合、テキストを「Light モード」に、またはその逆に切り替えることを意味します。

if (body.classList.contains("dark")) {
        toggleBtn.textContent = "Light Mode";
    } else {
        toggleBtn.textContent = "Dark Mode";
    }
ログイン後にコピー

これは 1 行で実行でき、コードがすっきりします。

 toggleBtn.textContent = body.classList.contains("dark")? "Light Mode" : "Dark Mode"
ログイン後にコピー

はい、今すぐテーマを切り替えることができます。クールですよね？完全なデモについては、添付のビデオを確認してください。

dark mode website

結論は

このチュートリアルで概説されている手順に従うことで、ユーザーが好みのテーマを柔軟に選択できるようになり、Web アプリがより魅力的でアクセスしやすくなります。
私の記事を気に入っていただけましたら、私の仕事をサポートするためにコーヒーを買っていただけます

プログレッシブ Web アプリ、Web の最も内側の仕組み、CSS 変数、フロントエンド開発の初心者ガイドなどに関する私の他の記事をお読みください。

その他の Web 開発およびテクノロジー関連の記事については、「いいね！」、コメント、フォローしてください。コーディングを楽しんでください!!!

以上がWeb アプリにダーク/ライト テーマを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：dev.to
前の記事：JavaScript でのサプライチェーン攻撃の防止 次の記事：WebRTC SFU: 完全なガイド。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1637
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
1792
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1528
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1439
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1486
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！