diff --git a/src/base/index.html b/src/base/index.html
index 726dd02..d58926a 100644
--- a/src/base/index.html
+++ b/src/base/index.html
@@ -1,12 +1,15 @@
Penpot Desktop
-
+
+
diff --git a/src/base/scripts/theme.js b/src/base/scripts/theme.js
index 467645e..8ade1a2 100644
--- 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);
+ });
}
/**