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';
    }
}

表示例