From 33cc9d8520af7ea0e19a0a3bf5a9361a57067459 Mon Sep 17 00:00:00 2001
From: Belar <belar@belardesign.com>
Date: Sun, 5 Jan 2025 11:13:17 +0000
Subject: [PATCH 1/2] feat: add settings side bar

---
 src/base/components/controls.html |  30 +++++--
 src/base/components/settings.html |  67 ++++++----------
 src/base/components/tabs.html     |   2 +-
 src/base/components/titlebar.html |  30 -------
 src/base/scripts/instance.js      |  46 ++++++-----
 src/base/scripts/main.js          |   2 +
 src/base/scripts/settings.js      |  51 ++++++++++++
 src/base/scripts/theme.js         |   9 ++-
 src/base/scripts/toggles.js       |  21 +----
 src/base/styles/controls.css      |  29 +++++++
 src/base/styles/form.css          |   6 ++
 src/base/styles/index.css         | 127 +-----------------------------
 src/base/styles/settings.css      |  23 ++++++
 src/types/ipc.ts                  |   2 +-
 14 files changed, 197 insertions(+), 248 deletions(-)
 create mode 100644 src/base/scripts/settings.js
 create mode 100644 src/base/styles/controls.css
 create mode 100644 src/base/styles/form.css
 create mode 100644 src/base/styles/settings.css

diff --git a/src/base/components/controls.html b/src/base/components/controls.html
index d3b1777..4807656 100644
--- a/src/base/components/controls.html
+++ b/src/base/components/controls.html
@@ -1,5 +1,25 @@
-<div class="controls">
-	<button id="reload-tab" title="Reload active tab">
+<sl-button-group class="controls">
+	<sl-button id="toggle-settings" size="small" title="Toggle settings">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="#000000"
+			stroke-width="1.5"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			class="lucide lucide-settings"
+		>
+			<path
+				d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
+			/>
+			<circle cx="12" cy="12" r="3" />
+		</svg>
+		<sl-visually-hidden>Toggle settings</sl-visually-hidden>
+	</sl-button>
+	<sl-button id="reload-tab" size="small" title="Reload active tab">
 		<svg
 			aria-hidden="true"
 			xmlns="http://www.w3.org/2000/svg"
@@ -16,6 +36,6 @@
 			<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
 			<path d="M21 3v5h-5" />
 		</svg>
-		<span class="visually-hidden">Reload active tab</span>
-	</button>
-</div>
+		<sl-visually-hidden>Reload active tab</sl-visually-hidden>
+	</sl-button>
+</sl-button-group>
diff --git a/src/base/components/settings.html b/src/base/components/settings.html
index d9789d5..7282fb5 100644
--- a/src/base/components/settings.html
+++ b/src/base/components/settings.html
@@ -1,49 +1,26 @@
-<div id="settings" class="dropdown-modal">
-	<div class="settings-section">
-		<div class="settings-section-header">
-			<h2>Instance</h2>
-		</div>
-		<div class="settings-section-content">
-			<input
-				style="width: -webkit-fill-available"
+<sl-drawer id="settings" class="settings" placement="start" label="Settings">
+	<div>
+		<form id="instance-form" class="inline">
+			<sl-input
 				id="instance-field"
+				label="Instance"
 				type="url"
-				pattern="https?://.*"
 				placeholder="https://design.penpot.app/"
-				value=""
-			/>
-			<input id="instance-save" type="button" value="Save" />
-		</div>
+				size="small"
+			></sl-input>
+			<sl-button id="instance-save" type="submit" size="small">Save</sl-button>
+		</form>
+
+		<sl-select id="theme-select" label="Theme" size="small">
+			<sl-option value="light">Light</sl-option>
+			<sl-option value="dark">Dark</sl-option>
+			<sl-option value="system">System</sl-option>
+			<sl-option value="tab">Penpot</sl-option>
+		</sl-select>
 	</div>
