Move themes to separate CSS file

src/lib/main.css

@@ -34,25 +34,6 @@
   font-style: normal;
 }
 
-/* COLOR VARS */
-:root {
-  --main-bg-color: #404c55;
-  --second-bg-color: #2b343c; /* Use as first arg in radial gradient */
-  --accent-color: #007979;
-  --overlay-color: #3c6f79de;
-  --overlay-color-solid: #3c6f79;
-  --main-text-color: #00b7b7;
-  --second-text-color: #0afdfd;
-  --note-text-color: #9de7ff;
-  --link-color: azure;
-  --box-border-color: ;
-  --link-visited-color: azure;
-  --main-alert-color: #ed6d00;
-  --second-alert-color: #e77f00; /* Use as second arg in radial gradient */
-  --main-warning-color: orange;
-  --board-name-color: #fcfc09;
-}
-
 html {
   width: 100%;
   height: 100%;

src/lib/themes.css

@@ -0,0 +1,56 @@
+/* OLD THEME */
+:root {
+    --main-bg-color: #404c55;
+    --second-bg-color: #2b343c; /* Use as first arg in radial gradient */
+    --accent-color: #007979;
+    --overlay-color: #3c6f79de;
+    --overlay-color-solid: #3c6f79;
+    --main-text-color: #00b7b7;
+    --second-text-color: #0afdfd;
+    --note-text-color: #9de7ff;
+    --link-color: azure;
+    --box-border-color: ;
+    --link-visited-color: azure;
+    --main-alert-color: #ed6d00;
+    --second-alert-color: #e77f00; /* Use as second arg in radial gradient */
+    --main-warning-color: orange;
+    --board-name-color: #fcfc09;
+}
+
+/* Main Theme
+:root {
+    --main-bg-color: #404c55;
+    --second-bg-color: #2b343c;
+    --accent-color: #007979;
+    --island-color: #3c6f79de;
+    --main-heading-color: #00b7b7;
+    --main-text-color: #0afdfd;
+    --note-text-color: #9de7ff;
+    --link-color: azure;
+    --box-border-color: rgba(0,0,0,0.19);
+    --link-visited-color: azure;
+    --main-alert-color: #ed6d00;
+    --second-alert-color: #e77f00;
+    --main-warning-color: orange;
+    --board-name-color: #fcfc09;
+}
+*/
+/*
+Christmas Theme
+{
+    --main-bg-color: #404c55;
+    --second-bg-color: #2b343c;
+    --accent-color: #007979;
+    --island-color: #3c6f79de;
+    --main-heading-color: #00b7b7;
+    --main-text-color: #0afdfd;
+    --note-text-color: #9de7ff;
+    --link-color: azure;
+    --box-border-color: rgba(0,0,0,0.19);
+    --link-visited-color: azure;
+    --main-alert-color: #ed6d00;
+    --second-alert-color: #e77f00;
+    --main-warning-color: orange;
+    --board-name-color: #fcfc09;
+}
+*/

src/routes/+layout.svelte

@@ -1,5 +1,6 @@
 <script>
-  import '../app.css';
+  import '$lib/themes.css';
+  import '$lib/main.css';
   import { dev } from '$app/environment';
   import DevBanner from '$lib/DevBanner.svelte';
 </script>