Phoenix x Tailwind CSS x daisyUIでthemeChange

Phoenixのアプリを作ります。

---

次に
Tailwind CSSとdaisyUIの設定をします。

上記が公式の案内です。
@nako_9h_sleep さんの記事が詳しいです

---

さらに以下の変更を加えます。

コマンドで

cd assets
npm i theme-change

を行います。
package.jsonとpackage-lock.jsonが書き換わります。

---

さらにさらに編集を続けます。
チョ〜　楽しい！！！

hello/assets/tailwind.config.js

module.exports = {

  daisyui: {
    themes: ["light", "dark", "cupcake", "bumblebee", "emerald", "corporate", "synthwave", "retro", "cyberpunk", "valentine", "halloween", "garden", "forest", "aqua", "lofi", "pastel", "fantasy", "wireframe", "black", "luxury", "dracula", "cmyk", "autumn", "business", "acid", "lemonade", "night", "coffee", "winter"],
  },
}

assets/js/app.js

import { themeChange } from "theme-change";
console.log("themeChange")
themeChange();

lib/hello_web/templates/page/index.html.heex

<div class="container w-full">
  <div class="flex justify-center">
    <div class="badge mx-3">neutral</div>
    <div class="badge badge-primary mx-3">primary</div>
    <div class="badge badge-secondary mx-3">secondary</div>
    <div class="badge badge-accent mx-3">accent</div>
    <div class="badge badge-ghost mx-3">ghost</div>
  </div>

  <div class="flex justify-center mt-6">
  <div class="form-control">
    <select data-choose-theme class="input input-bordered">
      <%= options_for_select(theme_options(), "cupcake") %>
    </select>
  </div>
  </div>
</div>

lib/hello_web/views/page_view.ex

defmodule HelloWeb.PageView do
  use HelloWeb, :view

  def theme_options() do
    [
      "light",
      "dark",
      "cupcake",
      "bumblebee",
      "emerald",
      "corporate",
      "synthwave",
      "retro",
      "cyberpunk",
      "valentine",
      "halloween",
      "garden",
      "forest",
      "aqua",
      "lofi",
      "pastel",
      "fantasy",
      "wireframe",
      "black",
      "luxury",
      "dracula",
      "cmyk",
      "autumn",
      "business",
      "acid",
      "lemonade",
      "night",
      "coffee",
      "winter"
    ]
    |> Enum.map(fn theme -> {String.capitalize(theme) |> String.to_atom(), theme} end)
  end
end

---

できあがり。
たぶんこれでイケるとおもいます。

この通りにやって、できなかったらそれは君への宿題だ！
編集リクエストをお待ちしております。
どうぞ編集リクエストをお送りください。
そして私の承認にて、Contibution数 1を獲得してください！