@preact/signals-devtools-ui 0.4.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preact/signals-devtools-ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "license": "MIT",
   "description": "DevTools UI components for @preact/signals",
   "keywords": [
@@ -54,7 +54,7 @@
     "typescript": "~5.8.3",
     "vite": "^7.0.0",
     "vitest": "^4.0.17",
-    "@preact/signals": "2.7.0"
+    "@preact/signals": "2.8.0"
   },
   "publishConfig": {
     "access": "public",

package/src/components/Graph.tsx

@@ -493,7 +493,7 @@ export function GraphVisualization() {
 							refY="3"
 							orient="auto"
 						>
-							<polygon points="0 0, 8 3, 0 6" fill="#94a3b8" />
+							<polygon points="0 0, 8 3, 0 6" className="graph-arrowhead" />
 						</marker>
 					</defs>
 
@@ -639,31 +639,19 @@ export function GraphVisualization() {
 
 				<div className="graph-legend">
 					<div className="legend-item">
-						<div
-							className="legend-color"
-							style={{ backgroundColor: "#2196f3" }}
-						></div>
+						<div className="legend-color signal"></div>
 						<span>Signal</span>
 					</div>
 					<div className="legend-item">
-						<div
-							className="legend-color"
-							style={{ backgroundColor: "#ff9800" }}
-						></div>
+						<div className="legend-color computed"></div>
 						<span>Computed</span>
 					</div>
 					<div className="legend-item">
-						<div
-							className="legend-color"
-							style={{ backgroundColor: "#4caf50" }}
-						></div>
+						<div className="legend-color effect"></div>
 						<span>Effect</span>
 					</div>
 					<div className="legend-item">
-						<div
-							className="legend-color"
-							style={{ backgroundColor: "#9c27b0" }}
-						></div>
+						<div className="legend-color component"></div>
 						<span>Component</span>
 					</div>
 				</div>

package/src/components/Header.tsx

@@ -1,9 +1,22 @@
 import { StatusIndicator } from "./StatusIndicator";
 import { Button } from "./Button";
 import { getContext } from "../context";
+import type { ThemeMode } from "../context";
+
+const themeLabels: Record<ThemeMode, string> = {
+	auto: "Auto",
+	light: "Light",
+	dark: "Dark",
+};
+
+const themeIcons: Record<ThemeMode, string> = {
+	auto: "\u25D1",
+	light: "\u2600",
+	dark: "\u263E",
+};
 
 export function Header() {
-	const { connectionStore, updatesStore } = getContext();
+	const { connectionStore, updatesStore, themeStore } = getContext();
 
 	const onTogglePause = () => {
 		updatesStore.isPaused.value = !updatesStore.isPaused.value;
@@ -23,6 +36,13 @@ export function Header() {
 				/>
 			</div>
 			<div className="header-controls">
+				<button
+					className="theme-toggle"
+					onClick={themeStore.toggleTheme}
+					title={`Theme: ${themeLabels[themeStore.theme]}`}
+				>
+					{themeIcons[themeStore.theme]} {themeLabels[themeStore.theme]}
+				</button>
 				{onClear && <Button onClick={onClear}>Clear</Button>}
 				{onTogglePause && (
 					<Button onClick={onTogglePause} active={updatesStore.isPaused.value}>

package/src/context.ts

@@ -1,4 +1,4 @@
-import { signal, computed } from "@preact/signals";
+import { signal, computed, effect } from "@preact/signals";
 import type {
 	DevToolsAdapter,
 	ConnectionStatus,
@@ -8,11 +8,14 @@ import type {
 	DependencyInfo,
 } from "@preact/signals-devtools-adapter";
 
+export type ThemeMode = "auto" | "light" | "dark";
+
 export interface DevToolsContext {
 	adapter: DevToolsAdapter;
 	connectionStore: ReturnType<typeof createConnectionStore>;
 	updatesStore: ReturnType<typeof createUpdatesStore>;
 	settingsStore: ReturnType<typeof createSettingsStore>;
+	themeStore: ReturnType<typeof createThemeStore>;
 }
 
 let currentContext: DevToolsContext | null = null;
@@ -325,16 +328,85 @@ export function createSettingsStore(adapter: DevToolsAdapter) {
 	};
 }
 
+const THEME_STORAGE_KEY = "signals-devtools-theme";
+
+export function createThemeStore() {
+	const stored = (() => {
+		try {
+			const val = localStorage.getItem(THEME_STORAGE_KEY);
+			if (val === "light" || val === "dark" || val === "auto") return val;
+		} catch {
+			// localStorage unavailable
+		}
+		return "auto" as ThemeMode;
+	})();
+
+	const theme = signal<ThemeMode>(stored);
+
+	const mediaQuery =
+		typeof window !== "undefined"
+			? window.matchMedia("(prefers-color-scheme: dark)")
+			: null;
+	const systemIsDark = signal(mediaQuery?.matches ?? false);
+
+	if (mediaQuery) {
+		const handler = (e: MediaQueryListEvent) => {
+			systemIsDark.value = e.matches;
+		};
+		mediaQuery.addEventListener("change", handler);
+	}
+
+	const resolvedTheme = computed<"light" | "dark">(() =>
+		theme.value === "auto"
+			? systemIsDark.value
+				? "dark"
+				: "light"
+			: theme.value
+	);
+
+	// Apply data-theme attribute to the devtools container
+	effect(() => {
+		const resolved = resolvedTheme.value;
+		const el = document.querySelector(".signals-devtools");
+		if (el instanceof HTMLElement) {
+			el.dataset.theme = resolved;
+		}
+	});
+
+	const toggleTheme = () => {
+		const order: ThemeMode[] = ["auto", "light", "dark"];
+		const idx = order.indexOf(theme.value);
+		theme.value = order[(idx + 1) % order.length];
+		try {
+			localStorage.setItem(THEME_STORAGE_KEY, theme.value);
+		} catch {
+			// localStorage unavailable
+		}
+	};
+
+	return {
+		get theme() {
+			return theme.value;
+		},
+		get resolvedTheme() {
+			return resolvedTheme.value;
+		},
+		toggleTheme,
+	};
+}
+
 export function initDevTools(adapter: DevToolsAdapter): DevToolsContext {
 	const settingsStore = createSettingsStore(adapter);
 	const updatesStore = createUpdatesStore(adapter, settingsStore);
 	const connectionStore = createConnectionStore(adapter);
+	const themeStore = createThemeStore();
 
 	currentContext = {
 		adapter,
 		connectionStore,
 		updatesStore,
 		settingsStore,
+		themeStore,
 	};
 
 	return currentContext;