ウェブサイトにダークモード切り替え機能を持たせるための純粋なCSSフリー実装コード

序文

ダークモードの概念は、 MacOS系統のMojaveに由来し、ユーザーが選択できる 2 つのスキン (淺色主題と深色主題を提供しています。深色主題よく暗黑模式と呼ばれるものです。目の健康のために、携帯電話、タブレット、コンピューターで暗黑模式を選択しました。

Apple の担当者が徐々にすべての主要システムプラットフォームに暗黑模式への対応を要求しているため、著者は市場で最も低コストになるはずの網站暗黑模式適配方案も検討しました。

私を知っている友人は皆、私が熱烈な CSS 愛好家であることを知っているはずです。もちろん、今回も純粋な CSS を使用してこのソリューションを実装しています。はい、JS を追加しなくても、CSS の威力が再び証明されました。

アイデア

アイデアはシンプルで、ボタンを使用してテーマスタイルを切り替えるだけです。ボタンのチェックを外すと、淺色主題に切り替わります。ボタンのチェックを入れると、深色主題に切り替わります。このタスクを完了するには:checkedと+ hit を使用できます。

:checked : オプションがチェックされたフォーム要素

+ : 要素の隣接する兄弟要素

<input>を使用してボタンをシミュレートします。ボタンが選択状態になると、 :checkedトリガーされます。 +によって、その背後にある隣接する Web サイト本体の<div>が暗黑模式になります。選択状態がキャンセルされると、暗黑模式が終了します。

<本文>
    <input class="ios-switch" type="checkbox">
    <div class="main">ウェブサイト本文</div>
</本文>

セレクターの機能と分類の詳細については、私の記事「おそらく最も完全で覚えやすい CSS セレクター分類方法」を参照してください。

トグルボタン

見た目の良いボタンをデザインしたいと思っていましたが、特にアイデアがなかったので、iPhoneを開いて、純粋な CSS を使用して設定に切換按鈕を実装しました。

サイズと色はiPhoneのスイッチボタンと一致しています。アイデアとしては、 <input>を使用してボタンをシミュレートし、 appearance:none宣言してデフォルトの外観を消去し、 ::before使用して背景領域をシミュレートし、 ::after使用してクリック領域をシミュレートし、 :checkedをトリガーした後に変更するための小さなアニメーションをいくつか追加することで、 iPhone切換按鈕ほぼ完璧に実現します。

<input class="ios-switch" type="checkbox">

.btn{
    境界線の半径: 31px;
    幅: 102px;
    高さ: 62px;
    背景色: #e9e9eb;
}
.ios-スイッチ{
    位置: 相対的;
    外観: なし;
    カーソル: ポインタ;
    遷移: すべて 100 ミリ秒;
    @extend .btn;
    ＆：：前に {
        位置: 絶対;
        コンテンツ： "";
        遷移: すべて 300ms cubic-bezier(.45, 1, .4, 1);
        @extend .btn;
    }
    ＆：：後 {
        位置: 絶対;
        左: 4px;
        上: 4px;
        境界線の半径: 27px;
        幅: 54px;
        高さ: 54px;
        背景色: #fff;
        ボックスの影: 1px 1px 5px rgba(#000, .3);
        コンテンツ： "";
        遷移: すべて 300ms cubic-bezier(.4, .4, .25, 1.35);
    }
    &:チェック済み{
        背景色: #5eb662;
        ＆：：前に {
            変換: スケール(0);
        }
        ＆：：後 {
            変換: translateX(40px);
        }
    }
}

オンラインデモとソースコードを表示するにはここをクリックしてください。

ダークモード

4月4日にインターネット全体が追悼モードになった時のことを覚えていますか?著者は、強力な CSS 属性filterを巧みに使用して、「1 行のコードがサイト全体を哀悼モードにする」という記事を公開しました。

html{
    フィルター:グレースケール(1);
}

本当にたった 1 行のコードで、今回も例外ではありません。一行代碼全站進入暗黑模式。

html{
    フィルター: 反転(1) 色相回転(180度);
}

filterの互換性は悪くなく、学生も安心して使用できます。まだ注意が必要な細かい点がいくつかありますが、この記事では繰り返しません。詳細については、「1行のコードがサイト全体を喪モードにする」を参照してください。

filter Photoshop基本的なフィルター効果を Web サイトに適用できる非常に魔法のようなプロパティです。私は通常、 filterを使うのが好きです。私の CodePen には、 filterを使用する純粋な CSS 特殊効果が多数あります。注意深い学生は、私が特にhue-rotate()関数とCSS變量を組み合わせて使用し、動的に遷移色を生成するのが好きであることに気付くかもしれません。詳細については、「CSS 変数を使用して CSS をより魅力的にする」を参照してください。

この暗黑模式では、 invert()とhue-rotate() 2 つのフィルター関数が使用されます。

invert() : 画像を反転して逆向きに出力します。0 0%の値は変化なし、 0~100%の値は線形乗数効果、 100%の値は完全な反転を意味します。

hue-rotate() : 色相回転、画像の色を弱める、白黒以外の色を処理する、 0degの値は変化なし、 0~360degの値は徐々に弱める、 360degを超える値は N 回転してから残りの値を計算する

invert()黑變白，白變黑，黑白顛倒と簡単に理解できます。 hue-rotate()単純に沖淡顏色という意味です。テーマの色相が変化しないようにするには、色相の回転を180degに宣言するのが妥当です。

上記の分析によると、ボタンが選択状態にある場合、 +を使用して次の兄弟要素も選択状態にします。兄弟要素に背景色がない場合background-color:#fffを宣言する必要があります。そうしないと、フィルター効果は有効になりません。フィルター効果を使用するときにこの兄弟要素の遷移をより自然にするには、 transition:all 300msを宣言します。

.ios-スイッチ{
    ...
    &:チェック済み{
        ...
        & + .main {
            フィルター: 反転(1) 色相回転(180度);
        }
    }
}
。主要 {
    背景色: #fff;
    遷移: すべて 300 ミリ秒;
}

CodePen での効果をよりわかりやすく示すために、 <iframe>を使用して、お気に入りの Nuggets コミュニティを紹介し、暗黑模式切り替え機能を無料で追加しました:wink:。同時に、レイアウトにも若干の変更が加えられました。オンラインデモとソースコードを表示するには、ここをクリックしてください。

最適化

注意深い生徒は、写真がすべて超音波写真のように見えることに気付くかもしれません。

設計原則によれば、スキニングはコンポーネントのみを対象とします。背景、画像、ビデオなどの一部のメディア要素は直接処理することができず、そのまま残す必要があります。暗黑模式フィルターの反転と色相回転を使用して実現されるため、これらのメディア要素にフィルターの反転と色相回転を再度適用することで復元できます。 Photoshop濾鏡を使用したことがある学生なら、それをよく理解しているはずです。

画像、
ビデオ
    フィルター: 反転(1) 色相回転(180度);
}

もう一つの疑問は、背景をどう扱うかということです。ご存知のとおり、背景はbackgroundプロパティファミリを使用して宣言されるため、特定のセレクターでマークすることはできません。ただし、別の方法として、背景付きの要素に特定のクラス名を追加し、それを上記のルールに含めることもできます。

Chrome DevToolsを通じて掘金社區のウェブサイトのソースコードを表示すると、これらのアバター、サムネイル、表示画像にはすべて特定のクラス名があり、その特定のクラス名がルールに追加されていることがわかりました。

画像、
ビデオ、
.アバター、
。画像、
.サムネイル{
    フィルター: 反転(1) 色相回転(180度);
}

一般的なウェブサイトでは、このクラス名は自分で定義できます。最も実現可能な方法は、特定のクラス.excludeを定義することです。除外します。フィルター効果を使用しないすべての要素に.excludeを追加します。

.除外{
    フィルター: 反転(1) 色相回転(180度);
}

改修

コードのデモンストレーションを容易にするために、CodePen デモでは<iframe>を使用して、私たちのお気に入りの Nuggets コミュニティを紹介します。 <iframe>のスタイルを宣言することは不可能であるため、Nuggets コミュニティに移行し、 Chrome DevToolsを通じて直接変更しました。

Chrome瀏覽器でF12またはCmd+Alt+Iを押してChrome DevToolsを開き、Web サイトの HTML 構造を分析します。

<本文>
    <div id="__nuxt">...</div>
</本文>

<body>に切換按鈕を挿入します。

<本文>
    <input class="ios-switch" type="checkbox">
    <div id="__nuxt">...</div>
</本文>

次のSCSS代碼をCSS代碼に変換し、 <head>内の新しく作成された<style>に挿入します。 SASS轉CSSオンラインツール Web サイトをお勧めします。次のコードを Web サイトにコピーして直接変換し、完了したら<style>に貼り付けます。

.btn{
    境界線の半径: 31px;
    幅: 102px;
    高さ: 62px;
    背景色: #e9e9eb;
}
.ios-スイッチ{
    位置: 相対的;
    外観: なし;
    カーソル: ポインタ;
    遷移: すべて 100 ミリ秒;
    @extend .btn;
    ＆：：前に {
        位置: 絶対;
        コンテンツ： "";
        遷移: すべて 300ms cubic-bezier(.45, 1, .4, 1);
        @extend .btn;
    }
    ＆：：後 {
        位置: 絶対;
        左: 4px;
        上: 4px;
        境界線の半径: 27px;
        幅: 54px;
        高さ: 54px;
        背景色: #fff;
        ボックスの影: 1px 1px 5px rgba(#000, .3);
        コンテンツ： "";
        遷移: すべて 300ms cubic-bezier(.4, .4, .25, 1.35);
    }
    &:チェック済み{
        背景色: #5eb662;
        ＆：：前に {
            変換: スケール(0);
        }
        ＆：：後 {
            変換: translateX(40px);
        }
        & + #__nuxt {
            フィルター: 反転(1) 色相回転(180度);
            画像、
            ビデオ、
            .アバター、
            。画像、
            .サムネイル{
                フィルター: 反転(1) 色相回転(180度);
            }
        }
    }
}
#__nuxt {
    背景色: #fff;
    遷移: すべて 300 ミリ秒;
}

