CSSを使用してダークモードとブライトモードを切り替える

Web Skills第5号では、CSSでダークモードやハイライトモードを実装するための技術的なソリューションが具体的に説明されています。つまり、新しいメディアクエリ条件のprefers-color-scheme値のdarkとlight使用して切り替えます。これは最も基本的でネイティブなソリューションです。また、CSS の混合モード属性を使用してシミュレートすることもできます。もちろん、ジャーナルに記載されている技術的な解決策に加えて、他の解決策もあります。今日はダークモードとハイライトモードを切り替える方法を学びます。

ダークモードとライトモードとは

技術的な解決策について話す前に、まずダークモードとハイライトモードとは何かを簡単に理解しましょう。これら 2 つの概念は macOS システムに由来しており、ユーザーにはライトスキンとダークスキンの 2 つのテーマスキンが提供されます。この概念が生まれて以来、多くのウェブサイトがユーザーに 2 セットの肌の色を提供し、ユーザーが自分の習慣や好みに応じて簡単に切り替えられるようにしています。

ダークモードかハイライトモードかにかかわらず、黒と白の切り替えになります。このテーマスタイルは、色覚異常を持つユーザーにとって非常に使いやすいです。

同様の機能は他のシステムやソフトウェアにも存在しますが、違いは提供されるモードにあります。一部のソフトウェアでは、ユーザーにスキンのカスタマイズ機能が提供される場合があります。もちろん、ウェブサイトにも同様の機能はありますが、以前はこの機能をウェブサイトのスキニングと呼ぶことが多かったかもしれません。

このように、これら 2 つのモード間の切り替えはスキンの変更として考えることができ、ビジネスシナリオにはより適している可能性があります。次は技術的な側面、つまり、 CSS を使用して Web ページやアプリケーションのテーマの切り替えを完了する方法について説明します。

最もシンプルなモード

テーマがデフォルトでハイライトモードになっていると仮定すると、ハイライトモードをダークモードに切り替える最も簡単で強力な方法を使用できます。 Web ページにエントリがあり、ユーザーがこのbuttonをクリックすると、 dark-themeクラス名がhtml要素に追加されます。

document.getElementById('buttonID').addEventListener('click', function(){
    document.documentElement.classList.add('ダークテーマ')
})

.dark-themeとそのすべての子孫要素にダークスタイルを追加します。

.ダークテーマ{
    背景色: #000;
    色: 白;
}

.dark-theme *:not(a) {
    背景色: #000 !重要;
    色: #fff !重要;
    境界線の色: #999 !重要;
}

この方法は単純で大まかですが、いくつかの詳細には追加の処理が必要であり、特にコードで!importantスタイルも使用されている場合は、さらに面倒になります。さらに、色に関係する他の要素には追加の処理が必要になる場合があります。

スタイルを2セット用意する

私の個人的な印象では、同様の効果を実現する最も古い方法は、通常、JavaScript を使用して Web ページまたは Web アプリケーションのテーマスキンの.cssファイルを変更することでした。

上図に示すように、2 つの CSS ファイルが提供されており、1 つはtheme1.css 、もう 1 つはtheme2.cssです。同時に、ユーザーが切り替え可能な入り口が提供されています。ユーザーが対応するテーマを選択すると、Web ページまたは Web アプリケーションが対応する.cssに切り替わり、対応するテーマのスキンの色の効果が確認できます。

Web ページのデフォルトのテーマスタイルがtheme1.cssであると仮定します。

<link type="text/css" rel="スタイルシート" media="all" href="../theme1.css" id="theme_css" />

コード内に簡単なスクリプト関数を提供します。

document.getElementById('buttonID').addEventListener('click', function(){
    document.getElementById('theme_css').href = '../theme2.css';
})

テーマに戻ると、ダークモードとライトモードを切り替える必要がある場合は、同様の原則に従って、それぞれdark.cssとlight.cssを提供できます。

複数のスタイルセットを維持するのは面倒です。特に、製品にさらに多くのスキンを提供したい場合には面倒です。この時点で、Sass などのプロセッサを使用してテーマのスタイルを維持し、変数を宣言し、対応する変数の値を維持できます。たとえば、Bootstrap テーマの構築では Sass 変数を使用します。