Zenn
Open12

ライト/ダークテーマ切り替え UI の正解を見つける旅

UI/UX
UI
すばるすばる

ライトテーマ・ダークテーマの切り替えを実装するときに毎回 UI で悩むので、いろいろなサービスの UI を収集したいスクラップ

どなたでもお気軽に追加してください！（軽くテンプレに則ってくれるとめっちゃうれしい）

すばるすばる

Slack (PC)

システム設定への依存をチェックボックスで切り替える

ライト・ダークはラジオボタン式、邦訳は「テーマ」[1]

任意選択 自動選択
脚注

  1. この下には「カラー」などの配色設定も続く ↩︎

すばるすばる

Twitter (for iPhone)

トグルスイッチが 2 つ並んでいる、邦訳は「ダークモード」（ダークモードについての設定といった感じ？）

上のスイッチは人間によるトグル用で、これをするとシステム設定への依存が解除される
下のスイッチはシステム設定への依存のトグル用で、オンにするとシステム設定に同期される

上の Slack に似ているが、disabled なボタンが存在しないため直感的に操作できておもしろい

大井さかな大井さかな

Google検索

ラジオボタン式、邦訳は「外観」
クイック設定はイラスト付き。クリックするとすぐにリロードが入り反映される。
設定ページは保存ボタンを押すと反映される。

クイック設定 設定ページ
大井さかな大井さかな

Zoom (PC)

イラスト付きのラジオボタン式、選択すると即時反映。
邦訳は「テーマ」（選択肢は「白い」「黒い」「システム設定を使用」）

大井さかな大井さかな

Quora

ラジオボタン式、見た目はチェックボックス。
邦訳は「テーマ設定」、メニュー項目では「ダークモード」

大井さかな大井さかな

MUI

ボタンで切り替え式。
初期状態は自動（デバイス設定に依存）になっており、一度変更すると設定したテーマが記憶される。（自動選択には戻せなさそう）

すばるすばる

自動選択に戻せない UI は技術系のドキュメントでよく目にしますね
Docusaurus のデフォルトテーマや Chakra UI も同じ仕様だった気がします

たしかに時間で変わる必要はあんまりなさそう…