kaze 1.3.1 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 634436bd289b2a1cd2dfbab0a0f0ae2e4c4490d26cc5e6b4156ad382471eccf4
-  data.tar.gz: 1467cca2c81b4af1579a576f1e204c119e7220db5e08405fa0c15585545e07b7
+  metadata.gz: cc7bad365960dce77e78e930ea414a8bdcf3d03887393200bfde19a7c0299fe4
+  data.tar.gz: 7f3a5dffd4210452b1a3da62604e1d4b060c9659b9d596c10778db420b5fc034
 SHA512:
-  metadata.gz: 52a79402f90898407a6f4a450e64fbbf19bb4980e5d5ce5fa452debafff0029226de9da94c220074a59412834b76f94554b282d721d0eba2624ad65472252f27
-  data.tar.gz: 1b42a36de58fdc0ab68c45fae9b797900affe91097899c17710a4e3dea23fd95c56ccbf278225f714c4d49a3e2125ef1b080e895593b79337c564e9a742e2b5e
+  metadata.gz: cc6441a4bae8a2e94d4662a00d2c4dc302cfe9b425b15f112f7c9fdb1d0cf218d860fdcf503bf2d5f4bb92e66b0bf1b7cccf517b663606a2535a48a8a53d0853
+  data.tar.gz: ed22d4a753d6a7acdc48d59ca3ef0c76838129a467811ca52c608db891e9c9ecde792ebb37765bed82a635837ce51498dca10607da8a3ddf76374aef7b4bf986

data/CHANGELOG.md

