diff --git a/layout/sidebar/sidebar.pixy b/layout/sidebar/sidebar.pixy index e926c39b..cf1f0102 100644 --- a/layout/sidebar/sidebar.pixy +++ b/layout/sidebar/sidebar.pixy @@ -30,12 +30,11 @@ component Sidebar(user *arn.User) //- SidebarButton("Groups", "/groups", "users") //- SidebarButton("Statistics", "/statistics", "pie-chart") - .buttons - button.action(data-action="lightTheme", data-trigger="click") Light - button.action(data-action="darkTheme", data-trigger="click") Dark - .spacer + //- .theme-switcher + //- button.theme-switcher-button.action(data-action="toggleTheme", data-trigger="click") Switch theme + .sidebar-link(aria-label="Search") .sidebar-button Icon("search") @@ -48,6 +47,11 @@ component Sidebar(user *arn.User) if user.Role == "editor" SidebarButton("Editor", "/editor", "pencil") + a.sidebar-link.action(href="#", data-action="toggleTheme", data-trigger="click") + .sidebar-button + Icon("paint-brush") + span.sidebar-text Theme + SidebarButton("Help", "/thread/I3MMiOtzR", "question-circle") if user != nil diff --git a/layout/sidebar/sidebar.scarlet b/layout/sidebar/sidebar.scarlet index 8c443ee0..b9c83458 100644 --- a/layout/sidebar/sidebar.scarlet +++ b/layout/sidebar/sidebar.scarlet @@ -47,6 +47,9 @@ sidebar-spacing-y = 0.7rem .sidebar-link color text-color + :hover + cursor pointer + &.active .sidebar-button color tab-active-color @@ -62,4 +65,4 @@ sidebar-spacing-y = 0.7rem .icon font-size 1rem - margin-right 0.75rem \ No newline at end of file + margin-right 0.75rem diff --git a/scripts/Actions/Theme.ts b/scripts/Actions/Theme.ts index e0fa9e94..a4541a0a 100644 --- a/scripts/Actions/Theme.ts +++ b/scripts/Actions/Theme.ts @@ -1,5 +1,6 @@ import { AnimeNotifier } from "../AnimeNotifier" +let currentTheme = "light" let light = {} let dark = { "hue": "45", @@ -35,10 +36,18 @@ let dark = { "post-permalink-color": "var(--link-color)" } +// Toggle theme +export function toggleTheme() { + if(currentTheme === "light") { + darkTheme() + return + } + + lightTheme() +} + // Light theme export function lightTheme() { - console.log("Light") - let root = document.documentElement for(let property in light) { @@ -48,12 +57,12 @@ export function lightTheme() { root.style.setProperty(`--${property}`, light[property]) } + + currentTheme = "light" } // Dark theme export function darkTheme() { - console.log("Dark") - let root = document.documentElement for(let property in dark) { @@ -61,7 +70,12 @@ export function darkTheme() { continue } - light[property] = root.style.getPropertyValue(`--${property}`) + if(light[property] === undefined) { + light[property] = root.style.getPropertyValue(`--${property}`) + } + root.style.setProperty(`--${property}`, dark[property]) } + + currentTheme = "dark" } \ No newline at end of file diff --git a/sw/service-worker.ts b/sw/service-worker.ts index 237d67a1..4d6deee4 100644 --- a/sw/service-worker.ts +++ b/sw/service-worker.ts @@ -41,7 +41,7 @@ class MyServiceWorker { currentCSP: string constructor() { - this.cache = new MyCache("v-4") + this.cache = new MyCache("v-5") this.currentCSP = "" self.addEventListener("install", (evt: InstallEvent) => evt.waitUntil(this.onInstall(evt)))