JavaScriptを利用して、ページのカラーテーマをページ表示中に変更できるようにするコードを紹介します。
概要
こちらの記事では、
prefers-color-scheme
を利用して、
OSのカラー設定がダークモードの場合にダークモードに対応したページを表示する方法を紹介しました。
カラーモードに応じてカラー設定する利用であれば
prefers-color-scheme
で問題ありませんが、利用者が好みでライトモードかダークモードを選べるようにする場合は、
prefers-color-scheme
を利用する方法は使えないため、JavaScriptでカラーテーマを変更する必要があります。この記事では、JavaScriptでページのカラーテーマを変更するコードを紹介します。
実装
コード
下記のHTMLページとCSSファイルを作成します。
:root {
--background-color: #FFFFFF;
--frame-background-color: #e1e1e1;
--font-color: #383838;
--frame-font-color: #383838;
--link-color:#3067ff;
}
:root[theme="dark"] {
--background-color: #000000;
--frame-background-color: #424242;
--font-color: #bababa;
--frame-font-color: #e1e1e1;
--link-color: #ffdc0c;
}
body {
background-color: var(--background-color);
color: var(--font-color);
}
a {
color: var(--link-color);
}
.frame {
background-color: var( --frame-background-color);
color: var(--frame-font-color);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="ChangeColorMode.css">
<script type="text/javascript">
function changeLightMode() {
document.documentElement.setAttribute('theme', 'light');
}
function changeDarkMode(){
document.documentElement.setAttribute('theme', 'dark');
}
</script>
</head>
<body>
<div>テストページです。</div>
<div class="frame">テストのコンテンツです。</div>
<hr/>
<div>
切り替え
<a href="javascript:changeLightMode();">ライトカラー</a>
<a href="javascript:changeDarkMode();">ダークカラー</a>
</div>
</body>
</html>
解説
root疑似クラスを2つ用意します。一つは通常の
:root
疑似クラス、もう一つは
theme
属性に
dark
が設定された
:root
疑似クラスです。
roo疑似クラス内にはCSS変数を記述します。
:root
疑似クラスに記述した変数がライトモードのカラー設定
:root [theme="dark"]
疑似クラスに記述した変数がダークモードのカラー設定になります。
CSS変数の詳細については
こちらの記事を参照して下さい。
:root {
--background-color: #FFFFFF;
--frame-background-color: #e1e1e1;
--font-color: #383838;
--frame-font-color: #383838;
--link-color:#3067ff;
}
:root[theme="dark"] {
--background-color: #000000;
--frame-background-color: #424242;
--font-color: #bababa;
--frame-font-color: #e1e1e1;
--link-color: #ffdc0c;
}
CSSのクラスやタグのカラー設定はCSS変数を参照してます。
body {
background-color: var(--background-color);
color: var(--font-color);
}
a {
color: var(--link-color);
}
.frame {
background-color: var( --frame-background-color);
color: var(--frame-font-color);
}
HTMLでカラーテーマの変更リンクがクリックされた際に実行されるJavaScriptが下記です。DOMの最上位要素の
documentElement
の属性を変更するコードです。
changeLightMode
が呼び出された際には、
theme
属性を
light
に設定しています。
changeDarkMode
が呼び出された場合は、
theme
属性を
dark
に設定します。
function changeLightMode() {
document.documentElement.setAttribute('theme', 'light');
}
function changeDarkMode(){
document.documentElement.setAttribute('theme', 'dark');
}
表示結果
上記のHTMLページを表示します。下図のページが表示されます。
[ダークカラー]のリンクをクリックします。ページのカラーが黒を基調とした色に変わります。
[ライトカラー]のリンクをクリックします。ページのカラーが白を基調とした色に変わります。
リンクのクリックにより、ページのカラーを変更することができました。
補足
今回紹介した方法でリンクのクリックでカラーは変更できますが、OSのカラーモードがダークモードの場合でもライトカラーで表示されてしまいます。OSのカラーモードに応じてデフォルトのカラーを変更する方法は
こちらの記事を参照して下さい。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2022-01-08
作成日: 2020-01-26