-	<div class="settings-section">
-		<div class="settings-section-header">
-			<h2>Theme</h2>
-		</div>
-		<div id="theme" class="settings-section-content">
-			<select name="theme" id="theme-select">
-				<option value="light">Light</option>
-				<option value="dark">Dark</option>
-				<option value="system">System</option>
-				<option value="tab">Penpot</option>
-			</select>
-		</div>
-	</div>
-	<div class="settings-section">
-		<div class="settings-section-header">
-			<h2>Help</h2>
-		</div>
-		<div class="settings-section-content">
-			<div
-				style="
-					display: flex;
-					gap: 12px;
-					justify-content: space-evenly;
-					flex: auto;
-				"
-			>
-				<a href="#" onclick="window.api.send('OpenHelp')">Help</a>
-				<a href="#" onclick="window.api.send('OpenOffline')">Selfhost</a>
-			</div>
-		</div>
-	</div>
-</div>
+
+	<sl-button-group class="footer" label="Help Center">
+		<sl-button id="open-docs" href="#" size="small">Documentation</sl-button>
+		<sl-button id="open-selfhost" href="#" size="small">Selfhost</sl-button>
+	</sl-button-group>
+</sl-drawer>
diff --git a/src/base/components/tabs.html b/src/base/components/tabs.html
index 41f2697..7497272 100644
--- a/src/base/components/tabs.html
+++ b/src/base/components/tabs.html
@@ -35,7 +35,7 @@
 			width: calc(100% - var(--navBarWF));
 			filter: var(--theme-filter, none);
 
