Improved theme switching

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

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
+		margin-right 0.75rem

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"
 }

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)))