2024/08/06

Dark Color Scheme for Uhhyou Web Synthesizers / Uhhyou Web Synthesizers のダークモード

Dark color scheme is added for Uhhyou Web Synthesizers.

This dark color scheme is just an invert of light color scheme. It's not 100% invert, but 87.4% (≈ 1 - (0x20 / 0xff)) to make background color to be #202020.

Currently, the color scheme only respects the setting provided by operating system. The pages are using `prefers-color-scheme`, however there's no easy way to change it within web pages. I was hoping that calling something like `window.setColorScheme("dark")` to change the color scheme, but it seems like there's no way to toggle `prefers-color-scheme` from JavaScript.

---

ダークモードを Uhhyou Web Synthesizers に追加しました。

このダークモードの配色はライトモードの単なる反転です。ただし、背景色を #202020 にするために 100% ではなく 87.4% (≈ 1 - (0x20 / 0xff)) の反転になっています。

配色は OS の設定によってのみ変更できます。 `prefers-color-scheme` を使っているのですが、このメディア特性 (media feature) をページ内から変更する方法が無いようです。今後、 `window.setColorScheme("dark")` のような形で簡単に変更できるようになって欲しいところです。