WordPressのテーマ作成の備忘録③

実のところ、既に同じ構成で作ってあるのだけれど、
いろいろ思うところがあって作り直すことにした。
まず前バージョンで実装していなかったダークモード対応を入れたい。

Tailwind CSSとAlpine.jsが組み込まれているので、
そちらで組んでいく。

まずは
Tailwind CSS にダークモードの設定を追加。
helpでいうとここ。
バージョン違うけど。

tailwindcss.com

tailwind/tailwind.config.js

module.exports = {
  darkMode: 'class', //ここを追加
}

これでprefixのdarkが有効に。
ダークモードの制御用のコードを作成

テンプレに埋め込むこともできるけど、
モジュール化しておく。

script/darkmode.js

export default () => ({
  dark: false,
  isDark() {
    return this.dark;
  },
  toggle() {
    this.dark = !this.dark;
    this.setMode();
  },
  setMode() {
    localStorage.setItem('dark', this.dark);
  },
  mounted() {
    this.dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (localStorage.getItem('dark') !== null) {
      this.dark = JSON.parse(localStorage.getItem('dark'));
    }
  },
})

ここにきてLaravel Mixが使われていない事に気付く。
Javascriptをどう処理するか悩む。
でも悩み続けるのも嫌だなぁ。
Tailwind CSSのバージョンもまだ2系統だし
Underscoresに仕込んだ方が楽な気もしてる。

さてどうしようか。