style: customize the color palletes

also makes the theme togglable for maximum accesiblity

config.toml

@@ -20,7 +20,7 @@ highlight_code = true
 highlight_theme = "ayu-light"
 
 [extra]
-theme = "auto"
+theme = "toggle"
 socials = [
   { name = "rss", url = "/atom.xml", icon = "rss" },
   { name = "github", url = "https://github.com/nrdxp", icon = "github" },
@@ -39,5 +39,6 @@ repo_view = true
 repo_url = "https://github.com/nrdxp/nrd.sh/tree/main/content/"
 favicon = "/icon/favicon.png"
 stylesheets = [
-  "fira.css"
+  "fira.css",
+  "colors.css"
 ]

sass/colors.scss

@@ -0,0 +1,40 @@
+$bg-0: #212A37;
+
+$bg-1: lighten($bg-0, 5%);
+$bg-2: lighten($bg-1, 10%);
+
+:root.dark {
+  --meta-color: #92A3A0;
+
+  --bg-0: #{$bg-0};
+  --bg-1: #{$bg-1};
+  --bg-2: #{$bg-2};
+
+  --text-0: #EFEBEA;
+
+  --primary-color: #BD7A52;
+}
+
+.meta {
+  color: var(--meta-color);
+}
+time {
+  color: var(--meta-color);
+}
+
+$bg-0-light: #F5F4F2;
+
+$bg-1-light: darken($bg-0-light, 2%);
+$bg-2-light: darken($bg-1-light, 8%);
+
+:root.light {
+  --meta-color: #5A6160;
+
+  --bg-0: #{$bg-0-light};
+  --bg-1: #{$bg-1-light};
+  --bg-2: #{$bg-2-light};
+
+  --text-0: #2A2624;
+
+  --primary-color: #BD7A52;
+}