From b11e22bef6201804cfb2351799fc726d659e4ee6 Mon Sep 17 00:00:00 2001
From: Alexander Avery <alex.avery@beetbox.io>
Date: Sun, 1 Sep 2024 16:31:45 -0400
Subject: [PATCH] parameterize colors of theme

---
 assets/sass/code.scss        |  2 +-
 assets/sass/colors.scss      | 16 ++++++++++------
 assets/sass/main.scss        |  4 ++--
 layouts/_default/baseof.html | 14 +++++++++++++-
 layouts/partials/header.html |  2 +-
 5 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/assets/sass/code.scss b/assets/sass/code.scss
index 32a0a8d..660b1e6 100644
--- a/assets/sass/code.scss
+++ b/assets/sass/code.scss
@@ -26,6 +26,6 @@ pre {
 		white-space: pre;
 		max-width: 100%;
 		overflow-x: auto;
-		border-left: .3rem solid $beetbox-purple;
+		border-left: .3rem solid $code-edge;
 	}
 }
diff --git a/assets/sass/colors.scss b/assets/sass/colors.scss
index 906f6ba..1feadad 100644
--- a/assets/sass/colors.scss
+++ b/assets/sass/colors.scss
@@ -1,6 +1,4 @@
-$background-color: #1f2835;
-$font-color: #f8f8ff;
-$top-bar: #f8f8ffcc;
+@import "hugo:vars";
 
 $beetbox-red: #9e0008;
 $beetbox-pink: #d93370;
@@ -8,6 +6,12 @@ $beetbox-purple: #ac65cb;
 $beetbox-green: #003f56;
 $beetbox-blue: #5fcfd0;
 
-$dark: #111;
-$visited-link: #e4cdef;
-
+// Default colors are defined within layouts/_default/baseof.html.
+// To pick your own colors, place variables in your site config under params.styles
+$background-color: $background-color;
+$font-color: $font-color;
+$top-bar: $top-bar;
+$dark: $dark;
+$link-color: $link-color;
+$link-color-visited: $link-color-visited;
+$code-edge: $code-edge;
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 7d44222..ec748c4 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -56,10 +56,10 @@ header {
 }
 
 a {
-	color: $beetbox-blue;
+	color: $link-color;
 
 	&:visited, &:hover {
-		color: $visited-link;
+		color: $link-color-visited;
 	}
 }
 
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 721fb3e..b055fa8 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -19,7 +19,19 @@
             <meta name="description" content="{{ delimit . "," }}">
         {{- end }}
 
-    	{{ $style := resources.Get "/sass/main.scss" | resources.ToCSS -}}
+        {{ $defaultColors := dict
+            "background_color" "#1f2835"
+            "font_color" "#f8f8ff"
+            "top_bar" "#f8f8ffcc"
+            "dark" "#111"
+            "link_color" "#5fcfd0"
+            "link_color_visited" "#e4cdef"
+            "code_edge" "#ac65cb"
+        }}
+
+        {{ $opts := dict "vars" (default $defaultColors site.Params.styles) }}
+
+    	{{ $style := resources.Get "/sass/main.scss" | resources.ToCSS $opts -}}
     	<link rel="stylesheet" href="{{ $style.Permalink }}">
 
     	<title>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 966de5d..1798069 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,6 +1,6 @@
 <header>
 	<nav class="spread">
-		<a href="/"><img src="/images/logo.svg" alt="The {{ .Site.Title }} Logo"></a>
+		<a href="/"><img src="{{ .Site.Params.logo }}" alt="The {{ .Site.Title }} Logo"></a>
 		<ul class="spread">
 			<li><a href="https://gitea.beetbox.io/BeetBox" title="Gitea Repositories">Gitea</a></li>
 			<li><a href="https://odysee.com/@BeetBox:f" title="Odysee Channel">Odysee</a></li>