ダークモードは Alius デザインシステムにおけるファーストクラスシチズンであり、後付けではありません。多くの Alius ユーザーは、長時間の作業セッションでダークインターフェースを好む開発者、エンジニア、研究者です。ダークモードデザインは意図的で快適、かつ完全な情報階層を維持する必要があります。
コア原則
ダークモードは単純な色の反転ではない。ライトテーマを反転させると、高コントラストで読みにくい結果になります。代わりに、ダークテーマはライトテーマと同じ構造的関係を維持しながら、独自のカラーバリューで独立して設計されています。
背景レベル
ダークモードでは少なくとも3つの背景レベルを定義：
- ベース背景： 最も深いレイヤー — ページのキャンバス
- エレベーテッド背景： ベースの上に配置されるカード、パネル、コンテナ
- オーバーレイ背景： エレベーテッド面の上にあるモーダル、ドロー、要素
ルール：
- 背景はダークグレーであり、純黒（#000000）ではない
- 各レベルは視覚的に区別可能だが、劇的に異なるべきではない
- レベル間のステップは自然に感じられるべきで、唐突ではない
テキストレベル
少なくとも4つのテキストレベルを定義：
- プライマリテキスト： 背景に対して高コントラスト — メインの読み取りカラー
- セカンダリテキスト： やや控えめ — 説明、メタデータ、タイムスタンプ用
- ターシャリテキスト： さらに控えめ — プレースホルダー、ヒント、無効テキスト用
- 反転テキスト： 明るいテキストを必要とするダーク面上で使用（例：ブランドカラー背景上）
ルール：
- プライマリテキストは背景に対して WCAG AA コントラスト要件を満たす必要がある
- 本文に純白（#FFFFFF）を避ける — まぶしさを減らすためにやや柔らかい白を使用
- ライトテーマと同じ階層関係を維持
ボーダーレベル
- ダークモードのボーダーは控えめなダークグレーを使用
- ボーダーは可視だが目立たない — 装飾ではなく構造を定義
- アクティブボーダー（フォーカスされた入力、選択された項目）はブランドカラーまたは明るいニュートラルを使用
ブランドカラーのダーク適応
- ブランドカラーはダーク背景に合わせて微調整が必要な場合がある
- ブランドカラーがダーク面に対してコントラスト要件を満たすことを確認
- ブランドカラーがダーク背景上のテキストに使用される場合、可読性を検証
- ボタンとアクセントに使用されるブランドカラーは両モードで同等に鮮やかに感じられるべき
コードブロックのダークスタイル
- コードブロックはページ背景とは異なる明確な背景を使用
- シンタックスハイライトカラーはダーク背景向けに再調整が必要 — ライトテーマのシンタックスカラーは暗すぎる
- キーワード、文字列、コメント、変数、型の明確な区別を維持
- 行番号は控えめだが読み取り可能
テーブルのダークスタイル
- ヘッダー行はデータ行とは異なる背景を持つべき
- 交互行カラー（ゼブラストライプ）は非常に控えめな背景差を使用
- テーブルボーダーは標準ダークモードボーダールールに従う
- 行のホバー状態は可視だが明るすぎない
チャートのダークスタイル
- チャート背景はページまたはカードの背景に一致
- グリッド線と軸ラベルは控えめなカラーを使用
- データシリーズカラーはダーク背景向けに再調整が必要
- 凡例と注釈は可読性を維持
一般ガイドライン
- 長時間の読み取りに快適 — これが主要ユースケース
- テックユーザーフレンドリー — ダークモードはメディアプレーヤーではなく開発者ツールのように感じるべき
- 過度に明るいまたは蛍光色の回避 — エレクトリックブルー、ネオングリーン、ホットピンクのアクセントを避ける
- 明確な情報階層を維持 — ダークモードはビジュアル構造を平坦化してはならない
- すべてのインタラクティブ状態（ホバー、アクティブ、フォーカス、無効）は明確に区別可能である必要がある
- 画像とイラストはダーク背景に自然に溶け込むよう適応または透過を使用