このブログのダークモード対応した。

概要

@media (prefers-color-scheme: dark) {
    /* ここに指定するやつ */
}

これです。

ブラウザの挙動の調査も兼ねて技術検証をしてみたという感じ。

詳細

内部的には scss で書いているのだけど、色の名前付けの棚卸しや整理などをやった結果、割と大掃除になった。

こんな小規模な個人のブログでその辺りも割とちゃんとした実装をしていたつもりだったけれど、それでもなんやかんや出てきて面倒だったし、 CSS はメンテが難しくなりがち。

地味に Rouge でやってるコードのシンタックスハイライトも黒背景っぽいテーマに切り替えた。ダルめだったので気合いの実装となった。

ついでに字詰めの指定も現代的なやつにした。

font-feature-settings: "pwid" 1;

これです。

そのままだと詰まり過ぎる気がしたので letter-spacing: 0.04em; を入れてある。

font-feature-settings について調べると "palt" について言及している記事は沢山あるが、詳細に立ち入ったものが全然なくて調べ辛かった。

Mozilla のドキュメント にもその辺の言及が無くて困っていたが、 Adobe Fonts の CSS での OpenType 機能の構文 を見て漸くどういうものなのか把握することが出来た。

この辺は DTP 関係の実務をやってないと分からないだろ、って思いました。

とりあえず簡単にまとめると

• pwid: プロポーショナル字形
• palt: プロポーショナルメトリクス
• pkna: プロポーショナルかな
• fwid: 等幅全角字形
• hwid: 等幅半角字形
• halt: 字幅半角メトリクス
• twid: 等幅三分字形
• qwid: 等幅四分字形

こういう感じらしい。

締め

https://dnpp.org の方もやらないと…。

CSS は難しいし、配色も難しい。