Tweak css and add switch for dark and light mode

2 files changed, 54 insertions, 1 deletions

diff --git a/static/scripts/gb.js b/static/scripts/gb.js
index 4051d7f..67afe20 100644
--- a/static/scripts/gb.js
+++ b/static/scripts/gb.js
@@ -41,7 +41,7 @@ $(document).ready(function (){
 	$('#btn_down').click(function (){
 		input(3);
 	});
-	
+
 	$('#btn_a').click(function (){
 		input(4);
 	});
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();
+}