{ライトモード}{ダークモード}(2)

{あれ K#EDD2/4BC7}

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

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

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

{2023年5月22日}{違和感}{ダークモード}(3)

{あれ K#EDD2/DEC6}

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

{color:currentColorの方が良さそう}{AA}{ダークモード}(3)
{media="(prefers-color-scheme: dark)"}{favicon}{ダークモード}(3)

{media="(prefers-color-scheme: dark)"を使ってfaviconをダークモードで切り替える(Firefox非対応) K#EDD2/CA44}

<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が表示される。

(1){あれ}
{構文ハイライト}{media="(prefers-color-scheme: light)"}{media="(prefers-color-scheme: dark)"}{highlight.js}{ダークモード}(5)
{👍}{tweet埋め込みをもっといい感じにする}{tweet埋め込み}{ダークモード}(4)

{ダークモード時には埋め込んだTweetもダークモードで表示する K#EDD2/D365}

出力したい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';
    }
}

表示例

{『t_wの輪郭』で実施した作業}{manifest.json}{background_color}{2022年5月5日}{2022年5月3散歩メモ}{PWA}{ダークモード対応}{ダークモード}(8)

{『t_wの輪郭』をダークモードに対応させる K#EDD2/0739}

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

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

 これでまあいいだろう。

{ダークモード}

{}