見出し画像

JavaScriptを使用してダークモードの取得と変化

poca

こんにちは、pocaccio(ポカッチオ)です。
CSS完全に理解しました。


ご覧いただきありがとうございます。
今日やったもので、ダークモードの取得があったのでその覚書です。

テストサイトはここで、PCのスクリーンモード取得とスイッチでの変化
(Netlifyという、ホスティングサービスを利用して公開しています)

現在各サービスで主流となっているダークモードをWebサイトに実装するために以下のことを行いました。

ダークモードの実装

まずは通常の表示と変化をつけるためにCSSでダークモードの実装を行います。
テストページのため今回は文字のカラーのみをカスタムプロパティで以下のように定義

:root{
    --lighttext: rgb(0, 0, 0);
    --darktext: rgb(255, 255, 255);
}

bodyタグにはboforeで背景画像を表示しdarkクラスが追加されるとbefore中の背景画像を変化させるように記述してコードを簡素化させます。

また、bodyタグに.darkが追加されるとテキスト全体の変化が起きるようにCSSを記述、この時に、colorプロパティで変化をつけるのではなく、カスタムプロパティ—lighttext:自体を変化させることで、全体の変化を簡素に記述することができます。

//ライトモード(通常時)のボディタグ

body::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(lightbg.JPG);
    background-repeat: no-repeat;
    background-size: cover;
    filter: contrast(1.1) blur(1px);
    z-index: -1;
}

//ダークモード時の変化

.dark{
    --lighttext: var(--darktext);
}

//ダークモード時の背景設定
body.dark::before{
    content: "";
    background-image: url(darkbg.jpg);//ダークモードにした際背景画像を変化
    background-position: center;
    filter: contrast(1.1) blur(1px);
    z-index: -1;
}


つぎに、モードの変化に使用するスイッチにスタイルを適用します。(HTMLタグは後ほど)

モードスイッチの色と太さの変化

通常時(ライトモード)の時は[light]が濃く表示されて[dark]が薄くるように、
ダークモード時は逆に[light]が薄く表示され[dark]が濃く表示されるようにスタイルを適用します。

ちなみに、通常時は文字色が黒に対してダークモードは白のため文字のウェイトが同じように表示されるように強調時の文字の太さを変えています。

.navbar .modeswitch .lightbtn{
    font-weight: 700;//黒文字のため太く
    filter: brightness(1);
}

.navbar .modeswitch .darkbtn{
    font-weight: 300;
    filter: brightness(.5);
}

.dark .navbar .modeswitch .lightbtn{
    font-weight: 300;
    filter: brightness(.5);
}

.dark .navbar .modeswitch .darkbtn{
    font-weight: 600;//白文字のため黒文字よりちょっと細く
    filter: brightness(1);
}


CSSでそれぞれのスタイルを適用できれば、あとはスイッチで変化させるだけです。
JSで可能ですがボタン部分に関してはシンプルなコードのため試しにHTMLに直接定義させてみます。

モードスイッチの実装

ヘッダーにスイッチ用のdivを設置して中にアンカーで[Light]と[Dark]ボタンを作成(アンカーの間にあるスラッシュはただのボタン間の装飾です)
それぞれのアンカータグにクラスと”onclick”を定義してクリック時にbodyタグのクラスを追加もしくは消去する。
たったこれだけでボタンで変化させるダークモードの実装は完了しました。

<div class="modeswitch">
    <a class="lightbtn" onclick="document.body.classList.remove('dark')">Light</a>
    /
    <a class="darkbtn" onclick="document.body.classList.add('dark')">Dark</a>
</div>


通常の実装であればこれで終わりですが、デバイスがダークモードなのにサイトに飛ぶとライトモードで表示されると目に深刻なダメージを受けた経験は皆さんお持ちだと思うので、ブラウザから表示モードを取得してサイトを開いた時に自動で表示を変化させるようにします。

ブラウザから表示モードを取得して自動変化

