Bruno Canepa
49 lines
1.5 KiB
JavaScript
49 lines
1.5 KiB
JavaScript
import { Controller } from "@hotwired/stimulus"
|
|
|
|
export default class extends Controller {
|
|
static targets = ["sunIcon", "moonIcon"]
|
|
|
|
connect() {
|
|
this.applyStoredTheme()
|
|
this.updateIcon()
|
|
}
|
|
|
|
toggle() {
|
|
const currentTheme = document.documentElement.getAttribute("data-theme")
|
|
// If no theme is set, check system preference or default to light
|
|
let newTheme
|
|
if (!currentTheme) {
|
|
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
newTheme = prefersDark ? "light" : "dark"
|
|
} else {
|
|
newTheme = currentTheme === "dark" ? "light" : "dark"
|
|
}
|
|
this.setTheme(newTheme)
|
|
this.updateIcon()
|
|
}
|
|
|
|
setTheme(theme) {
|
|
document.documentElement.setAttribute("data-theme", theme)
|
|
localStorage.setItem("theme", theme)
|
|
}
|
|
|
|
applyStoredTheme() {
|
|
const storedTheme = localStorage.getItem("theme")
|
|
if (storedTheme) {
|
|
document.documentElement.setAttribute("data-theme", storedTheme)
|
|
}
|
|
}
|
|
|
|
updateIcon() {
|
|
const currentTheme = document.documentElement.getAttribute("data-theme")
|
|
const isDark = currentTheme === "dark" ||
|
|
(!currentTheme && window.matchMedia("(prefers-color-scheme: dark)").matches)
|
|
|
|
// Show moon icon in light mode, sun icon in dark mode
|
|
if (this.hasSunIconTarget && this.hasMoonIconTarget) {
|
|
this.sunIconTarget.style.display = isDark ? "block" : "none"
|
|
this.moonIconTarget.style.display = isDark ? "none" : "block"
|
|
}
|
|
}
|
|
}
|