feat: option to control whether site visitors can change the theme color (#28)

* chore: rebase onto main branch

* fix: rename the option

---------

Co-authored-by: saicaca <zephyird@gmail.com>

src/components/ConfigCarrier.astro

@@ -4,5 +4,5 @@ import {siteConfig} from "../config";
 
 ---
 
-<div id="config-carrier" data-hue={siteConfig.themeHue}>
+<div id="config-carrier" data-hue={siteConfig.themeColor.hue}>
 </div>

src/components/Navbar.astro

@@ -47,9 +47,11 @@ let links: NavBarLink[] = navBarConfig.links.map((item: NavBarLink | LinkPreset)
             <Icon slot="arrow-icon" name="fa6-solid:chevron-right" size={"0.75rem"} class="transition translate-x-0.5 my-auto text-[var(--primary)]"></Icon>
             <Icon slot="search-switch" name="material-symbols:search" size={"1.25rem"}></Icon>
         </Search>
-        <button aria-label="Display Settings" class="btn-plain h-11 w-11 rounded-lg active:scale-90" id="display-settings-switch">
+        {!siteConfig.themeColor.fixed && (
-            <Icon name="material-symbols:palette-outline" size={"1.25rem"}></Icon>
+            <button aria-label="Display Settings" class="btn-plain h-11 w-11 rounded-lg active:scale-90" id="display-settings-switch">
-        </button>
+                <Icon name="material-symbols:palette-outline" size={"1.25rem"}></Icon>
+            </button>
+        )}
         <LightDarkSwitch client:load></LightDarkSwitch>
         <button aria-label="Menu" name="Nav Menu" class="btn-plain w-11 h-11 rounded-lg active:scale-90 md:hidden" id="nav-menu-switch">
             <Icon name="material-symbols:menu-rounded" size={"1.25rem"}></Icon>
@@ -83,10 +85,12 @@ function loadButtonScript() {
     });
 
     let settingBtn = document.getElementById("display-settings-switch");
-    settingBtn.addEventListener("click", function () {
+    if (settingBtn) {
-        let settingPanel = document.getElementById("display-setting");
+        settingBtn.addEventListener("click", function () {
-        settingPanel.classList.toggle("float-panel-closed");
+            let settingPanel = document.getElementById("display-setting");
-    });
+            settingPanel.classList.toggle("float-panel-closed");
+        });
+    }
 
     let menuBtn = document.getElementById("nav-menu-switch");
     menuBtn.addEventListener("click", function () {

src/config.ts

@@ -10,7 +10,10 @@ export const siteConfig: SiteConfig = {
   title: 'Fuwari',
   subtitle: 'Demo Site',
   lang: 'en',
-  themeHue: 250,
+  themeColor: {
+    hue: 250,         // Default hue for the theme color, from 0 to 360. e.g. red: 0, teal: 200, cyan: 250, pink: 345
+    fixed: false,     // Hide the theme color picker for visitors
+  },
   banner: {
     enable: false,
     src: 'assets/images/demo-banner.png',

src/layouts/Layout.astro

@@ -49,7 +49,7 @@ const myFade = {
 
 // defines global css variables
 // why doing this in Layout instead of GlobalStyles: https://github.com/withastro/astro/issues/6728#issuecomment-1502203757
-const configHue = siteConfig.themeHue;
+const configHue = siteConfig.themeColor.hue;
 if (!banner || typeof banner !== 'string' || banner.trim() === '') {
 	banner = siteConfig.banner.src;
 }

src/types/config.ts

@@ -4,7 +4,10 @@ export type SiteConfig = {
 
   lang: string
 
-  themeHue: number
+  themeColor: {
+    hue: number
+    fixed: boolean
+  }
   banner: {
     enable: boolean
     src: string