わずか JavaScript 行でライトとダークのテーマを変更-CSSチュートリアル-php.cn

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

王林

リリース： 2024-08-21 21:05:06

オリジナル

821 人が閲覧しました

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

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

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

そこで、ユーザーが期待するテーマを読み込んで、必要に応じて変更できる 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 月にリリースされた機能です。かなり新しい機能ですが、すぐに適応される予定です。この記事の執筆時点では、ベースラインサポートが提供されています。ここにそのドキュメントがあります

Change Light and Dark theme in just lines of JavaScript

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 サイトを開くことはすでに達成しましたが、ここではトグルボタンをクリックすると次のジョブが実行されます。

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

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

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