From a83a4fd20810f9dd63edd7c1556adb393f77828f Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Thu, 16 Nov 2017 14:57:49 +0100
Subject: [PATCH] Added dark theme

---
 layout/sidebar/sidebar.pixy |  4 +++
 scripts/Actions.ts          |  3 +-
 scripts/Actions/Theme.ts    | 67 +++++++++++++++++++++++++++++++++++++
 3 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 scripts/Actions/Theme.ts

diff --git a/layout/sidebar/sidebar.pixy b/layout/sidebar/sidebar.pixy
index e17373cc..e926c39b 100644
--- a/layout/sidebar/sidebar.pixy
+++ b/layout/sidebar/sidebar.pixy
@@ -30,6 +30,10 @@ 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
 
 		.sidebar-link(aria-label="Search")
diff --git a/scripts/Actions.ts b/scripts/Actions.ts
index 32e4aeb7..e33e0eb9 100644
--- a/scripts/Actions.ts
+++ b/scripts/Actions.ts
@@ -13,4 +13,5 @@ export * from "./Actions/Search"
 export * from "./Actions/Serialization"
 export * from "./Actions/Shop"
 export * from "./Actions/SideBar"
-export * from "./Actions/StatusMessage"
\ No newline at end of file
+export * from "./Actions/StatusMessage"
+export * from "./Actions/Theme"
\ No newline at end of file
diff --git a/scripts/Actions/Theme.ts b/scripts/Actions/Theme.ts
new file mode 100644
index 00000000..e0fa9e94
--- /dev/null
+++ b/scripts/Actions/Theme.ts
@@ -0,0 +1,67 @@
+import { AnimeNotifier } from "../AnimeNotifier"
+
+let light = {}
+let dark = {
+	"hue": "45",
+	"saturation": "100%",
+
+	"text-color": "hsl(0, 0%, 90%)",
+	"bg-color": "hsl(0, 0%, 24%)",
+	"link-color": "hsl(var(--hue), var(--saturation), 66%)",
+	"link-hover-color": "hsl(var(--hue), var(--saturation), 76%)",
+	"link-hover-text-shadow": "0 0 8px hsla(var(--hue), var(--saturation), 66%, 0.5)",
+	"ui-background": "hsla(0, 0%, 8%, 0.3)",
+	"sidebar-background": "rgba(0, 0, 0, 0.2)",
+	"sidebar-opaque-background": "var(--ui-background)",
+	"table-row-hover-background": "hsla(0, 0%, 100%, 0.01)",
+
+	"theme-white": "var(--bg-color)",
+	"theme-black": "var(--text-color)",
+
+	"main-color": "var(--link-color)",
+	"link-active-color": "var(--link-hover-color)",
+	"button-hover-color": "var(--link-hover-color)",
+	"button-hover-background": "hsla(0, 0%, 12%, 0.5)",
+	"tab-background": "hsla(0, 0%, 0%, 0.1)",
+	"tab-hover-background": "hsla(0, 0%, 0%, 0.2)",
+	"tab-active-color": "hsl(0, 0%, 95%)",
+	"tab-active-background": "hsla(0, 0%, 2%, 0.5)",
+	"loading-anim-color": "var(--link-color)",
+	"anime-alternative-title-color": "hsla(0, 0%, 100%, 0.5)",
+	"anime-list-item-name-color": "var(--text-color)",
+
+	"post-like-color": "var(--link-color)",
+	"post-unlike-color": "var(--link-color)",
+	"post-permalink-color": "var(--link-color)"
+}
+
+// Light theme
+export function lightTheme() {
+	console.log("Light")
+
+	let root = document.documentElement
+
+	for(let property in light) {
+		if(!light.hasOwnProperty(property)) {
+			continue
+		}
+
+		root.style.setProperty(`--${property}`, light[property])
+	}
+}
+
+// Dark theme
+export function darkTheme() {
+	console.log("Dark")
+
+	let root = document.documentElement
+
+	for(let property in dark) {
+		if(!dark.hasOwnProperty(property)) {
+			continue
+		}
+
+		light[property] = root.style.getPropertyValue(`--${property}`)
+		root.style.setProperty(`--${property}`, dark[property])
+	}
+}
\ No newline at end of file