a11yist/app/javascript/controllers/theme_switcher_controller.js

28 lines
841 B
JavaScript

import { Controller } from "@hotwired/stimulus"
import Cookie from "../lib/cookies"
// Connects to data-controller="theme-switcher"
export default class extends Controller {
COOKIE_NAME = "modeTheme"
connect() {
console.log("connect switcher")
}
switch() {
const cookieValue = Cookie.get(this.COOKIE_NAME);
const newThemeValue = cookieValue == "dark" ? "light" : "dark";
Cookie.set("modeTheme", newThemeValue);
window.document.getElementsByTagName("html")[0].setAttribute("data-bs-theme", newThemeValue);
const icon = this.element.getElementsByTagName("i")[0];
if(newThemeValue == "dark") {
icon.classList.remove("bi-sun-fill")
icon.classList.add("bi-moon-stars-fill")
} else {
icon.classList.add("bi-sun-fill")
icon.classList.remove("bi-moon-stars-fill")
}
}
}