diff --git a/assets/css/colors/catpuccin.css b/assets/css/colors/catpuccin.css
new file mode 100644
index 0000000..2efb3cc
--- /dev/null
+++ b/assets/css/colors/catpuccin.css
@@ -0,0 +1,15 @@
+:root {
+    --content-primary: rgb(76, 79, 105);
+    --content-secondary: rgb(108, 111, 133);
+    --background: rgb(239, 241, 245);
+    --code-background: rgb(230, 233, 239);
+    --code-border: rgb(188, 192, 204);
+}
+
+.dark {
+    --content-primary: rgb(198, 208, 245);
+    --content-secondary: rgb(165, 173, 206);
+    --background: rgb(48, 52, 70);
+    --code-background: rgb(41, 44, 60);
+    --code-border: rgb(81, 87, 109);
+}
\ No newline at end of file
diff --git a/assets/css/colors/default.css b/assets/css/colors/default.css
new file mode 100644
index 0000000..ad820ec
--- /dev/null
+++ b/assets/css/colors/default.css
@@ -0,0 +1,15 @@
+:root {
+    --content-primary: rgb(36, 36, 36);
+    --content-secondary: rgb(117, 117, 117);
+    --background: rgb(255, 255, 255);
+    --code-background: rgb(249, 249, 249);
+    --code-border: rgb(229, 229, 229);
+}
+
+.dark {
+    --content-primary: rgb(218, 218, 218);
+    --content-secondary: rgb(140, 140, 140);
+    --background: rgb(20, 20, 20);
+    --code-background: rgb(30, 30, 30);
+    --code-border: rgb(50, 50, 50);
+}
\ No newline at end of file
diff --git a/assets/css/vars.css b/assets/css/vars.css
index e950a41..01fba59 100644
--- a/assets/css/vars.css
+++ b/assets/css/vars.css
@@ -55,21 +55,6 @@
     --table-cell-padding: .5rem;
     --table-margin-top: 1.5rem;
     --table-margin-bottom: 1.5rem;
-
-    /* Theme */
-    --content-primary: rgb(36, 36, 36);
-    --content-secondary: rgb(117, 117, 117);
-    --background: rgb(255, 255, 255);
-    --code-background: rgb(249, 249, 249);
-    --code-border: rgb(229, 229, 229);
-}
-
-.dark {
-    --content-primary: rgb(218, 218, 218);
-    --content-secondary: rgb(140, 140, 140);
-    --background: rgb(20, 20, 20);
-    --code-background: rgb(30, 30, 30);
-    --code-border: rgb(50, 50, 50);
 }
 
 @media screen and (max-width: 1024px) {
diff --git a/layouts/partials/head/css.html b/layouts/partials/head/css.html
index a5b2322..09c007b 100644
--- a/layouts/partials/head/css.html
+++ b/layouts/partials/head/css.html
@@ -1,12 +1,26 @@
-{{- $CSS := slice
+{{
+$CSS := slice
 (resources.Get "css/reset.css")
 (resources.Get "css/vars.css")
 (resources.Get "css/utils.css")
 (resources.Get "css/fonts.css")
 (resources.Get "css/main.css")
-(resources.Get "css/custom.css") |
-resources.Concat "assets/combined.css" |
-minify |
-fingerprint }}
+(resources.Get "css/custom.css")
+(resources.Get "css/colors/default.css")
+}}
 
-<link rel="stylesheet" href="{{ $CSS.RelPermalink }}" media="all">
\ No newline at end of file
+{{ with .Site.Params.colorPalette }}
+
+{{ $path := printf "css/colors/%s.css" . }}
+{{ $CSS = $CSS | append (resources.Get $path)}}
+
+{{ end }}
+
+{{
+$combined := $CSS
+| resources.Concat "assets/combined.css"
+| minify
+| fingerprint
+}}
+
+<link rel="stylesheet" href="{{ $combined.RelPermalink }}" media="all">
\ No newline at end of file