From c2d24a5f700fd8f0b9f5ea09a9baba22d6fa788f Mon Sep 17 00:00:00 2001
From: AUnicornWithNoLife <benjamin.barratt@icloud.com>
Date: Wed, 14 Apr 2021 13:55:27 +0100
Subject: [PATCH] theme

---
 src/index.html |  1 +
 src/style.css  | 16 ++++++++++++----
 src/theme.js   | 15 +++++++++------
 src/var.js     | 10 ++++++++++
 4 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/index.html b/src/index.html
index 59c5002..5988c8c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,6 +7,7 @@
 
     <script src='./code.js'></script>
     <script src='./var.js'></script>
+    <script src='./theme.js'></script>
 
     <link rel="preconnect" href="https://fonts.gstatic.com"> 
     <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
diff --git a/src/style.css b/src/style.css
index 6c37459..b0bd99d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,3 +1,11 @@
+:root
+{
+    --theme-back: #000000;
+    --theme-object: #000000;
+    --theme-highlight: #000000;
+    --theme-text: #000000;
+}
+
 #board tr
 {
     height: 100px;
@@ -16,14 +24,14 @@
 
 *
 {
-    color: white;
+    color: var(--theme-text);
 
     font-family: 'Roboto', sans-serif;
 }
 
 body
 {
-    background-color: #231F20;
+    background-color: var(--theme-back);
 }
 
 button
@@ -38,12 +46,12 @@ button
     font-size: xx-large;
     font-style: bold;
 
-    background-color: #ec5020;
+    background-color: var(--theme-object);
 }
 
 button:hover
 {
-    background-color: #fa6d42;
+    background-color: var(--theme-highlight);
 }
 
 #reset
diff --git a/src/theme.js b/src/theme.js
index 2f2cec8..dbf946a 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -9,12 +9,15 @@ class theme
     }
 }
 
-function setTheme(name)
-{
-
-}
-
 const themes = 
 {
-    'orange': theme('#231F20', '#ec5020', '#fa6d42', '#ffffff')
+    'orange': new theme('#231F20', '#ec5020', '#fa6d42', '#ffffff')
+}
+
+function setTheme(name)
+{
+    root.style.setProperty('--theme-back', themes[name].back);
+    root.style.setProperty('--theme-object', themes[name].object);
+    root.style.setProperty('--theme-highlight', themes[name].highlight);
+    root.style.setProperty('--theme-text', themes[name].text);
 }
\ No newline at end of file
diff --git a/src/var.js b/src/var.js
index 4558877..27815d6 100644
--- a/src/var.js
+++ b/src/var.js
@@ -5,6 +5,7 @@ var ids;
 var ptm;
 var tabloid;
 var gamemode;
+var root;
 
 function load()
 {
@@ -59,4 +60,13 @@ function load()
     tabloid = document.getElementById('board');
 
     gamemode = 1;
+
+    root = document.documentElement;
+
+    setup();
+}
+
+function setup()
+{
+    setTheme('orange');
 }
\ No newline at end of file