Closed4

daysiUI導入時にダークモードを無効化するには

もなこもなこ

起きていた問題:
個人開発のwebアプリ(daysiUI導入済)で、デフォルトでダークモードが反映されるようになっており、背景色と文字色が一体化して見えないということが起きていた。

実現したいこと:
ダークモードを無効化して、常に同じ見た目になるようになるようにしたい。

結論:
tailwind.config.jsに以下コード追加

module.exports = {
  daisyui: {
    darkTheme: false,
  },
}
もなこもなこ

ダークモードとは?

ダークモードとは、スマホの画面やアプリの画面を黒基調にするモードのことで、暗い場所で見やすくなったり、バッテリーの消費を抑えたりできる機能です。

スマホの画面を黒基調や、グレー、セピアなどの彩度が低いカラーパターンにする

ダークモードにすると暗い場所で画面が見やすくなるほか、有機ELディスプレイを搭載しているスマホではバッテリー消費を節約できる効果があるとされています。

・ダークモードはスマホの機能
・一部のアプリでは独自のダークモードが設定され、選べるようになっている
・ダークモードと夜間モード(night shift)は異なる
https://network.mobile.rakuten.co.jp/sumakatsu/contents/articles/2024/00119/

もなこもなこ

・ダークモードはスマホ側で設定されているので、アプリに適用されたくない場合はアプリ側で無効化する必要がある。
・daysiUIでは「テーマ」をカスタマイズすることで設定できる

このスクラップは2024/08/28にクローズされました