From 54180a1a177b9a11d8348c14a3446529b08daea7 Mon Sep 17 00:00:00 2001
From: David Luevano Alvarado <david@luevano.xyz>
Date: Sat, 27 Feb 2021 01:14:41 -0700
Subject: Tweak css and add switch for dark and light mode

---
 static/scripts/theme.js | 53 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 static/scripts/theme.js

(limited to 'static/scripts/theme.js')

diff --git a/static/scripts/theme.js b/static/scripts/theme.js
new file mode 100644
index 0000000..2ffe621
--- /dev/null
+++ b/static/scripts/theme.js
@@ -0,0 +1,53 @@
+var local_storage = window.localStorage;
+
+window.onload = () => {
+  let theme = local_storage.getItem('theme');
+  let switch_theme = document.getElementById('theme-switch');
+
+  if(theme == null){
+    local_storage.setItem('theme', 'dark');
+  }
+
+  if(theme == 'dark'){
+    switch_theme.checked = true;
+  }
+  else{
+    switch_theme.checked = false;
+
+    let theme = document.getElementById('theme-css');
+    let href = theme.getAttribute('href');
+
+    href = href.replace('dark.css', 'light.css');
+    theme.setAttribute('href', href);
+  }
+}
+
+function setTheme(){
+  let switch_theme = document.getElementById('theme-switch');
+
+  if(switch_theme.checked == true){
+    local_storage.setItem('theme', 'dark');
+  }
+  else{
+    local_storage.setItem('theme', 'light');
+  }
+}
+
+// toggles between both themes, and then calls set theme to actually set it persistently.
+function toggleTheme(){
+  let theme = document.getElementById('theme-css');
+  let href = theme.getAttribute('href');
+
+  if(href.endsWith('dark.css')){
+    href = href.replace('dark.css', 'light.css');
+  }
+  else if (href.endsWith('light.css')){
+    href = href.replace('light.css', 'dark.css');
+  }
+  else{
+    console.log('Wrong replacement.');
+  }
+
+  theme.setAttribute('href', href);
+  setTheme();
+}
-- 
cgit v1.2.3-54-g00ecf