move all theme colors to single file

routes/_components/Nav.html

@@ -39,8 +39,8 @@
 
 <style>
 	nav {
-		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-		background: royalblue;
+		border-bottom: 1px solid var(--nav-border);
+		background: var(--nav-bg);
 		position: fixed;
 		left: 0;
 		right: 0;
@@ -58,12 +58,12 @@
 	}
 
   a {
-    border-bottom: 1px solid royalblue;
+    border-bottom: 1px solid var(--nav-a-border);
   }
 
 	a.selected {
-    border-bottom: 1px solid white;
-    background: #7e93e9;
+    border-bottom: 1px solid var(--nav-a-selected-border);
+    background: var(--nav-a-selected-bg);
 	}
 
 	a {
@@ -75,27 +75,27 @@
 	}
 
   a:hover {
-    background-color: #a3b1f0;
-    border-bottom: 1px solid #a3b1f0;
+    background-color: var(--nav-a-bg-hover);
+    border-bottom: 1px solid var(--nav-a-border-hover);
   }
 
   a:hover span {
-    color: #f6f7fd;
+    color: var(--nav-text-color-hover);
   }
   a:hover svg {
-    fill: #f6f7fd;
+    fill: var(--nav-svg-fill-hover);
   }
 
 	svg {
 		width: 20px;
 		height: 20px;
 		display: inline-block;
-    fill: white;
+    fill: var(--nav-svg-fill);
 	}
 
   span {
     font-size: 16px;
-    color: white;
+    color: var(--nav-text-color);
     padding-left: 10px;
   }
 

routes/settings/add-instance.html

@@ -29,10 +29,10 @@
   }
 
   form {
-    background: #fafafa;
+    background: var(--form-bg);
     padding: 5px 10px 15px;
-    border: 1px solid #ccc;
-    margin: 0 auto;
+    margin: 20px auto;
+    border: 1px solid var(--form-border);
   }
 
   form label, form input, form button {

scss/global.scss

@@ -4,7 +4,7 @@ body {
   font-size: 14px;
   line-height: 1.2;
   color: #333;
-  background: #ebeffb;
+  background: var(--body-bg);
 }
 
 #svelte {
@@ -21,8 +21,8 @@ main {
   padding: 15px 15px;
   box-sizing: border-box;
   margin: 85px auto;
-  background: white;
-  border: 1px solid #ededed;
+  background: var(--main-bg);
+  border: 1px solid var(--main-border);
   border-radius: 1px;
 }
 
@@ -37,12 +37,12 @@ h1 {
 }
 
 a {
-  color: royalblue;
+  color: var(--anchor-text);
   text-decoration: none;
 }
 
 a:visited {
-  color: royalblue;
+  color: var(--anchor-text);
 }
 
 a:hover {
@@ -50,42 +50,40 @@ a:hover {
 }
 
 input {
-  border: 1px solid #dadada;
+  border: 1px solid var(--input-border);
   padding: 5px;
 }
 
 button {
   font-size: 1.2em;
-  background: #ededed;
+  background: var(--button-bg);
   border-radius: 2px;
   padding: 10px 15px;
-  border: 1px solid #ededed;
-}
-
-button {
+  border: 1px solid var(--button-border);
   cursor: pointer;
+  color: var(--button-text);
 }
 
 button:hover {
-  background: #ddd;
+  background: var(--button-bg-hover);
 }
 
 button:active {
-  background: #fafafa;
+  background: var(--button-bg-active);
 }
 
 button.primary {
-  border: 1px solid #1e3066;
-  background: #668cff;
-  color: white;
+  border: 1px solid var(--button-primary-border);
+  background: var(--button-primary-bg);
+  color: var(--button-primary-text);
 }
 
 button.primary:hover {
-  background: #446add;
+  background: var(--button-primary-bg-hover);
 }
 
 button.primary:active {
-  background: #99b3ff;
+  background: var(--button-primary-bg-active);
 }
 
 p, label, input {

scss/theme-default.scss

@@ -0,0 +1,34 @@
+:root {
+  --button-primary-bg: #668cff;
+  --button-primary-text: white;
+  --button-primary-border: #1e3066;
+  --button-primary-bg-active: #99b3ff;
+  --button-primary-bg-hover:  #446add;
+
+  --button-bg: #ededed;
+  --button-text: #333;
+  --button-border: #ededed;
+  --button-bg-active: #fafafa;
+  --button-bg-hover: #ddd;
+
+  --input-border: #dadada;
+  --anchor-text: royalblue;
+  --main-bg: white;
+  --body-bg: #ebeffb;
+  --main-border: #ededed;
+
+  --form-bg: #fafafa;
+  --form-border: #ccc;
+
+  --nav-bg: royalblue;
+  --nav-border: #3a5eca;
+  --nav-a-border: royalblue;
+  --nav-a-selected-border: white;
+  --nav-a-selected-bg: #7e93e9;
+  --nav-a-bg-hover: #a3b1f0;
+  --nav-a-border-hover: #a3b1f0;
+  --nav-text-color-hover: #f6f7fd;
+  --nav-svg-fill-hover: #f6f7fd;
+  --nav-svg-fill: white;
+  --nav-text-color: white;
+}

templates/2xx.html

@@ -5,6 +5,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<meta name='theme-color' content='#4169e1'>
 
+	<link rel='stylesheet' href='/theme-default.css'>
 	<link rel='stylesheet' href='/global.css'>
 	<link rel='manifest' href='/manifest.json'>
 	<link rel='icon' type='image/png' href='/favicon.png'>