@@ -6,6 +6,24 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [1.4.0] - 2026-10-21
+
+### Added
+
+- An appearance preference — light, dark or system — on the profile page of all three stacks ([#26](https://github.com/cuonggt/kaze/pull/26)). The stubs already carried 315 `dark:` classes, but nothing could reach them: `dark:` followed `prefers-color-scheme`, so an application took whatever the operating system said. The choice is stored in `localStorage`, and system follows the device and tracks it live.
+
+  Each stylesheet now redefines the variant, since Tailwind v4 no longer configures dark mode in JavaScript:
+
+  ```css
+  @custom-variant dark (&:where(.dark, .dark *));
+  ```
+
+  The layouts apply the resulting `dark` class in an inline `<head>` script before first paint, so the page never flashes the wrong theme. A consequence worth knowing: the theme now depends on JavaScript, so with scripting disabled an application always renders light where it previously followed the operating system.
+
+### Fixed
+
+- Dark mode gaps that were already broken for anyone whose operating system was set to dark, and which the preference control made obvious. React's `AuthenticatedLayout` carried one `dark:` class where Vue's had fifteen, leaving a white navigation bar and header above a dark page; the missing variants are ported from the Vue layout. Four wrappers lacked `dark:bg-gray-900`, leaving a light grey page behind dark cards — hotwire's application layout, React's `AuthenticatedLayout` and `GuestLayout`, and the Inertia ERB wrappers for both stacks.
+
 ## [1.3.1] - 2026-10-21
 
 ### Changed
@@ -108,7 +126,8 @@ Together these take a freshly scaffolded Inertia application from seven npm advi
 
 Releases before 1.0.0 are not catalogued here. See the [tags](https://github.com/cuonggt/kaze/tags) for their history.
 
-[Unreleased]: https://github.com/cuonggt/kaze/compare/v1.3.1...HEAD
+[Unreleased]: https://github.com/cuonggt/kaze/compare/v1.4.0...HEAD
+[1.4.0]: https://github.com/cuonggt/kaze/compare/v1.3.1...v1.4.0
 [1.3.1]: https://github.com/cuonggt/kaze/compare/v1.3.0...v1.3.1
 [1.3.0]: https://github.com/cuonggt/kaze/compare/v1.2.1...v1.3.0
 [1.2.1]: https://github.com/cuonggt/kaze/compare/v1.2.0...v1.2.1

data/lib/kaze/version.rb

@@ -1,3 +1,3 @@
 module Kaze
-  VERSION = '1.3.1'
+  VERSION = '1.4.0'
 end

data/stubs/hotwire/app/assets/tailwind/application.css

@@ -1,5 +1,10 @@
 @import "tailwindcss";
 
+/* Drive `dark:` from a `dark` class rather than prefers-color-scheme, so the
+   appearance preference can override the operating system. The layouts apply
+   the class before first paint. */
+@custom-variant dark (&:where(.dark, .dark *));
+
 @plugin "@tailwindcss/forms";
 
 @source "../../../public/*.html";

data/stubs/hotwire/app/views/layouts/_appearance.html.erb

@@ -0,0 +1,18 @@
+<%# Applies the stored appearance before first paint, so the page never flashes
+    the wrong theme. Also exposed as window.applyAppearance so the preference
+    control can re-apply it after a change. %>
+<%= javascript_tag nonce: true do %>
+  window.applyAppearance = function () {
+    var preference = localStorage.getItem('appearance') || 'system'
+    var dark = preference === 'dark' ||
+      (preference === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+
+    document.documentElement.classList.toggle('dark', dark)
+  }
+
+  window.applyAppearance()
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
+    window.applyAppearance()
+  })
+<% end %>

data/stubs/hotwire/app/views/layouts/application.html.erb

@@ -8,12 +8,13 @@
     <%= csp_meta_tag %>
     <%= stylesheet_link_tag "tailwind", "data-turbo-track": Rails.env.production? ? "reload" : "" %>
     <%= stylesheet_link_tag "application", "data-turbo-track": Rails.env.production? ? "reload" : "" %>
+    <%= render "layouts/appearance" %>
     <%= javascript_importmap_tags %>
     <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
     <%= yield :head %>
   </head>
   <body class="font-sans antialiased">
-    <div class="min-h-screen bg-gray-100">
+    <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
       <%= render "layouts/navigation" %>
       <!-- Page Heading -->
       <% if content_for?(:header) %>

data/stubs/hotwire/app/views/layouts/guest.html.erb

@@ -8,6 +8,7 @@
     <%= csp_meta_tag %>
     <%= stylesheet_link_tag "tailwind", "data-turbo-track": Rails.env.production? ? "reload" : "" %>
     <%= stylesheet_link_tag "application", "data-turbo-track": Rails.env.production? ? "reload" : "" %>
+    <%= render "layouts/appearance" %>
     <%= javascript_importmap_tags %>
     <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
   </head>

data/stubs/hotwire/app/views/profile/edit.html.erb

@@ -5,6 +5,11 @@
 <% end %>
 <div class="py-12">
   <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
+    <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
+      <div class="max-w-xl">
+        <%= render "profile/partials/update_appearance_form" %>
+      </div>
+    </div>
     <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
       <div class="max-w-xl">
         <%= render "profile/partials/update_profile_information_form" %>

data/stubs/hotwire/app/views/profile/partials/_update_appearance_form.html.erb

@@ -0,0 +1,39 @@
+<section
+  x-data="{
+    preference: localStorage.getItem('appearance') || 'system',
+    select(value) {
+      this.preference = value
+      localStorage.setItem('appearance', value)
+      window.applyAppearance()
+    }
+  }"
+>
+  <header>
+    <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+      Appearance
+    </h2>
+
+    <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+      Choose how the application looks to you. System follows your device setting.
+    </p>
+  </header>
+
+  <div class="mt-6 inline-flex rounded-lg bg-gray-100 p-1 dark:bg-gray-900">
+    <template x-for="option in [
+      { value: 'light', label: 'Light' },
+      { value: 'dark', label: 'Dark' },
+      { value: 'system', label: 'System' }
+    ]" :key="option.value">
+      <button
+        type="button"
+        @click="select(option.value)"
+        :aria-pressed="preference === option.value"
+        class="rounded-md px-4 py-1.5 text-sm font-medium transition focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
+        :class="preference === option.value
+          ? 'bg-white text-gray-900 shadow-xs dark:bg-gray-700 dark:text-gray-100'
+          : 'text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'"
+        x-text="option.label"
+      ></button>
+    </template>
+  </div>
+</section>

data/stubs/hotwire/app/views/welcome/index.html.erb

