88171.net

少し前にprefers-color-schemeメディアクエリを使ったダークモード対応を入れた。 ざっくりと色を反転させてみて、暗すぎると感じる部分は少し明るめに調整したり現物合わせであれこれした。 まあ、見かけ上はそれっぽい感じになってはいると思う。

内情は、色関係のSass変数の値をCSSのカスタムプロパティに突っ込んでさらにメディアクエリで上書きする、というなかなか泥臭い感じになっている。

$color-foreground: (
    body: #333,
      :
);
$color-background: (
    body: #fff,
      :
);

:root {
    --color-foreground: #{map-get($color-foreground, body)};
    --color-background: #{map-get($color-background, body)};
      :
}
@media (prefers-color-scheme: dark) {
    :root {
        --color-foreground: #{invert(map-get($color-foreground, body))};
        --color-background: #{invert(map-get($color-background, body))};
          :
    }
}

body {
    color: var(--color-foreground);
    background-color: var(--color-background);
      :
}

どうにかならんもんか、とは思うものの、いろいろと調べてみてもこれ以上スマートな方法が思いつかない。 ごちゃごちゃさせたくなくて実は色関係以外はカスタムプロパティでなくSass変数を直接参照している、というのもきまりが悪い。 もういっそSassを捨ててしまおうかとも考えたけれど、ネストなしで維持してゆける気がしない。

あんまりプリプロセッサに頼りっぱなしだと素のCSSの仕様に疎くなってしまって良くない。 正直な話、カスタムプロパティは今回の件で初めて知ることになった。 Sassを使い始めた一番の理由だった CSSに変数機構がない という点が、気づかないうちに解消されていた。