JSの解説を行うと、[darkModeCheck]という関数を定義します。

この中には、ブラウザに組み込まれているカラースキーム(簡単に言うと表示モード)を取得して、それがダークモードだったらbodyタグにdarkクラスを追加、ダークモード以外だとbodyからdarkクラスを除外。
といったコードになります。

それを、イベントリスナーを使用してページ読み込みの際(DOMContentLoaded)と表示モード変更時(change)にモードの確認と変化をさせます。

function darkModeCheck() {
    if (window.matchMedia('(prefers-color-scheme: dark)').matches){
        document.body.classList.add("dark");
    }else {
        document.body.classList.remove("dark");
    };
};

// ページ読み込み時にダークモードのチェック
document.addEventListener('DOMContentLoaded', darkModeCheck);

// カラースキーム変更時にダークモードチェック
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', darkModeCheck);

以上で、ダークモードの取得と変化をJavaScriptを使用して行うことができました。

ちなみに、ここまで見てくださった中でお詳しい方はご存知と思います。
これらの変化は、CSSのメディアクエリだけで表現することができます。
JavaScript、まったく不要です。(ボタンの変化もHTML直接でいける)

記述方法はこんな感じ

@media (prefers-color-scheme: dark) {
	body{
    --lighttext: var(--darktext);
	}

	//ダークモード時の背景設定
	body::before{
	    content: "";
	    background-image: url(darkbg.jpg);//ダークモードにした際背景画像を変化
	    background-position: center;
	    filter: contrast(1.1) blur(1px);
	    z-index: -1
	}
	.navbar .modeswitch .lightbtn{
    font-weight: 300;
    filter: brightness(.5);
	}

	.navbar .modeswitch .darkbtn{
    font-weight: 600;//白文字のため黒文字よりちょっと細く
    filter: brightness(1);
	}
}

ただ、おそらくですが今回のようにボタンと自動変化をつけようとすれば、JavaScriptでdarkクラスを付与させる方が記述としては簡素になる気がするので、今後検証してみようかと思います。

ということで、以上でダークモードの取得と変化を行うためのコーディングが完了しました。
試しにボタンのクリックやブラウザの検証からスキームの変化を行うことで表示が変わったことが確認できると思います。

今回勉強になったところ

CSSのメディアクエリ、いろんなことできるんだなーというのが一番の感想でした。
onclickでハンバーガーメニューやトグルメニューなどの変化をつけられますが、レスポンシブデザインや今回のような表示モードの取得はメディアクエリに任せておけば余分なスクリプトでお腹がいっぱいになることも防げそうです。

また、JavaScriptについても前回と今回の実装で、タグやクラスを取得して値を変化させる。
といった基本を覚えることができたので次回はもう少し込み入ったデータの変化(例えばテキストの変化を行ってローディングや文字をフローティングさせたり)なども実装してより自由なWebページを作成していきたいと思います。

それでは、ここまでお付き合いくださりありがとうございました。
次の投稿をお待ちください。

：以下は今回のソースコード

HTML

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ScreenModeTest</title>
    <link rel="stylesheet" href="style.css">
</head>
<body class="">
    <header>
        <div class="navbar">
            <div class="icon">
                <span class="headtitle">Icon</span>
            </div>
            <div class="menu">
                <ul>
                    <li><a class="home" href="#">home</a></li>
                    <li><a class="about" href="#">about</a></li>
                    <li><a class="works" href="#">works</a></li>
                    <li><a class="contact" href="#">contact</a></li>
                    <li><a class="links" href="#">links</a></li>
                </ul>
            </div>
            <div class="modeswitch">
                <a class="lightbtn" onclick="document.body.classList.remove('dark')">Light</a>
                /
                <a class="darkbtn" onclick="document.body.classList.add('dark')">Dark</a>
            </div>
        </div>
    </header>

    <main>
        <div class="container">
            <div class="title">
                <h2>ScreenModeTestSite</h2>
            </div>
            <div class="subtitle">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Vero rerum dicta nisi voluptatibus praesentium? 
                    Soluta vero autem quae assumenda.
                </p>
            </div>
        </div>
    </main>
