Catalpa ダークモード css サンプル

Catalpa をダークモード対応にする

残念ながら Catalpa はダークモードに対応していない。
しかし、 自分で css を改造すれば、 自分のサイトをダークモード対応に出来そうです。

• css内でダークモードを判定するには

main.css
   :root {
      ここにはデフォルトの色設定があります。
   }

   これがダークモードの判定部分(古いブラウザは対応していない）  
   @media (prefers-color-scheme: dark) {
   :root {
       ここにダークモード時の色を定義すればいい
   }
   }

全部をコピーして、 下で色調整をしながら、 動作確認しました。
完全にとはいきませんが、 ほぼ大丈夫になりました。
前回は(2023-04-18)、 １か所だけ白い background-color があったのですが、 見つけましたので修正しました。(2023-04-21)

注意

古いブラウザでは対応していないし、 スマホでも駄目でした。
上の root 部分をダーク色に変更すれば、 スマホでも古いブラウザでも大丈夫でした。

サンプルダウンロード

• 私の現在の css ftl を公開して置きます。

  完全にダーク色オンリーです。
  上の理由により、 白バック用は残していませんので注意です。

サンプル css flt catalpa_darkmode.7z  
ダウンロード