こぴぺったり

ダーク / ライトテーマ

こぴぺったりのダーク・ライトテーマ切り替え機能、CSS 変数ベースの実装、リロード時のフラッシュを防ぐ仕組みを解説します。

「こぴぺったり」はダーク / ライトの 2 テーマに対応しています。設定はブラウザに保存され、次回起動時にも維持されます。リロード時に画面が一瞬白く光るような フラッシュ問題 を回避する実装になっており、ダークテーマを使っている方でも快適に使えます。

テーマの切り替え

右上の ≡ メニュー を開くと、上部にテーマ切り替えのトグルがあります。タップすると即座に画面全体のテーマが切り替わります。

切り替え後は localStorage の clipapp_theme キーに "dark" または "light" が保存され、次回起動時にも復元されます。

それぞれの特徴

ダーク (デフォルト)

ライト

システム連動 (OS 設定追従)

現バージョンでは 手動切替のみ で、OS のダークモード設定 (prefers-color-scheme) には連動していません。これは「こぴぺったりでは OS と違うテーマを使いたい」というユーザーが一定数いることを考慮した設計です。

将来「OS に従う」という第3のオプションを追加する可能性はありますが、現時点では明示的選択を優先しています。

フラッシュなしの仕組み (技術メモ)

ライトテーマで保存しているのに、起動時にダーク背景が一瞬表示されてからライトに切り替わる ── このフラッシュ問題は、テーマシステムを CSS だけで実現しているサイトでよく発生します。

「こぴぺったり」では、index.html の <head> 内、React がマウントされる前のスクリプトでテーマ判定と class 付与を行うことで、初回ペイントの段階から正しいテーマで描画されるようにしています。

<script>
  (function () {
    try {
      var t = localStorage.getItem("clipapp_theme");
      if (t === "light") document.documentElement.classList.add("theme-light");
    } catch (e) {}
  })();
</script>

このスクリプトは:

  1. localStorage から保存テーマを読む
  2. ライトなら <html> に theme-light クラスを付与
  3. CSS は :root の変数値と html.theme-light の変数値を切り替える

という流れで、JavaScript のロード前に実行されるため、フラッシュが発生しません。

CSS 変数ベースのテーマシステム

こぴぺったりは CSS 変数 (Custom Properties) を使ってテーマを定義しています。

:root {
  --bg: #0e1116;
  --fg: #e8eef7;
  --accent: #5cd9d9;
}
html.theme-light {
  --bg: #fbfcfe;
  --fg: #16202d;
  --accent: #0f8e8e;
}

各コンポーネントの CSS は var(--bg) のように変数を参照するだけです。新しいテーマ (例: セピア、ハイコントラスト) を将来追加する場合も、html.theme-sepia のような class を増やして変数値を上書きするだけで済みます。

アクセシビリティに関する補足

関連ページ