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 @@
+
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