</body>
<script src="script.js"></script>
</html>

JavaScript

function darkModeCheck() {
    if (window.matchMedia('(prefers-color-scheme: dark)').matches){
        document.body.classList.add("dark");
    }else {
        document.body.classList.remove("dark");
    };
};

// ページ読み込み時にダークモードのチェック
document.addEventListener('DOMContentLoaded', darkModeCheck);

// カラースキーム変更時にダークモードチェック
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', darkModeCheck);

CSS

@import url('<https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:wght@400..800&display=swap>');

.wix-madefor-display{
    font-family: "Wix Madefor Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

*{
margin: 0;
padding: 0;
font-optical-sizing: auto;
font-family: "Wix Madefor Display", sans-serif;
}

:root{
    --lighttext: rgb(0, 0, 0);
    --darktext: rgb(255, 255, 255);
}

body{
    margin: 0;
    padding: 0;
    height: 120vh;
    display: block;
    background-color: white;
    position: relative;
}
body::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(lightbg.JPG);
    background-repeat: no-repeat;
    background-size: cover;
    filter: contrast(1.1) blur(1px);
    z-index: -1;
}

header{
    width: 100%;
    height: 60px;
    display: block;
}

.navbar{
    height: 40px;
    width: 200px;
    padding-top: 10px;
    display: flex;
    align-items: center;
    border-bottom: 3px dashed var(--lighttext);
}

.navbar .icon{
    display: flex;
    position: sticky;
    justify-content: flex-start;
    width: 100%;
    padding-left: 30px;
    margin-right: auto;
}

.navbar .icon .headtitle{
    color: var(--lighttext);
    font-size: 30px;
    font-weight: 900;
}

.navbar .menu{
    position: absolute;
    display: flex;
    width: 100%;
    justify-content: center;
    margin-left: 50%;
    margin-right: 50%;
    transform: translateX(-50%);
}

.navbar .menu ul, li{
    display: flex;
    list-style: none;
    gap: 30px;

}

.navbar .menu ul li a{
    text-decoration: none;
    color: var(--lighttext);
    font-size: 16px;
    font-weight: 700;
}

.navbar .menu ul:hover li a{
    filter: blur(1px);
}

.navbar .menu ul li a:hover{
    scale: 1.1;
    color: var(--lighttext) !important;
    filter: blur(0px) !important;
}

.navbar .modeswitch{
    position: absolute;
    display: flex;
    width: 100px;
    justify-content: flex-end;
    right: 30px;
    color: var(--lighttext);
}

.navbar .modeswitch a{
    font-size: 15px;
    font-weight: 600;
    margin: 0 5px;
    cursor: pointer;
}

.navbar .modeswitch .lightbtn{
    font-weight: 700;
    filter: brightness(1);
}

.navbar .modeswitch .darkbtn{
    font-weight: 300;
    filter: brightness(.5);
}

main{
    display: flex;
    width: 100%;
    height: 70%;
    align-items: center;
    justify-content: center;
}

.container{
    display: block;
    width: 500px;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 50vh;
}

.title{
    width: 100%;
    display: block;
    color: var(--lighttext);
}

.subtitle{
    padding-top: 30px;
    width: 100%;
    display: block;
    color: var(--lighttext);
}

/* DarkModeCSS */

.dark{
    --lighttext: var(--darktext);
}

body.dark{
    margin: 0;
    padding: 0;
    height: 120vh;
    display: block;
    background-color: black;
    position: relative;
}
body.dark::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(darkbg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    filter: contrast(1.1) blur(1px);
    z-index: -1;
}

.dark .navbar .modeswitch .lightbtn{
    font-weight: 300;
    filter: brightness(.5);
}

.dark .navbar .modeswitch .darkbtn{
    font-weight: 600;
    filter: brightness(1);
}

いいなと思ったら応援しよう！