t_wの輪郭

スマホやPCなどの私が占有して使用するデバイスでのダークモードの利用を辞めた。

久々にライトモードにすると、僅かに晴れやかな気分になった。地下鉄から出て晴れた外に出た時の感じ方に似ている。

ダークモードで暗い画面をみていると、夜の闇に怪物を見てしまうような心地がある。

デライトをダークモードにしてみるも、慣れてないせいで違和感がすごい

『t_wの輪郭』でダークモードに対応させるために必要になった。

<link rel="icon" href="/favicon.svg" type="image/svg+xml" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon_dark.svg" type="image/svg+xml" media="(prefers-color-scheme: dark)">

という風にmedia="(prefers-color-scheme: dark)"を付ける

ChromeとEdgeではダークモード時にfaviconが切り替わる。Firefox（v100.0）では切り替わらず、後に設定されたfaviconが表示される。

<link rel="stylesheet" href="/highlight/styles/a11y-dark.min.css" media="(prefers-color-scheme: dark)"> 
<link rel="stylesheet" href="/highlight/styles/a11y-light.min.css" media="(prefers-color-scheme: light)"> 
<script src="/highlight/highlight.min.js"></script>

出力したいHTML。
data-theme="dark"が入っていればダークモードでtweetを埋め込める。

<blockquote class="twitter-tweet" data-theme="dark"><p lang="en" dir="ltr">Arrowleaf balsamroot, a plant of the sunflower family, is found throughout the Rocky Mountain region and is sure to brighten your hikes and mood. <br><br>Photo at <a href="https://twitter.com/GrandTetonNPS?ref_src=twsrc%5Etfw">@GrandTetonNPS</a> by Anand Soundarajan <a href="https://t.co/eMjTFcEIJm">pic.twitter.com/eMjTFcEIJm</a></p>&mdash; US Department of the Interior (@Interior) <a href="https://twitter.com/Interior/status/1522698987115057154?ref_src=twsrc%5Etfw">May 6, 2022</a></blockquote>

JavaScript

if(window.matchMedia('(prefers-color-scheme: dark)').matches == true){
    for(const elem of document.querySelectorAll("blockquote.twitter-tweet")) {
        elem.dataset.theme = 'dark';
    }
}

表示例

　2022年5月5日
　ダークモードに対応させた。しばらく使ってみて色調を微調整するかもしれない。

　あ、PWAの起動画面の背景色も調整しなければ。
　→調整した。manifest.jsonのbackground_colorを書き換えても背景色が切り替わらなかったが、PWAをインストールし直したら背景色が切り替わった。
　ダークモードとライトモードでbackground_colorを切り替える方法が分からなかったため、黒色にしておいた。これでダークモードで使っていてもライトモードで使っていてもまぶしくなることは避けられる。

　これでまあいいだろう。

https://www.webcreatorbox.com/tech/dark-mode

・色調が白字に黒で固定されているたとえばOSの設定で暗い色調にしており，かつFirefoxもそれに合わせている状態でも白字に黒であり，それを利用者側で設定しなおすこともできなさそう（userChrome.cssを使えば設定できるかも）。

対応したい。が、Firefoxのダークモード判定が先に必要。
Firefoxのダークモードはテーマによって設定されている。

Media query to detect if the user has set their system to use a light or dark color theme.

https://caniuse.com/?search=prefers-color-scheme