次に
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を獲得してください！
