support light and dark

packages/ui/package.json

@@ -8,6 +8,7 @@
       "import": "./lib/index.qwik.mjs"
     }
   },
+  "types": "./lib-types/ui/src/index.d.ts",
   "files": [
     "lib",
     "lib-types"
@@ -33,7 +34,8 @@
     "qwik": "qwik"
   },
   "peerDependencies": {
-    "@qwik.dev/core": "^2.0.0-alpha.9"
+    "@qwik.dev/core": "^2.0.0-alpha.9",
+    "@devtools/plugin": "workspace:*"
   },
   "devDependencies": {
     "@devtools/kit": "workspace:*",

packages/ui/src/components/DevtoolsButton/DevtoolsButton.tsx

@@ -91,8 +91,8 @@ export const DevtoolsButton = component$(({ state }: DevtoolsButtonProps) => {
     <div
       ref={elementRef}
       class={{
-        "fixed flex h-9 w-9 origin-center items-center justify-center rounded-lg border border-white/10 bg-zinc-900 backdrop-blur-md select-none": true,
-        "rotate-90 border-emerald-500/50 bg-zinc-900/95 shadow-lg shadow-emerald-500/35": state.isOpen.value && !isDragging.value,
+        "fixed flex h-9 w-9 origin-center items-center justify-center rounded-lg border border-border bg-background backdrop-blur-md select-none": true,
+        "rotate-90 border-accent/50 bg-background/95 shadow-lg shadow-accent/35": state.isOpen.value && !isDragging.value,
         "cursor-grab": !isDragging.value,
         "cursor-grabbing": isDragging.value,
         "transition-all duration-300 ease-in-out": !isDragging.value,

packages/ui/src/components/DevtoolsPanel/DevtoolsPanel.tsx

@@ -1,6 +1,7 @@
-import { component$, Slot, useSignal, useTask$,isBrowser } from "@qwik.dev/core";
+import { component$, Slot, useSignal, useTask$, isBrowser } from "@qwik.dev/core";
 import { State } from "../../types/state";
 
+
 interface DevtoolsPanelProps {
   state: State;
 }
@@ -42,7 +43,7 @@ export const DevtoolsPanel = component$(({ state }: DevtoolsPanelProps) => {
   return (
     <div
       ref={panelRef}
-      class="fixed bottom-6 right-6  flex h-[calc(100vh-3rem)] w-[calc(100vw-3rem)] translate-y-0 transform overflow-hidden rounded-lg border-2 border-white/10 bg-zinc-900 text-white backdrop-blur-lg transition-transform duration-300 ease-in-out"
+      class="fixed bottom-6 right-6 flex h-[calc(100vh-3rem)] w-[calc(100vw-3rem)] translate-y-0 transform overflow-hidden rounded-lg border-2 border-border bg-background text-foreground backdrop-blur-lg transition-transform duration-300 ease-in-out"
     >
       <Slot />
     </div>

packages/ui/src/components/Tab/Tab.tsx

@@ -15,9 +15,9 @@ export const Tab = component$<TabProps>(({ state, id, title }) => {
       class={{
         "flex h-10 w-10 items-center justify-center rounded-lg p-2.5 transition-all duration-200":
           true,
-        "bg-white/5 text-zinc-400 hover:bg-white/10 hover:text-white":
+        "bg-foreground/5 text-muted-foreground hover:bg-foreground/10 hover:text-foreground":
           state.activeTab !== id,
-        "bg-emerald-500 text-white shadow-lg shadow-emerald-500/35":
+        "bg-accent text-accent-foreground shadow-lg shadow-accent/35":
           state.activeTab === id,
       }}
     >

packages/ui/src/components/TabContent/TabContent.tsx

@@ -3,7 +3,7 @@ import { component$, Slot } from "@qwik.dev/core";
 export const TabContent = component$(() => {
   return (
     <div class="space-y-6 flex-col flex h-full w-full">
-      <div class="flex items-center justify-between border-b border-zinc-700 pb-4">
+      <div class="flex items-center justify-between border-b border-border pb-4">
         <Slot name="title" />
       </div>
 

packages/ui/src/components/ThemeToggle/ThemeToggle.tsx

@@ -0,0 +1,67 @@
+import { component$, createSignal, isBrowser, Signal,event$ } from "@qwik.dev/core";
+import { HiMoonMini, HiSunMini } from "@qwikest/icons/heroicons";
+import { useDark } from "../../hooks/useDark";
+import { themeStorageKey } from '../router-head/theme-script';
+
+type ThemeName = 'dark' | 'light' | undefined;
+
+export const getTheme = (): ThemeName => {
+  let theme;
+  try {
+    theme = localStorage.getItem(themeStorageKey);
+  } catch {
+    //
+  }
+  if (theme) {
+    return theme as ThemeName;
+  } else {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+};
+
+let currentThemeSignal: Signal<ThemeName>;
+export const getThemeSignal = () => {
+  if (!isBrowser) {
+    throw new Error('getThemeSignal is only available in the browser');
+  }
+  if (!currentThemeSignal) {
+    currentThemeSignal = createSignal(getTheme());
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      currentThemeSignal.value = getTheme();
+    });
+  }
+  return currentThemeSignal;
+};
+
+export const setTheme = (theme: ThemeName) => {
+  if (!theme) {
+    localStorage.removeItem(themeStorageKey);
+    theme = getTheme();
+  } else {
+    localStorage.setItem(themeStorageKey, theme);
+  }
+  document.firstElementChild?.setAttribute('data-theme', theme!);
+  if (currentThemeSignal) {
+    currentThemeSignal.value = theme;
+  }
+};
+
+export const ThemeToggle = component$(() => {
+  const dark = useDark();
+  const onClick$ = event$(() => {
+    const currentTheme = getTheme();
+    setTheme(currentTheme === 'dark' ? 'light' : 'dark');
+  });
+  return (
+    <button
+      onClick$={onClick$}
+      class="flex h-8 w-8 items-center justify-center rounded-md bg-background text-foreground hover:bg-accent/10"
+    >
+      {dark.isDark.value ? (
+        <HiSunMini class="h-5 w-5" />
+      ) : (
+        <HiMoonMini class="h-5 w-5" />
+      )}
+    </button>
+  );
+});

packages/ui/src/components/router-head/theme-script.tsx

@@ -0,0 +1,12 @@
+export const themeStorageKey = 'theme-preference';
+export const ThemeScript = () => {
+  const themeScript = `
+        try {
+          document.firstElementChild
+              .setAttribute('data-theme',
+                  localStorage.getItem('${themeStorageKey}') ??
+                  (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+              );
+        } catch (e) { }`.replace(/\s+/g, '');
+  return themeScript
+};