わずか JavaScript 行でライトとダークのテーマを変更

わかりました。CSS が少し必要ですが、インターネットで見つけた答えよりもはるかに簡単でした。

私が達成しようとしていることは何ですか?
私はこの方法で 2 つのことを達成しようとしています。

1. Web サイトがユーザーの好みの方法で読み込めるようにする必要があります (OS でテーマがすでに選択されている部分)
2. しかし、読み込み後にダークモードとライトモードを切り替えられるようにしたいと思っています。

そこで、ユーザーが期待するテーマを読み込んで、必要に応じて変更できる Web サイトを作成します。

ステップ 1: 切り替えるボタンを作成します

<img class="mode" src="./img/moon.svg">

私は月の SVG 画像を含む画像をボタンとして使用しています。 2 つのオプションを切り替えても問題ないと思われるボタンまたはチェックボックスを追加できます。

ステップ 2: 色の詳細をカスタム プロパティとして CSS に入力します

:root{
    color-scheme: light dark;

    --light-bg: ghostwhite;
    --light-color: darkslategray;
    --light-code: tomato;

    --dark-bg: darkslategray;
    --dark-color: ghostwhite;
    --dark-code: gold;
}

.light{
    color-scheme: light;
}

.dark{
    color-scheme: dark;
}

わかりました。ルートには color-scheme と呼ばれるプロパティが表示されます。これがゲームチェンジャーになります。
ご覧のとおり、明るい値または暗い値を受け取ります。また、color-scheme の値を dark または light に設定する .light と .dark という 2 つのクラスも作成しました。

ステップ 3: コードのさまざまな部分に色を追加します

body{
    background-color: light-dark(var(--light-bg), var(--dark-bg));
}

これで、プロパティ (背景、色のプロパティなど) が色を要求するたびに、light-dark() という関数を使用できるようになります。
この関数は 2 つの値を取り、最初の値はカラー スキームがライトに設定されている場合に使用され、2 番目の値はカラー スキームがダークに設定されている場合に使用されます。

はい...これは 2024 年 5 月にリリースされた機能です。かなり新しい機能ですが、すぐに適応される予定です。この記事の執筆時点では、ベースライン サポートが提供されています。ここにそのドキュメントがあります

light-dark() - CSS: カスケード スタイル シート | MDN

light-dark() CSS この関数を使用すると、プロパティに 2 つの色を設定できます。開発者が明るい配色または暗い配色を設定したか、ユーザーが明るいテーマまたは暗い色のテーマを要求したかを検出することで、2 つの色のオプションの 1 つを返します。テーマの色を優先内に含める必要はありません。 -color-scheme メディア機能クエリ。 ユーザーは、オペレーティング システムの設定 (ライト モードまたはダーク モードなど) またはユーザー エージェントの設定を通じて、配色の好みを指定できます。 light-dark() 関数を使用すると、任意の を指定できる 2 つの色の値を指定できます。値が受け入れられます。 CSS カラー関数 light-dark() は、ユーザーの設定が明るい場合、または設定が設定されていない場合は最初の値を返し、ユーザーの設定が暗い場合は 2 番目の値を返します。

開発者.mozilla.org

これを使用すると、CSS が OS からユーザーの好みを自動的に検出し、希望する色に設定します。
最初の目標は達成されました。Web サイトは、ユーザーが OS で既に必要としているカラー モードで読み込まれるようになります。

ステップ 4: Javascript を使用してダーク モードとライト モードを切り替える

// mode is the toggle button 
mode.addEventListener("click", ()=>{
    // we are getting the color scheme here
    let theme = document.documentElement.style.colorScheme;
    /*  when a website is first loaded
    it will have null as its color-scheme value*/
    if(theme == null){
        // this window.matchMedia() checks if the user prefers the dark theme
        if(window.matchMedia("(prefers-color-scheme:dark)").matches){
            /* if they prefer dark, clicking on our button should turn everything to light, 
            the color-scheme will be given a value as light  */
            document.documentElement.style.colorScheme = "light"; 
        }
        // Or else the color-scheme will be set to dark
        document.documentElement.style.colorScheme = "dark";
    }

    /* Now since our toggle button set the color scheme,
        we can simply change light to dark and dark to light using below code 
    */

    else{
        document.documentElement.style.colorScheme = (theme == "light")? "dark": "light";
    }
});

ここで、document.documentElement.style.colorScheme は実際には CSS の :root 要素を参照します。
前のステップでユーザー優先モードで Web サイトを開くことはすでに達成しましたが、ここではトグル ボタンをクリックすると次のジョブが実行されます。

1. カラースキームに値があるかどうかをチェックします。値がない場合、Web サイトはユーザー優先モードになっており、モードを変更するには暗いか明るいかを識別する必要があります。
2. window.matchMedia("(prefers-color-scheme:dark)").matches を使用してダーク モードかどうかを確認し、ダーク モードの場合はカラー スキームをライトに変更し、そうでない場合はカラー スキームをライトに変更します。 、ダークに変更します。
3. 次回ボタンをクリックしたときには、カラースキームの値がすでに設定されているので、暗または明を切り替えるだけです。

*追記: * これが私の最初の投稿であり、私はまだ Web 開発の初心者です。しかし、この方法を検索しても、それに関する関連記事は見つかりませんでした。すでにご存知の場合は、クリックを誘導して申し訳ありません。この投稿は、新しいプロジェクトに取り組むたびにこのプロセスを思い出すのに役立つと思いました。
Web サイトが古いブラウザーで動作するように作業している場合、この方法は間違いなく適していません。この投稿についてコメント欄で教えてください。読んでいただきありがとうございます。

以上がわずか JavaScript 行でライトとダークのテーマを変更の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。