diff --git a/src/app.css b/src/lib/main.css
similarity index 76%
rename from src/app.css
rename to src/lib/main.css
index e403cbd..889b933 100644
--- a/src/app.css
+++ b/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%;
diff --git a/src/lib/themes.css b/src/lib/themes.css
new file mode 100644
index 0000000..745ae08
--- /dev/null
+++ b/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;
+}
+*/
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f83a67a..0b86729 100644
--- a/src/routes/+layout.svelte
+++ b/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>