Include templating for site theme

.eleventy.js

@@ -10,6 +10,9 @@ const {
 } = require("./src/filters/date.js")
 
 module.exports = config => {
+  config.watchIgnores.add("/src/scss/components/config/_palette.scss.njk");
+  config.watchIgnores.add("/src/scss/components/config/_palette.scss");
+
   config.setUseGitIgnore(false);
   config.setLibrary('md', markdownIt);
 

src/scss/components/config/_palette.scss

@@ -39,7 +39,7 @@
   --secondary-accent: hsl(172, 65%, 65%);
   --text1: hsl(22, 22%, 90%);
   --text2: hsl(20, 10%, 70%);
-  --surface1: hsl(24, 0%, 10%);
+  --surface1: hsl(0, 0%, 9%);
   --surface2: hsl(23, 0%, 15%);
   --surface3: hsl(24, 0%, 20%);
   --surface4: hsl(23, 0%, 25%);
@@ -50,20 +50,10 @@
 }
 
 
+
+
 :root {
-  @include light-theme;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    @include dark-theme;
-  }
-}
-
-[data-theme="light"] {
-  @include light-theme;
-}
-
-[data-theme="dark"] {
   @include dark-theme;
-}
+}
+
+

src/scss/components/config/_palette.scss.njk.ignore

@@ -0,0 +1,86 @@
+---
+permalink: 'src/scss/components/config/_palette.scss'
+permalinkBypassOutputDir: true
+---
+@mixin light-theme-font {
+  --font-weight-regular: 400;
+	--tracking: -0.006em;
+}
+
+@mixin dark-theme-font {
+  --font-weight-regular: 300;
+	--tracking: 0;
+}
+
+/**
+ * Palette
+ */
+ @mixin light-theme {
+  color-scheme: light;
+
+  --brand: hsl(22, 60%, 60%);
+  --brand-variant: hsl(22, 60%, 50%);
+  --primary-accent: hsl(232, 60%, 60%);
+  --secondary-accent: hsl(172, 35%, 35%);
+  --text1: hsl(22, 96%, 6%);
+  --text2: hsl(20, 10%, 30%);
+  --surface1: hsl(20, 12%, 95%);
+  --surface2: hsl(24, 10%, 90%);
+  --surface3: hsl(22, 11%, 85%);
+  --surface4: hsl(24, 10%, 80%);
+  --img-opacity: 1;
+  --shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+	
+	@include light-theme-font;
+}
+
+@mixin dark-theme {
+  color-scheme: dark;
+
+  --brand: hsl(22, 45%, 45%);
+  --brand-variant: hsl(22, 45%, 55%);
+  --primary-accent: hsl(232, 65%, 65%);
+  --secondary-accent: hsl(172, 65%, 65%);
+  --text1: hsl(22, 22%, 90%);
+  --text2: hsl(20, 10%, 70%);
+  --surface1: hsl(0, 0%, 9%);
+  --surface2: hsl(23, 0%, 15%);
+  --surface3: hsl(24, 0%, 20%);
+  --surface4: hsl(23, 0%, 25%);
+  --img-opacity: .8;
+  --shadow: 0 0 0 rgba(0, 0, 0, 0);
+
+	@include dark-theme-font;
+}
+
+{% if site.theme == "auto" %}
+:root {
+  @include light-theme;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    @include dark-theme;
+  }
+}
+
+[data-theme="light"] {
+  @include light-theme;
+}
+
+[data-theme="dark"] {
+  @include dark-theme;
+}
+{% endif %}
+
+{% if site.theme == "dark" %}
+:root {
+  @include dark-theme;
+}
+{% endif %}
+
+{% if site.theme == "light" %}
+:root {
+  @include light-theme;
+}
+{% endif %}