@@ -8,6 +8,7 @@
     <%= csp_meta_tag %>
     <%= stylesheet_link_tag "tailwind", "data-turbo-track": Rails.env.production? ? "reload" : "" %>
     <%= stylesheet_link_tag "application", "data-turbo-track": Rails.env.production? ? "reload" : "" %>
+    <%= render "layouts/appearance" %>
     <%= javascript_importmap_tags %>
     <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
   </head>

data/stubs/inertia-react-ts/app/assets/tailwind/application.css

@@ -1,5 +1,10 @@
 @import "tailwindcss";
 
+/* Drive `dark:` from a `dark` class rather than prefers-color-scheme, so the
+   appearance preference can override the operating system. The layouts apply
+   the class before first paint. */
+@custom-variant dark (&:where(.dark, .dark *));
+
 @plugin "@tailwindcss/forms";
 
 @source "../../../public/*.html";

data/stubs/inertia-react-ts/app/javascript/Layouts/AuthenticatedLayout.tsx

@@ -14,14 +14,14 @@ export default function AuthenticatedLayout({ header, children }: PropsWithChild
   const { pathname = '' } = typeof window !== 'undefined' ? window.location : {}
 
   return (
-    <div className="min-h-screen bg-gray-100">
-      <nav className="bg-white border-b border-gray-100">
+    <div className="min-h-screen bg-gray-100 dark:bg-gray-900">
+      <nav className="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-700">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between h-16">
             <div className="flex">
               <div className="shrink-0 flex items-center">
                 <Link href="/">
-                  <ApplicationLogo className="block h-9 w-auto fill-current text-red-800" />
+                  <ApplicationLogo className="block h-9 w-auto fill-current text-red-800 dark:text-red-200" />
                 </Link>
               </div>
 
@@ -39,7 +39,7 @@ export default function AuthenticatedLayout({ header, children }: PropsWithChild
                     <span className="inline-flex rounded-md">
                       <button
                         type="button"
-                        className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-hidden transition ease-in-out duration-150"
+                        className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-hidden transition ease-in-out duration-150"
                       >
                         {user.name}
 
@@ -72,7 +72,7 @@ export default function AuthenticatedLayout({ header, children }: PropsWithChild
             <div className="-me-2 flex items-center sm:hidden">
               <button
                 onClick={() => setShowingNavigationDropdown((previousState) => !previousState)}
-                className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
+                className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-hidden focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out"
               >
                 <svg className="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                   <path
@@ -102,9 +102,9 @@ export default function AuthenticatedLayout({ header, children }: PropsWithChild
             </ResponsiveNavLink>
           </div>
 
-          <div className="pt-4 pb-1 border-t border-gray-200">
+          <div className="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
             <div className="px-4">
-              <div className="font-medium text-base text-gray-800">{user.name}</div>
+              <div className="font-medium text-base text-gray-800 dark:text-gray-200">{user.name}</div>
               <div className="font-medium text-sm text-gray-500">{user.email}</div>
             </div>
 
@@ -119,7 +119,7 @@ export default function AuthenticatedLayout({ header, children }: PropsWithChild
       </nav>
 
       {header && (
-        <header className="bg-white shadow-sm">
+        <header className="bg-white dark:bg-gray-800 shadow-sm">
           <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">{header}</div>
         </header>
       )}

data/stubs/inertia-react-ts/app/javascript/Layouts/GuestLayout.tsx

@@ -4,7 +4,7 @@ import { PropsWithChildren } from 'react'
 
 export default function GuestLayout({ children }: PropsWithChildren) {
   return (
-    <div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
+    <div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-gray-900">
       <div>
         <Link href="/">
           <ApplicationLogo className="w-20 h-20 fill-current text-red-500" />

data/stubs/inertia-react-ts/app/javascript/Pages/Profile/Edit.tsx

@@ -1,5 +1,6 @@
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'
 import DeleteUserForm from './Partials/DeleteUserForm'
+import UpdateAppearanceForm from './Partials/UpdateAppearanceForm'
 import UpdatePasswordForm from './Partials/UpdatePasswordForm'
 import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm'
 import { Head } from '@inertiajs/react'
@@ -14,6 +15,10 @@ export default function Edit({ mustVerifyEmail, status }: PageProps<{ mustVerify
 
       <div className="py-12">
         <div className="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
+          <div className="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
+            <UpdateAppearanceForm className="max-w-xl" />
+          </div>
+
           <div className="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
             <UpdateProfileInformationForm mustVerifyEmail={mustVerifyEmail} status={status} className="max-w-xl" />
           </div>

data/stubs/inertia-react-ts/app/javascript/Pages/Profile/Partials/UpdateAppearanceForm.tsx

@@ -0,0 +1,47 @@
+import { useState } from 'react'
+import { Appearance, getAppearance, setAppearance } from '@/lib/appearance'
+
+const options: { value: Appearance; label: string }[] = [
+  { value: 'light', label: 'Light' },
+  { value: 'dark', label: 'Dark' },
+  { value: 'system', label: 'System' },
+]
+
+export default function UpdateAppearanceForm({ className = '' }: { className?: string }) {
+  const [appearance, setCurrentAppearance] = useState<Appearance>(getAppearance)
+
+  const select = (value: Appearance) => {
+    setCurrentAppearance(value)
+    setAppearance(value)
+  }
+
+  return (
+    <section className={className}>
+      <header>
+        <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100">Appearance</h2>
+
+        <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
+          Choose how the application looks to you. System follows your device setting.
+        </p>
+      </header>
+
+      <div className="mt-6 inline-flex rounded-lg bg-gray-100 p-1 dark:bg-gray-900">
+        {options.map((option) => (
+          <button
+            key={option.value}
+            type="button"
+            onClick={() => select(option.value)}
+            aria-pressed={appearance === option.value}
+            className={`rounded-md px-4 py-1.5 text-sm font-medium transition focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 ${
+              appearance === option.value
+                ? 'bg-white text-gray-900 shadow-xs dark:bg-gray-700 dark:text-gray-100'
+                : 'text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'
+            }`}
+          >
+            {option.label}
+          </button>
+        ))}
+      </div>
+    </section>
+  )
+}

data/stubs/inertia-react-ts/app/javascript/lib/appearance.ts

@@ -0,0 +1,23 @@
+export type Appearance = 'light' | 'dark' | 'system'
+
+const STORAGE_KEY = 'appearance'
+
+export function getAppearance(): Appearance {
+  const stored = localStorage.getItem(STORAGE_KEY)
+
+  return stored === 'light' || stored === 'dark' ? stored : 'system'
+}
+
+export function applyAppearance(appearance: Appearance = getAppearance()): void {
+  const dark =
+    appearance === 'dark' ||
+    (appearance === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+
+  document.documentElement.classList.toggle('dark', dark)
+}
+
+export function setAppearance(appearance: Appearance): void {
+  localStorage.setItem(STORAGE_KEY, appearance)
+
+  applyAppearance(appearance)
+}

data/stubs/inertia-react-ts/app/views/layouts/application.html.erb

@@ -6,12 +6,30 @@
     <title><%= content_for(:title) || "Rails" %></title>
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
+    <%# Apply the stored appearance before first paint, so the page never flashes the wrong theme. %>
+    <%= javascript_tag nonce: true do %>
+      (function () {
+        var preference = localStorage.getItem('appearance') || 'system'
+        var query = window.matchMedia('(prefers-color-scheme: dark)')
+
+        document.documentElement.classList.toggle(
+          'dark',
+          preference === 'dark' || (preference === 'system' && query.matches)
+        )
+
+        query.addEventListener('change', function () {
+          if ((localStorage.getItem('appearance') || 'system') === 'system') {
+            document.documentElement.classList.toggle('dark', query.matches)
+          }
+        })
+      })()
+    <% end %>
     <%= vite_client_tag %>
     <%= vite_react_refresh_tag %>
     <%= vite_typescript_tag 'application.tsx', defer: true %>
   </head>
   <body class="font-sans antialiased">
-    <div class="min-h-screen bg-gray-100">
+    <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
       <%= yield %>
     </div>
   </body>

data/stubs/inertia-vue-ts/app/assets/tailwind/application.css

@@ -1,5 +1,10 @@
 @import "tailwindcss";
 
+/* Drive `dark:` from a `dark` class rather than prefers-color-scheme, so the
+   appearance preference can override the operating system. The layouts apply
+   the class before first paint. */
+@custom-variant dark (&:where(.dark, .dark *));
+
 @plugin "@tailwindcss/forms";
 
 @source "../../../public/*.html";

data/stubs/inertia-vue-ts/app/javascript/Pages/Profile/Edit.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
 import DeleteUserForm from './Partials/DeleteUserForm.vue'
+import UpdateAppearanceForm from './Partials/UpdateAppearanceForm.vue'
 import UpdatePasswordForm from './Partials/UpdatePasswordForm.vue'
 import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm.vue'
 import { Head } from '@inertiajs/vue3'
@@ -21,6 +22,10 @@ defineProps<{
 
     <div class="py-12">
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
+        <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
+          <UpdateAppearanceForm class="max-w-xl" />
+        </div>
+
         <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
           <UpdateProfileInformationForm :must-verify-email="mustVerifyEmail" :status="status" class="max-w-xl" />
         </div>

data/stubs/inertia-vue-ts/app/javascript/Pages/Profile/Partials/UpdateAppearanceForm.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { getAppearance, setAppearance, type Appearance } from '@/lib/appearance'
+
+const options: { value: Appearance; label: string }[] = [
+  { value: 'light', label: 'Light' },
+  { value: 'dark', label: 'Dark' },
+  { value: 'system', label: 'System' },
+]
+
+const appearance = ref<Appearance>(getAppearance())
+
+const select = (value: Appearance) => {
+  appearance.value = value
+  setAppearance(value)
+}
+</script>
+
+<template>
+  <section>
+    <header>
+      <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Appearance</h2>
+
+      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+        Choose how the application looks to you. System follows your device setting.
+      </p>
+    </header>
+
+    <div class="mt-6 inline-flex rounded-lg bg-gray-100 p-1 dark:bg-gray-900">
+      <button
+        v-for="option in options"
+        :key="option.value"
+        type="button"
+        :aria-pressed="appearance === option.value"
+        class="rounded-md px-4 py-1.5 text-sm font-medium transition focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
+        :class="
+          appearance === option.value
+            ? 'bg-white text-gray-900 shadow-xs dark:bg-gray-700 dark:text-gray-100'
+            : 'text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'
+        "
+        @click="select(option.value)"
+      >
+        {{ option.label }}
+      </button>
+    </div>
+  </section>
+</template>

data/stubs/inertia-vue-ts/app/javascript/lib/appearance.ts

@@ -0,0 +1,23 @@
+export type Appearance = 'light' | 'dark' | 'system'
+
+const STORAGE_KEY = 'appearance'
+
+export function getAppearance(): Appearance {
+  const stored = localStorage.getItem(STORAGE_KEY)
+
+  return stored === 'light' || stored === 'dark' ? stored : 'system'
+}
+
+export function applyAppearance(appearance: Appearance = getAppearance()): void {
+  const dark =
+    appearance === 'dark' ||
+    (appearance === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+
+  document.documentElement.classList.toggle('dark', dark)
+}
+
+export function setAppearance(appearance: Appearance): void {
+  localStorage.setItem(STORAGE_KEY, appearance)
+
+  applyAppearance(appearance)
+}

data/stubs/inertia-vue-ts/app/views/layouts/application.html.erb

@@ -6,11 +6,29 @@
     <title><%= content_for(:title) || "Rails" %></title>
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
+    <%# Apply the stored appearance before first paint, so the page never flashes the wrong theme. %>
+    <%= javascript_tag nonce: true do %>
+      (function () {
+        var preference = localStorage.getItem('appearance') || 'system'
+        var query = window.matchMedia('(prefers-color-scheme: dark)')
+
+        document.documentElement.classList.toggle(
+          'dark',
+          preference === 'dark' || (preference === 'system' && query.matches)
+        )
+
+        query.addEventListener('change', function () {
+          if ((localStorage.getItem('appearance') || 'system') === 'system') {
+            document.documentElement.classList.toggle('dark', query.matches)
+          }
+        })
+      })()
+    <% end %>
     <%= vite_client_tag %>
     <%= vite_typescript_tag 'application.ts', defer: true %>
   </head>
   <body class="font-sans antialiased">
-    <div class="min-h-screen bg-gray-100">
+    <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
       <%= yield %>
     </div>
   </body>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: kaze
 version: !ruby/object:Gem::Version
-  version: 1.3.1
+  version: 1.4.0
 platform: ruby
 authors:
 - Cuong Giang
@@ -147,6 +147,7 @@ files:
 - stubs/hotwire/app/views/auth/reset_password.html.erb
 - stubs/hotwire/app/views/auth/verify_email.html.erb
 - stubs/hotwire/app/views/dashboard/index.html.erb
+- stubs/hotwire/app/views/layouts/_appearance.html.erb
 - stubs/hotwire/app/views/layouts/_navigation.html.erb
 - stubs/hotwire/app/views/layouts/application.html.erb
 - stubs/hotwire/app/views/layouts/guest.html.erb
@@ -154,6 +155,7 @@ files:
 - stubs/hotwire/app/views/profile/edit.html.erb
 - stubs/hotwire/app/views/profile/partials/_confirm_user_deletion_modal.html.erb
 - stubs/hotwire/app/views/profile/partials/_delete_user_form.html.erb
+- stubs/hotwire/app/views/profile/partials/_update_appearance_form.html.erb
 - stubs/hotwire/app/views/profile/partials/_update_password_form.html.erb
 - stubs/hotwire/app/views/profile/partials/_update_profile_information_form.html.erb
 - stubs/hotwire/app/views/welcome/index.html.erb
@@ -203,11 +205,13 @@ files:
 - stubs/inertia-react-ts/app/javascript/Pages/Dashboard.tsx
 - stubs/inertia-react-ts/app/javascript/Pages/Profile/Edit.tsx
 - stubs/inertia-react-ts/app/javascript/Pages/Profile/Partials/DeleteUserForm.tsx
+- stubs/inertia-react-ts/app/javascript/Pages/Profile/Partials/UpdateAppearanceForm.tsx
 - stubs/inertia-react-ts/app/javascript/Pages/Profile/Partials/UpdatePasswordForm.tsx
 - stubs/inertia-react-ts/app/javascript/Pages/Profile/Partials/UpdateProfileInformationForm.tsx
 - stubs/inertia-react-ts/app/javascript/Pages/Welcome.tsx
 - stubs/inertia-react-ts/app/javascript/entrypoints/application.tsx
 - stubs/inertia-react-ts/app/javascript/entrypoints/bootstrap.ts
+- stubs/inertia-react-ts/app/javascript/lib/appearance.ts
 - stubs/inertia-react-ts/app/javascript/types/global.d.ts
 - stubs/inertia-react-ts/app/javascript/types/index.d.ts
 - stubs/inertia-react-ts/app/javascript/types/vite-env.d.ts
@@ -239,11 +243,13 @@ files:
 - stubs/inertia-vue-ts/app/javascript/Pages/Dashboard.vue
 - stubs/inertia-vue-ts/app/javascript/Pages/Profile/Edit.vue
 - stubs/inertia-vue-ts/app/javascript/Pages/Profile/Partials/DeleteUserForm.vue
+- stubs/inertia-vue-ts/app/javascript/Pages/Profile/Partials/UpdateAppearanceForm.vue
 - stubs/inertia-vue-ts/app/javascript/Pages/Profile/Partials/UpdatePasswordForm.vue
 - stubs/inertia-vue-ts/app/javascript/Pages/Profile/Partials/UpdateProfileInformationForm.vue
 - stubs/inertia-vue-ts/app/javascript/Pages/Welcome.vue
 - stubs/inertia-vue-ts/app/javascript/entrypoints/application.ts
 - stubs/inertia-vue-ts/app/javascript/entrypoints/bootstrap.ts
+- stubs/inertia-vue-ts/app/javascript/lib/appearance.ts
 - stubs/inertia-vue-ts/app/javascript/types/global.d.ts
 - stubs/inertia-vue-ts/app/javascript/types/index.d.ts
 - stubs/inertia-vue-ts/app/javascript/types/vite-env.d.ts