Improved theme switching

This commit is contained in:
Eduard Urbach 2017-11-16 15:15:35 +01:00
parent a83a4fd208
commit eb822e6418
4 changed files with 32 additions and 11 deletions

View File

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

View File

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

View File

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

View File

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