From 3bc440144a388695f51562244a67acb4b1187660 Mon Sep 17 00:00:00 2001
From: Sat Naing <satnaingdev@gmail.com>
Date: Mon, 26 Sep 2022 12:04:10 +0630
Subject: [PATCH] Add primaryColorScheme feature

---
 src/layouts/Layout.astro | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 62540ae..2e7dfd6 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -62,6 +62,8 @@ const socialImageURL = new URL(
     />
 
     <script is:inline>
+      const primaryColorScheme = "none"; // "light" | "dark" | "none"
+
       const darkModeMediaQuery = window.matchMedia(
         "(prefers-color-scheme: dark)"
       ).matches;
@@ -75,7 +77,24 @@ const socialImageURL = new URL(
       if (currentTheme) {
         theme = currentTheme === "dark" ? "theme-dark" : "";
       } else {
-        theme = darkModeMediaQuery ? "theme-dark" : "";
+        // If primary color scheme is dark
+        // or primary color scheme is not set and prefers-color-scheme is dark
+        // choose dark mode
+        if (
+          primaryColorScheme === "dark" ||
+          (primaryColorScheme === "none" && darkModeMediaQuery)
+        ) {
+          theme = "theme-dark";
+        }
+        // If primary color scheme is light
+        // choose light mode
+        else if (primaryColorScheme === "light") {
+          theme = "";
+        }
+        // fallback to prefers-color-scheme
+        else {
+          theme = darkModeMediaQuery ? "theme-dark" : "";
+        }
       }
 
       // Put dark class on html tag to enable dark mode