Demo OpenShared
コレWordPressデス

Darkモードlightモードのカラーを変更

posted:

そもそもlightは指定しないで普通に指定すればいい。
ライトモード時のコントラストが悪いのと少し眩しかったので変更を模索している折にCSSカラーモジュールレベル5のドラフトが公開されました。レベル4も曖昧なのに

カラーモジュールレベル5

見出しをみるだけでもこれは良さそうだなと思いましたが、説明はなるほどよくわからない！が、とにかく色調整が容易にできそうで、特にコントラストはアクセシビリティなサイト構築には欠かせないのでこの後どうなるか期待したい。

Kindleを意識してセピア調に

色は違うんですけどね。
セピア調カラーにしてみました。

theme color change

Color Code

$light-body:#fff3e5;
$light-side:#eee1d3;
$light-font:#0f0b07;
$light-border:#ebdacd;

$darkf-body:#363132;
$darkf-side:#312a2a;
$darkf-font:#fffbef;
$dark-border:#675b52;

その他テーマ作成において現在の課題

追記 darkとlightの現状

2020年5月30日
モバイル端末で閲覧している際にずっと気になったので追記します。

@media (prefers-color-scheme: light)のdark、lightは、OSでの設定あるはアプリの設定をユーザーが選択できるようになっています。

モバイルの検索結果からではlightモードで表示されている？

普段、darkモードで表示しているサイトをGoogle検索から訪問してみると、lightモードで表示されます。あとは、Bing webmasterのサムネイル画像、Google PageSpeed Insightもlightモードです。

このサイトではノーマルはlightと同じにしてましたので、なんとなくそういうことなのかなと思ってましたが、慣れてくるとたまに表示されるlightモードに違和感があります。macOS Catalinaのようにautoで切り替わるのがいいなと思ってます。

そこで今回はノーマルをdarkモードに変更してみます。

コードは白(#FFF)と黒(#000)でわかりやすくしてます。

body{
 background-color:#FFF;
}
a {
 color: #08C; //濃いめの水色
}

@media (prefers-color-scheme: light){
 body {
  background-color:#FFF;
 }
 a {
  color: #08C; //濃いめの水色
 }
}

@media (prefers-color-scheme: dark){
 body {
  background-color:#000;
 }
 a {
  color:#61aeef; //薄めの水色
 }
}

変更内容

body{
 background-color:#000;
}
a {
 color:#ed7a0f; // オレンジ
}

@media (prefers-color-scheme: light){
 body {
  background-color:#FFF;
 }
 a {
  color: #08C;
 }
}

@media (prefers-color-scheme: dark){
 body {
  background-color:#000;
 }
 a {
  color:#61aeef;
 }
}

記述が間違っていたのではないか？ということもありますが、CraftCMSで作成したサイトは、default、dark、lightの順で記述しました。