完了後、切換按鈕が表示されない場合は、 position:absoluteを使用して、表示する位置に絶対配置できます。

.ios-スイッチ{
    位置: 絶対;
    右: 0;
    上: 0;
    zインデックス: 99999;
    アウトライン: なし;
}

または、 <div id="__nuxt">内の任意の場所に<label>作成し、 <input class="ios-switch" id="toggle" hidden>と<label for="toggle">を相互にバインドして、 <input>のトリガー領域を<label>に転送します。具体的な実装方法については、作者の純粋な CSS タブナビゲーションバーの実装を参照してください。

説明が少しわかりにくいと感じた場合は、少し整理して、上記の操作を 3 つのステップで完了することができます。

ナゲッツコミュニティのウェブサイトを開く

F12またはCmd+Alt+Iを押してChrome DevToolsを開きます

<head>に<style>を挿入します。

コピー＆ペーストを容易にするために、著者は上記の分析から得られた CSS コードを圧縮しました。

<style> .btn、.ios-switch :: before、.ios-switch {border-radius：31px; width：102px; height：62px; background-color：＃e9e9eb;}。ios-switch {position：relative; lative; ligate; ligate：none：none; cursor：coursor：contert：all copest： Ubic-Bezier（0.45,1,0.4,1）;}。iOS-switch :: after {position：absolute; left：4px; top：4px; width：54px; MS Cubic-Bezier（0.4,0.4,0.25,1.35）;}。iOS-Switch：checked {background-color：＃5eb662;}。ios-switch：checked :: before {transform：scale（0）;} ：（1）Hue-Rotate（180Deg）;}。iOS-Switch：チェック +＃__nuxt img：checked +＃__nuxt video、.ios-switch：checked +＃_nuxt .avatar、.ios-switch：checked +＃__nuxt .is-switch：hid + 0deg）;} #__ nuxt {background-color：#fff; transition：すべて300ms;}。ios-switch {position：aspolute; right：0; top：0; z-index：99999; outline：none;} </style>

