こなさんみんばんわ。
今日はちょっとしたお知らせです。前置きはそこそこに本題に突入したいと思います。
System Color Viewer
そんな訳で System Color Viewer というのを公開しました。
これは何?
簡単にいうと、システムカラーを確認するやつです。そのまんまやないか。涙
CSS では <system-color> というのが 17 色規定されていますが、普段の Web 制作のスタイルシートでシステムカラーを指定する機会というのはあまりないので、使おうとしてもそれぞれのキーワードが何色になるのかちょっとイメージつかないとか、それ以前にそもそもどんなキーワードがあるかすら思い出せない…ってなりがちです。また、同じキーワードでもブラウザごとに使われる色が微妙に違ったりもします。
なので、それぞれのシステムカラー・キーワードを CSS で実際に指定すると何色になるのか、一覧でざっと見られるものがあったらいいなと思い、簡単な一枚もののページを作ってローカル保存したのを使ってたんですが、次第に欲が出てきて、開発者ツールを開かなくてもカラーモードの切り替えができる機能とかを付け足してるうちにそれなりのツールっぽくなってきたので、試しに公開してみることにした次第です。
使い方
まぁユーザーが触れる UI がラジオボタン以外になくて、それすら何をするものかは見れば分かると思うので説明するまでもないとは思うんですが、とりあえず簡単に箇条書きで。
- メインセクションは各システムカラー・キーワードと、そのキーワードの現在のカラースキームにおける色サンプル、および対応する色コードをセットにしたものの一覧表（リスト）です
- リストの上にはカラースキームの切り替え用 UI があり、初期状態はシステムまたはブラウザにて設定されるカラーテーマに沿ったものとなります
- Light または Dark を選択するとカラースキームがそのモードで上書きされ、同時に色サンプルと色コードがアップデートされます。元（システム設定）に戻すには System を選択します
- 強制カラーモードでの配色確認はこのツールだけでは行えません。System を選択した状態でブラウザ (Chrome or Edge1) の開発者ツールを使い、
forced-colorsのプルダウンをactiveに切り替えることで強制カラーモードのエミュレーションができます- ただしこの場合は JavaScript を使用しないので、色サンプルは即時に更新されますが色コードは変更されません。更新するには開発者ツールを開いたままページのリロードを行うか、一度 Light や Dark に切り替えた後に戻すなどしてください
こんな感じですかね。あと強制カラーモードでの確認について、OS が Windows の場合は OS のカラー設定をハイコントラストにすることでも確認できると思います…が、僕は Windows マシンを持ってないので、実際に動作するかは一度もチェックできていません😭 という訳で、もし「できへんぞ!」という場合にはご報告いただけますと幸いです。方法はメールフォーム・Twitter（今は X というらしいが俺は認めてない）・マストドン (mastodos.com) あたりにて。
そんな訳で
System Color Viewer という各システムカラー・キーワードが何色になるかを一覧で見渡せるツールを作ったので、よかったら使ってねというお知らせでした。「使ってね」といいつつ、一覧で見渡せる以外に何の役に立つかは自分でもあまりよく分からんのですが😇 まぁ何かの時にはきっとあってよかったと思えるはず（適当）ですので、なにとぞ。
ていうか Google Chrome2 が AccentColor, AccentColorText にまだ対応してないというのが、今回の意外な気付き。