parameterize colors of theme

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;
 	}
 }

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;

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;
 	}
 }
 

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>

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>