<input>を<body>に挿入します。

<本文>
    <input class="ios-switch" type="checkbox">
    <div id="__nuxt">...</div>
</本文>

このように、純粋な CSS 実装により、Web サイトに暗黑模式切り替え機能を瞬時に追加できます。CSS を新たな目で見るようになりましたか?

要約する

純CSS實現方案全体は:checked 、 + 、 filter 3 つのポイントを中心に展開され、いずれも欠落することはできません。シンプルに思えます。CSS が特殊効果に一般的に使用されていない場合、わずか 3 つの補助ポイントでこのような強力な機能が実現できるとは想像しがたいでしょう。

<本文>
    <input class="ios-switch" type="checkbox">
    <div class="main">ウェブサイト本文</div>
</本文>

.ios-スイッチ{
    ...
    &:チェック済み{
        ...
        & + .main {
            フィルター: 反転(1) 色相回転(180度);
            画像、
            ビデオ、
            .除外{
                フィルター: 反転(1) 色相回転(180度);
            }
        }
    }
}
。主要 {
    背景色: #fff;
    遷移: すべて 300 ミリ秒;
}

CSS+JS實現方案と比較すると、暗黑模式スタイルコードの完全なセットを維持する必要がなく、 DOMを操作する必要がなく、通常の複雑な操作も必要ありません。高度にカスタマイズされた暗黑模式の完全なセットを作成する場合を除き、 CSS+JS實現方案が必要です。それ以外の場合は、このソリューションを使用できます。

このソリューションには次の機能があります。

純粋なCSS実装、シンプルで効率的、よりスタイリッシュ
メンテナンスコストがほとんどかからず、反復が速い
フィルター効果を最大限に活用し、互換性も良好

やってみるのもいいですよ。終わって結果が良かったと思ったら、上司に昇給をお願いしてみましょう:stuck_out_tongue_winking_eye:、ハハ！

純粋な CSS を使用して Web サイトのダークモード切り替えを無料で有効にする方法についての記事はこれで終わりです。CSS ダークモード切り替えの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MYSQL 演算子の概要

>>: LinuxでIPアドレスが表示されない問題の解決方法