-			margin-left: 2.25rem;
+			margin-left: 4rem;
 		}
 		.tab {
 			-webkit-app-region: no-drag;
diff --git a/src/base/components/titlebar.html b/src/base/components/titlebar.html
index 9d9795d..485b5af 100644
--- a/src/base/components/titlebar.html
+++ b/src/base/components/titlebar.html
@@ -1,34 +1,4 @@
 <div class="titlebar">
-	<!-- Controls -->
-	<sl-tooltip content="Settings" style="--sl-tooltip-arrow-size: 0">
-		<button id="toggle-settings">
-			<?xml version="1.0" encoding="UTF-8"?><svg
-				width="24px"
-				height="24px"
-				stroke-width="1.5"
-				viewBox="0 0 24 24"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				color="#000000"
-			>
-				<path
-					d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
-					stroke="#000000"
-					stroke-width="1.5"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				></path>
-				<path
-					d="M19.6224 10.3954L18.5247 7.7448L20 6L18 4L16.2647 5.48295L13.5578 4.36974L12.9353 2H10.981L10.3491 4.40113L7.70441 5.51596L6 4L4 6L5.45337 7.78885L4.3725 10.4463L2 11V13L4.40111 13.6555L5.51575 16.2997L4 18L6 20L7.79116 18.5403L10.397 19.6123L11 22H13L13.6045 19.6132L16.2551 18.5155C16.6969 18.8313 18 20 18 20L20 18L18.5159 16.2494L19.6139 13.598L21.9999 12.9772L22 11L19.6224 10.3954Z"
-					stroke="#000000"
-					stroke-width="1.5"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				></path>
-			</svg>
-		</button>
-	</sl-tooltip>
-
 	<!-- Titlebar Buttons -->
 	<div class="linux-titlebar">
 		<button onclick="window.api.send('MinimizeWindow')">
diff --git a/src/base/scripts/instance.js b/src/base/scripts/instance.js
index 56ee9c5..b24b15e 100644
--- a/src/base/scripts/instance.js
+++ b/src/base/scripts/instance.js
@@ -1,5 +1,9 @@
 import { getIncludedElement } from "./dom.js";
 import { openTab, resetTabs, setDefaultTab } from "./electron-tabs.js";
+import {
+	SlButton,
+	SlInput,
+} from "../../../node_modules/@shoelace-style/shoelace/cdn/shoelace.js";
 
 const INSTANCE_STORE_KEY = "Instance";
 const INSTANCE_EVENTS = Object.freeze({
@@ -12,25 +16,20 @@ export async function initInstance() {
 
 	await setDefaultTab(savedInstance);
 	openTab(savedInstance);
-	prepareSaveButton();
+	prepareForm();
 }
 
-async function prepareSaveButton() {
-	const { instanceSaveButton } = await getInstanceSettingsForm();
+async function prepareForm() {
+	const { instanceForm } = await getInstanceSettingsForm();
 
-	instanceSaveButton?.addEventListener("click", (event) => {
-		const target = event.target;
-		const element = target instanceof HTMLElement ? target : null;
-		saveInstance(element);
+	instanceForm?.addEventListener("submit", (event) => {
+		event.preventDefault();
+		saveInstance();
 	});
 }
 
-/**
- * @param {HTMLElement | null} trigger
- */
-async function saveInstance(trigger) {
-	const isInputButton = trigger instanceof HTMLInputElement;
-	const { instanceField } = await getInstanceSettingsForm();
+async function saveInstance() {
+	const { instanceField, instanceSaveButton } = await getInstanceSettingsForm();
 	const instance = instanceField?.value;
 
 	if (instance) {
@@ -50,12 +49,12 @@ async function saveInstance(trigger) {
 
 	resetTabs();
 
-	if (isInputButton) {
-		trigger.style.backgroundColor = "#00ff89";
-		trigger.setAttribute("value", "Saved!");
+	if (instanceSaveButton) {
+		instanceSaveButton.setAttribute("variant", "success");
+		instanceSaveButton.innerText = "Saved!";
 		setTimeout(() => {
-			trigger.style.backgroundColor = "#575151";
-			trigger.setAttribute("value", "Save");
+			instanceSaveButton.removeAttribute("variant");
+			instanceSaveButton.innerText = "Save";
 		}, 1200);
 	}
 }
@@ -77,16 +76,21 @@ async function registerSavedInstance() {
 }
 
 async function getInstanceSettingsForm() {
+	const instanceForm = await getIncludedElement(
+		"#instance-form",
+		"#include-settings",
+		HTMLFormElement,
+	);
 	const instanceField = await getIncludedElement(
 		"#instance-field",
 		"#include-settings",
-		HTMLInputElement,
+		SlInput,
 	);
 	const instanceSaveButton = await getIncludedElement(
 		"#instance-save",
 		"#include-settings",
-		HTMLInputElement,
+		SlButton,
 	);
 
-	return { instanceField, instanceSaveButton };
+	return { instanceForm, instanceField, instanceSaveButton };
 }
diff --git a/src/base/scripts/main.js b/src/base/scripts/main.js
index 18c0356..687cf37 100644
--- a/src/base/scripts/main.js
+++ b/src/base/scripts/main.js
@@ -3,6 +3,7 @@ import "../../../node_modules/electron-tabs/dist/electron-tabs.js";
 
 import { initTabs } from "./electron-tabs.js";
 import { initInstance } from "./instance.js";
+import { initSettings } from "./settings.js";
 import { initTheme } from "./theme.js";
 import { initToggles } from "./toggles.js";
 
@@ -11,4 +12,5 @@ window.addEventListener("DOMContentLoaded", () => {
 	initInstance();
 	initTheme();
 	initToggles();
+	initSettings();
 });
diff --git a/src/base/scripts/settings.js b/src/base/scripts/settings.js
new file mode 100644
index 0000000..4b811ad
--- /dev/null
+++ b/src/base/scripts/settings.js
@@ -0,0 +1,51 @@
+import {
+	SlButton,
+	SlDrawer,
+} from "../../../node_modules/@shoelace-style/shoelace/cdn/shoelace.js";
+import { getIncludedElement } from "./dom.js";
+
+export async function initSettings() {
+	const { toggleSettingsButton, openDocsButton, openSelfhostButton } =
+		await getTriggers();
+
+	toggleSettingsButton?.addEventListener("click", () => toggleSettings());
+	openDocsButton?.addEventListener("click", () => window.api.send("OpenHelp"));
+	openSelfhostButton?.addEventListener("click", () =>
+		window.api.send("OpenOffline"),
+	);
+}
+
+async function toggleSettings() {
+	const settingsDrawer = await getIncludedElement(
+		"#settings",
+		"#include-settings",
+		SlDrawer,
+	);
+
+	if (settingsDrawer?.open) {
+		settingsDrawer?.hide();
+		return;
+	}
+
+	settingsDrawer?.show();
+}
+
+async function getTriggers() {
+	const toggleSettingsButton = await getIncludedElement(
+		"#toggle-settings",
+		"#include-controls",
+		SlButton,
+	);
+	const openDocsButton = await getIncludedElement(
+		"#open-docs",
+		"#include-settings",
+		SlButton,
+	);
+	const openSelfhostButton = await getIncludedElement(
+		"#open-selfhost",
+		"#include-settings",
+		SlButton,
+	);
+
+	return { toggleSettingsButton, openDocsButton, openSelfhostButton };
+}
diff --git a/src/base/scripts/theme.js b/src/base/scripts/theme.js
index 648454d..467645e 100644
--- a/src/base/scripts/theme.js
+++ b/src/base/scripts/theme.js
@@ -4,6 +4,7 @@
  * @typedef {import("electron").IpcMessageEvent} IpcMessageEvent
  */
 
+import { SlSelect } from "../../../node_modules/@shoelace-style/shoelace/cdn/shoelace.js";
 import { getIncludedElement } from "./dom.js";
 import { requestTabTheme } from "./electron-tabs.js";
 
@@ -35,12 +36,12 @@ async function prepareForm(themeSetting) {
 	const { themeSelect } = await getThemeSettingsForm();
 
 	if (themeSelect && themeSetting) {
-		themeSelect.value = themeSetting;
+		themeSelect.setAttribute("value", themeSetting);
 	}
 
-	themeSelect?.addEventListener("change", (event) => {
+	themeSelect?.addEventListener("sl-change", (event) => {
 		const { target } = event;
-		const value = target instanceof HTMLSelectElement && target.value;
+		const value = target instanceof SlSelect && target.value;
 
 		if (isThemeSetting(value)) {
 			const isTabTheme = value === "tab";
@@ -74,7 +75,7 @@ async function getThemeSettingsForm() {
 	const themeSelect = await getIncludedElement(
 		"#theme-select",
 		"#include-settings",
-		HTMLSelectElement,
+		SlSelect,
 	);
 
 	return { themeSelect };
diff --git a/src/base/scripts/toggles.js b/src/base/scripts/toggles.js
index 726c1b4..a614bc4 100644
--- a/src/base/scripts/toggles.js
+++ b/src/base/scripts/toggles.js
@@ -1,29 +1,14 @@
-import { getIncludedElement, typedQuerySelector } from "./dom.js";
+import { typedQuerySelector } from "./dom.js";
 import { openTab } from "./electron-tabs.js";
 
 export async function initToggles() {
-	const { toggleSettingsButton, openTabButton } = await getToggles();
+	const { openTabButton } = await getToggles();
 
-	toggleSettingsButton?.addEventListener("click", () => toggleSettings());
 	openTabButton?.addEventListener("click", () => openTab());
 }
 
-function toggleSettings() {
-	const settingsUi = typedQuerySelector("#settings", HTMLElement);
-	if (settingsUi) {
-		const isVisible = settingsUi.style.display === "flex";
-		settingsUi.style.display = isVisible ? "none" : "flex";
-	}
-}
-
 async function getToggles() {
-	const toggleSettingsButton = await getIncludedElement(
-		"#toggle-settings",
-		"#include-titlebar",
-		HTMLButtonElement,
-	);
-
 	const openTabButton = typedQuerySelector("#open-tab", HTMLButtonElement);
 
-	return { toggleSettingsButton, openTabButton };
+	return { openTabButton };
 }
diff --git a/src/base/styles/controls.css b/src/base/styles/controls.css
new file mode 100644
index 0000000..d28ad6a
--- /dev/null
+++ b/src/base/styles/controls.css
@@ -0,0 +1,29 @@
+.controls {
+	position: fixed;
+	z-index: 5;
+	top: 0px;
+	left: 0px;
+	margin: 4px 0px 0px 4px;
+	app-region: no-drag;
+
+	sl-button {
+		&::part(base) {
+			width: 32px;
+			height: 32px;
+			border: none;
+			border-radius: 6px;
+			background: transparent;
+			display: grid;
+			place-content: center;
+		}
+		&::part(base):hover {
+			background: #303236;
+		}
+
+		svg {
+			width: 16px;
+			height: 16px;
+			filter: invert(1);
+		}
+	}
+}
diff --git a/src/base/styles/form.css b/src/base/styles/form.css
new file mode 100644
index 0000000..ef2206f
--- /dev/null
+++ b/src/base/styles/form.css
@@ -0,0 +1,6 @@
+form.inline {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(auto, 1fr));
+	gap: 0.5rem;
+	align-items: end;
+}
diff --git a/src/base/styles/index.css b/src/base/styles/index.css
index 3f8170d..a61c16a 100644
--- a/src/base/styles/index.css
+++ b/src/base/styles/index.css
@@ -1,29 +1,18 @@
-.visually-hidden:not(:focus):not(:active) {
-	clip: rect(0 0 0 0);
-	clip-path: inset(100%);
-	height: 1px;
-	width: 1px;
-	padding: 0;
-	margin: 0;
-	overflow: hidden;
-	position: absolute;
-	white-space: nowrap;
-	border: 0;
-}
+@import url("./form.css");
+@import url("./controls.css");
+@import url("./settings.css");
 
 @media (prefers-color-scheme: light) {
 	:root {
 		--theme-filter: invert(1);
 	}
 
-	body,
-	#settings {
+	body {
 		background: #ffffff;
 	}
 
 	.titlebar,
 	.controls,
-	#settings > *,
 	.no-tabs-exist {
 		filter: var(--theme-filter, none);
 	}
@@ -85,35 +74,6 @@ body {
 	}
 }
 
-.controls {
-	position: fixed;
-	top: 0px;
-	left: 0px;
-	margin: 4px 0px 0px 4px;
-	z-index: 5;
-	app-region: no-drag;
-
-	button {
-		width: 32px;
-		height: 32px;
-		border: none;
-		border-radius: 6px;
-		background: transparent;
-		display: grid;
-		place-content: center;
-
-		&:hover {
-			background: #303236;
-		}
-
-		svg {
-			width: 16px;
-			height: 16px;
-			filter: invert(1);
-		}
-	}
-}
-
 sl-include.alert-modal {
 	position: fixed;
 	z-index: 50;
@@ -133,85 +93,6 @@ drag {
 	z-index: 1;
 }
 
-.dropdown-modal {
-	position: fixed;
-	top: 40px;
-	right: 0px;
-	z-index: 50;
-	display: none;
-	flex-direction: column;
-	background: hsl(240 5.1% 15%);
-	border-radius: 6px;
-	border: 1px hsl(240 4.6% 22%) solid;
-	margin: 6px;
-	min-width: 250px;
-	width: 300px;
-
-	div:nth-child(1) > div.settings-section-header {
-		border-radius: 4px 4px 0px 0px;
-	}
-
-	.settings-section-header {
-		background: #303236;
-		padding: 6px 0px 6px 16px;
-		font-size: 12px;
-
-		h2 {
-			margin: 0px;
-		}
-	}
-
-	.settings-section-content {
-		display: flex;
-		margin: 12px;
-
-		input,
-		select {
-			padding: 6px 12px;
-			border-radius: 4px;
-			border: 1px #656565 solid;
-			margin-right: 6px;
-		}
-
-		select {
-			width: 100%;
-			background: rgb(18, 18, 18);
-
-			@media (prefers-color-scheme: light) {
-				option {
-					background: rgb(237, 237, 237);
-					color: black;
-				}
-			}
-		}
-
-		input#instance-save {
-			background: #575151;
-			color: white;
-			border: none;
-			border-radius: 4px;
-			padding: 0px 12px;
-		}
-	}
-}
-
-div#theme {
-	display: flex;
-	justify-content: space-evenly;
-	gap: 12px;
-}
-
-.settings-section-content a {
-	background: #3c413e;
-	color: white;
-	text-decoration: none;
-	padding: 12px 24px;
-	border-radius: 10px;
-	width: 100%;
-	text-align: center;
-	cursor: default;
-}
-
 .no-tabs-exist {
 	position: fixed;
 	top: 50%;
diff --git a/src/base/styles/settings.css b/src/base/styles/settings.css
new file mode 100644
index 0000000..88a66a1
--- /dev/null
+++ b/src/base/styles/settings.css
@@ -0,0 +1,23 @@
+.settings {
+	--sl-overlay-background-color: none;
+
+	&::part(body) {
+		display: grid;
+		align-content: space-between;
+	}
+
+	&::part(panel) {
+		--size: 20rem;
+
+		height: calc(100% - 42px);
+		top: unset;
+		bottom: 0;
+
+		box-shadow: unset;
+	}
+
+	.footer {
+		display: grid;
+		place-content: center;
+	}
+}
diff --git a/src/types/ipc.ts b/src/types/ipc.ts
index 5e5038b..c67d408 100644
--- a/src/types/ipc.ts
+++ b/src/types/ipc.ts
@@ -1,7 +1,7 @@
 import type { NativeTheme } from "electron";
 
 export type Api = {
-	send: (channel: string, data: unknown) => void;
+	send: (channel: string, data?: unknown) => void;
 	setTheme: (themeId: NativeTheme["themeSource"]) => void;
 	onOpenTab: (callback: (href: string) => void) => void;
 	onTabMenuAction: (

From bf8619698577a7f96151b8d2d56063a009ef2dca Mon Sep 17 00:00:00 2001
From: Belar <belar@belardesign.com>
Date: Sun, 5 Jan 2025 11:16:19 +0000
Subject: [PATCH 2/2] feat: add theme support to shoelace ui

---
 src/base/index.html       |  7 +++++--
 src/base/scripts/theme.js | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 2 deletions(-)

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 @@
 <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
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);
+	});
 }
 
 /**