diff --git a/site/sass/index.scss b/site/sass/index.scss
index e4f238f..9272b71 100644
--- a/site/sass/index.scss
+++ b/site/sass/index.scss
@@ -1,24 +1,11 @@
+@import "./themes/pinkle.scss";
+
 body {
   font-family: sans-serif;
   margin: 0;
   background-color: var(--bg-color);
   color: var(--text-color);
   height: 100vh;
-
-  --bg-color: #eee;
-  --text-color: black;
-  --accent-color: #b520e7;
-  --accent-text-color: var(--bg-color);
-  --accent-color-neutral: #aaa;
-  --accent-text-color-neutral: #eee;
-
-  @media (prefers-color-scheme: dark) {
-    --bg-color: #333;
-    --text-color: #ccc;
-    --accent-text-color: black;
-    --accent-color-neutral: #555;
-    --accent-text-color-neutral: #bbb;
-  }
 }
 
 header.main-header {
diff --git a/site/sass/themes/basic.scss b/site/sass/themes/basic.scss
new file mode 100644
index 0000000..9895941
--- /dev/null
+++ b/site/sass/themes/basic.scss
@@ -0,0 +1,16 @@
+body {
+  --bg-color: #eee;
+  --text-color: black;
+  --accent-color: #b520e7;
+  --accent-text-color: var(--bg-color);
+  --accent-color-neutral: #aaa;
+  --accent-text-color-neutral: #eee;
+
+  @media (prefers-color-scheme: dark) {
+    --bg-color: #333;
+    --text-color: #ccc;
+    --accent-text-color: black;
+    --accent-color-neutral: #555;
+    --accent-text-color-neutral: #bbb;
+  }
+}
diff --git a/site/sass/themes/pinkle.scss b/site/sass/themes/pinkle.scss
new file mode 100644
index 0000000..86237a7
--- /dev/null
+++ b/site/sass/themes/pinkle.scss
@@ -0,0 +1,16 @@
+body {
+  --bg-color: rgb(255, 196, 252);
+  --text-color: black;
+  --accent-color: rgb(197, 48, 197);
+  --accent-text-color: white;
+  --accent-color-neutral: var(--accent-color);
+  --accent-text-color-neutral: var(--accent-text-color);
+
+  @media (prefers-color-scheme: dark) {
+    --bg-color: #333;
+    --text-color: #ccc;
+    --accent-text-color: black;
+    --accent-color-neutral: #555;
+    --accent-text-color-neutral: #bbb;
+  }
+}