2021/3/1 23:13

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

概要

@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 関係の実務をやってないと分からないだろ、って思いました。

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

こういう感じらしい。

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

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