theme

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

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

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);
 }

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');
 }