Velogにダークモードを適用する

ダークモードを考慮していなかったサービスに、ダークモードを導入する話を文章にまとめました。

UXデザイナーの観点、そして開発者の観点の両方を加えて書いています。

• 技術選定

  • VelogはReactとStyled Componentsを使用中

  • Styled ComponentsのThemeProviderはJSでテーマを設定するため、システムテーマをデフォルトで表示するのには制約がある。システムテーマに追従するにはブラウザ側でJSを一度呼び出す必要があるため、デフォルトテーマを固定しないのであれば、SSRを適用したVelogには適していない。

  • CSS Variableを使えば、システムテーマをデフォルト値として使えるようにできる

  • CSS in JS環境でCSS Variableを使うために、色をJSオブジェクトで管理し、ミス防止とTypeScriptの自動補完を活用できるようユーティリティ関数を書いて使用中

• ダークモードのパレット設計の悩み

  • 背景色、テキスト色、ボーダー色、Primary、Destructiveの色を基準に色を決めた

  • 背景色は最初、1 2 3 4の明度レベルごとに整理していたが、実際のUIでは必ずしも1対1で対応しない場合があるため、例外に対応できるよう少し変更して管理

  • テキスト色を決めるときは、コントラスト比が適切か確認することが重要。WebAIMというサイトでWCAGに合格するか確認できる

  • Primary、Destructiveの色は既存の色でも暗い背景で十分なコントラストが出るが、Desaturatedな色を使うと、よりダークテーマに合う印象になる

• 色の差し替え作業

  • IDEの助けを借りて自動置換できるものは処理

  • 残りの例外的な色は実際に見ながら適切な色に設定

  • 既存の色で実装するのが不自然な場合は、その都度パレットに新しい色を追加しながら管理

  • 実際にはこの作業に最も工数がかかった

• ダークテーマのトグル機能

  • 2つのSVGにrotate、scaleのCSSトランジションを適用してトランジション効果を実装

  • ユーザーがダークテーマを切り替えると、ユーザー設定をlocalStorageとCookieに保存する

  • localStorageはCSRで、CookieはSSRで使用する

一度ダークテーマを適用してみると、ダークテーマを考慮していないUIにダークテーマを適用するのは非常に大変な作業だと感じた。今後企画するときは必ずダークテーマを考慮してデザインするつもりであり、色を使うときもgray1、gray2のような色名を使う代わりに、text1、text2のように用途別で命名したほうが後々より扱いやすいと判断した