diff --git a/app/assets/tailwind/application.css b/app/assets/tailwind/application.css index f1d8c73..72a8b41 100644 --- a/app/assets/tailwind/application.css +++ b/app/assets/tailwind/application.css @@ -1 +1,11 @@ @import "tailwindcss"; + +/* Enable class-based dark mode */ +@custom-variant dark (&:where(.dark, .dark *)); + +/* Smooth theme transitions */ +@layer base { + html { + @apply transition-colors duration-200; + } +} diff --git a/app/javascript/controllers/theme_controller.js b/app/javascript/controllers/theme_controller.js new file mode 100644 index 0000000..c4ed55c --- /dev/null +++ b/app/javascript/controllers/theme_controller.js @@ -0,0 +1,76 @@ +import { Controller } from "@hotwired/stimulus" + +// Theme controller for dark mode with light/dark/system options +// Persists user preference in localStorage and respects system preferences +export default class extends Controller { + static targets = ["lightIcon", "darkIcon", "systemIcon"] + static values = { theme: { type: String, default: "system" } } + + connect() { + // Load saved theme or default to system + this.themeValue = localStorage.getItem("theme") || "system" + this.applyTheme() + + // Listen for system preference changes + this.mediaQuery = window.matchMedia("(prefers-color-scheme: dark)") + this.handleSystemChange = this.handleSystemChange.bind(this) + this.mediaQuery.addEventListener("change", this.handleSystemChange) + } + + disconnect() { + this.mediaQuery.removeEventListener("change", this.handleSystemChange) + } + + handleSystemChange(event) { + if (this.themeValue === "system") { + this.applyTheme() + } + } + + setLight() { + this.themeValue = "light" + this.saveAndApply() + } + + setDark() { + this.themeValue = "dark" + this.saveAndApply() + } + + setSystem() { + this.themeValue = "system" + this.saveAndApply() + } + + toggle() { + const themes = ["light", "dark", "system"] + const currentIndex = themes.indexOf(this.themeValue) + this.themeValue = themes[(currentIndex + 1) % themes.length] + this.saveAndApply() + } + + saveAndApply() { + localStorage.setItem("theme", this.themeValue) + this.applyTheme() + } + + applyTheme() { + const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches + const isDark = this.themeValue === "dark" || (this.themeValue === "system" && prefersDark) + + document.documentElement.classList.toggle("dark", isDark) + this.updateIcons() + } + + updateIcons() { + if (this.hasLightIconTarget) { + this.lightIconTarget.classList.toggle("hidden", this.themeValue !== "light") + } + if (this.hasDarkIconTarget) { + this.darkIconTarget.classList.toggle("hidden", this.themeValue !== "dark") + } + if (this.hasSystemIconTarget) { + this.systemIconTarget.classList.toggle("hidden", this.themeValue !== "system") + } + } +} diff --git a/app/views/home/_counter.html.erb b/app/views/home/_counter.html.erb index e3e8a38..82463ed 100644 --- a/app/views/home/_counter.html.erb +++ b/app/views/home/_counter.html.erb @@ -1,8 +1,8 @@ -
-
+
+
<%= counter.value %>
-
+
clicks recorded
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb index 43d0b52..738c847 100644 --- a/app/views/home/index.html.erb +++ b/app/views/home/index.html.erb @@ -1,13 +1,13 @@ <%= turbo_stream_from "counter" %> -
+
-

Hello, World!

-

Rails 8 Full Stack Demo

+

Hello, World!

+

Rails 8 Full Stack Demo

<% if notice %> -

+

<%= notice %>

<% end %> @@ -18,54 +18,54 @@ <%= render "counter", counter: @counter %> <%= button_to "Click Me", increment_path, method: :post, - class: "w-full bg-red-600 hover:bg-red-700 text-white font-semibold py-4 px-8 rounded-lg text-lg transition-colors cursor-pointer" %> + class: "w-full bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white font-semibold py-4 px-8 rounded-lg text-lg transition-colors cursor-pointer" %>
-
+
🐘
-
PostgreSQL
-
Stores the counter value
+
PostgreSQL
+
Stores the counter value
-
+
⚡
-
Redis
-
Queues the increment job
+
Redis
+
Queues the increment job
- +
👷
-
Sidekiq
-
Processes job after 2s delay
+
Sidekiq
+
Processes job after 2s delay
-
→
+
→
 -
+
📡
-
ActionCable
-
Pushes live updates via WebSocket
+
ActionCable
+
Pushes live updates via WebSocket
-
🏓
-
API Test
-
Click to test
+
API Test
+
Click to test
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 384746d..9a71385 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,5 +1,5 @@ - + Preview Rails @@ -9,9 +9,48 @@ <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %> <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_importmap_tags %> + - + + +
+
+ + + +
+
+ <%= yield %>