From 1625f36ba4bc4b99653e432e385f9656e4d33bce Mon Sep 17 00:00:00 2001
From: TheThomaas <thethomaas@protonmail.ch>
Date: Fri, 23 Jun 2023 21:10:38 +0200
Subject: [PATCH] Include templating for site theme

---
 .eleventy.js                                  |  3 +
 src/scss/components/config/_palette.scss      | 22 ++---
 .../config/_palette.scss.njk.ignore           | 86 +++++++++++++++++++
 3 files changed, 95 insertions(+), 16 deletions(-)
 create mode 100644 src/scss/components/config/_palette.scss.njk.ignore

diff --git a/.eleventy.js b/.eleventy.js
index 24ff558..84c27b8 100644
--- a/.eleventy.js
+++ b/.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);
 
diff --git a/src/scss/components/config/_palette.scss b/src/scss/components/config/_palette.scss
index 60adbd6..251ce13 100644
--- a/src/scss/components/config/_palette.scss
+++ b/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;
-}
\ No newline at end of file
+}
+
+
diff --git a/src/scss/components/config/_palette.scss.njk.ignore b/src/scss/components/config/_palette.scss.njk.ignore
new file mode 100644
index 0000000..632d15a
--- /dev/null
+++ b/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 %}
\ No newline at end of file