feat: add theme support to shoelace ui

author-more · Jan 5, 2025 · 35d2a09 · 35d2a09
1 parent 1dc7666
commit 35d2a09
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/src/base/index.html b/src/base/index.html
@@ -1,12 +1,15 @@
 <html>
 	<head>
 		<title>Penpot Desktop</title>
-		<link rel="stylesheet" href="./styles/index.css" />
+		<link
+			rel="stylesheet"
+			href="../../node_modules/@shoelace-style/shoelace/cdn/themes/light.css"
+		/>
 		<link
 			rel="stylesheet"
 			href="../../node_modules/@shoelace-style/shoelace/cdn/themes/dark.css"
-			onload="document.documentElement.classList.add('sl-theme-dark')"
 		/>
+		<link rel="stylesheet" href="./styles/index.css" />
 		<script src="./scripts/main.js" type="module"></script>
 	</head>
 	<body>

diff --git a/src/base/scripts/theme.js b/src/base/scripts/theme.js
@@ -13,6 +13,10 @@ export const THEME_TAB_EVENTS = Object.freeze({
 	REQUEST_UPDATE: "theme-request-update",
 	UPDATE: "theme-update",
 });
+const THEME_MEDIA = Object.freeze({
+	LIGHT: "(prefers-color-scheme: light)",
+	DARK: "(prefers-color-scheme: dark)",
+});
 
 /** @type {ThemeSetting | null} */
 let currentThemeSetting = null;
@@ -27,6 +31,35 @@ export function initTheme() {
 	}
 
 	prepareForm(currentThemeSetting);
+	syncThemeClass();
+}
+
+function syncThemeClass() {
+	/**
+	 * @function
+	 * @param {MediaQueryListEvent} arg0
+	 */
+	const mediaMatchListener = ({ matches, media }) => {
+		if (!matches) {
+			return;
+		}
+
+		if (media === THEME_MEDIA.LIGHT) {
+			document.documentElement.classList.remove("sl-theme-dark");
+			document.documentElement.classList.add("sl-theme-light");
+			return;
+		}
+
+		if (media === THEME_MEDIA.DARK) {
+			document.documentElement.classList.remove("sl-theme-light");
+			document.documentElement.classList.add("sl-theme-dark");
+		}
+	};
+
+	Object.values(THEME_MEDIA).forEach((media) => {
+		const match = matchMedia(media);
+		match.addEventListener("change", mediaMatchListener);
+	});
 }
 
 /**