Sha256: ce9e523851613e26910958aad1f4a948cf795b71a0967fccecc807b99ecca46a
Contents?: true
Size: 1.87 KB
Versions: 7
Compression:
Stored size: 1.87 KB
Contents
import ApplicationController from "../../../../frontend/controllers/application_controller"
import { getInitialTheme } from "../../../../frontend/utils"
/*
* Theme controller
*
* div data-controller="satis-appearance-switcher" data-action='click->satis-appearance-switcher#switch'
* i.fal.fa-sun data-satis-appearance-switcher-target="light"
* i.fal.fa-moon-stars data-satis-appearance-switcher-target="dark"
*
*/
export default class extends ApplicationController {
static targets = ["light", "dark"]
connect() {
super.connect()
const theme = getInitialTheme()
this.rawSetTheme(theme, false)
}
switch() {
const theme = getInitialTheme()
if (theme == "dark") {
this.rawSetTheme("light", true)
} else {
this.rawSetTheme("dark", true)
}
}
rawSetTheme(rawTheme, delay) {
const root = window.document.documentElement
const eventLight = new CustomEvent('theme-change', { detail: { theme: 'light' } });
const eventDark = new CustomEvent('theme-change', { detail: { theme: 'dark' } });
const isDark = rawTheme === "dark"
if (delay == true) {
this.lightTarget.classList.add("transition", "ease-in-out", "duration-1000")
this.darkTarget.classList.add("transition", "ease-in-out", "duration-1000")
}
if (isDark) {
window.dispatchEvent(eventDark);
this.lightTarget.classList.add("transform", "translate-y-7")
this.darkTarget.classList.remove("transform", "-translate-y-7")
} else {
window.dispatchEvent(eventLight);
this.lightTarget.classList.remove("transform", "translate-y-7")
this.darkTarget.classList.add("transform", "-translate-y-7")
}
localStorage.setItem("color-theme", rawTheme)
setTimeout(
() => {
root.classList.remove(isDark ? "light" : "dark")
root.classList.add(rawTheme)
},
delay ? 500 : 0
)
}
}
Version data entries
7 entries across 7 versions & 1 rubygems