From e478745e26362afe6b561b97f43e52a9bf0cc454 Mon Sep 17 00:00:00 2001
From: prototypa <prototypearea.dev@gmail.com>
Date: Fri, 6 Jan 2023 13:10:40 -0500
Subject: [PATCH] Add support to configure dark mode.

---
 src/components/common/BasicScripts.astro | 27 +++++++++++++++++-------
 src/config.mjs                           |  1 +
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/common/BasicScripts.astro b/src/components/common/BasicScripts.astro
index 3a72bfc..22c7874 100644
--- a/src/components/common/BasicScripts.astro
+++ b/src/components/common/BasicScripts.astro
@@ -1,19 +1,27 @@
 ---
+import { SITE } from "~/config.mjs"
 ---
 
-<script is:inline>
-	// Set "light" theme as default
-	// if (!localStorage.theme) {
-	//   localStorage.theme = "light";
-	// }
+<script is:inline define:vars={{ defaultTheme: SITE.defaultTheme }}>
 
-	if (
+function applyTheme(theme) {
+		if (theme === 'dark') {
+			document.documentElement.classList.add('dark');
+		} else {
+			document.documentElement.classList.remove('dark');
+		}
+	}
+
+	if ((defaultTheme && defaultTheme.endsWith(":only")) || (!localStorage.theme && defaultTheme !== "system")) {
+		applyTheme(defaultTheme.replace(":only", ""));
+	}
+	else if (
 		localStorage.theme === 'dark' ||
 		(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
 	) {
-		document.documentElement.classList.add('dark');
+		applyTheme("dark")
 	} else {
-		document.documentElement.classList.remove('dark');
+		applyTheme("light")
 	}
 
 	function attachEvent(selector, event, fn) {
@@ -34,6 +42,9 @@
 		});
 
 		attachEvent('[data-aw-toggle-color-scheme]', 'click', function () {
+			if (defaultTheme.endsWith(":only")) {
+				return;
+			}
 			document.documentElement.classList.toggle('dark');
 			localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
 		});
diff --git a/src/config.mjs b/src/config.mjs
index 6683378..16ab126 100644
--- a/src/config.mjs
+++ b/src/config.mjs
@@ -11,6 +11,7 @@ export const SITE = {
 	description: '🚀 AstroWind is a free and ready to start template to make your website using Astro and Tailwind CSS.',
 
 	defaultImage: defaultImage,
+	defaultTheme: "system", // "system" | "light" | "dark" | "light:only" | "dark:only"
 
 	googleAnalyticsId: false, // or "G-XXXXXXXXXX",
 	googleSiteVerificationId: 'orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M',