appariciojunior · vyctorbrzezowski · Jun 27, 2026 · Jun 27, 2026 · Jun 27, 2026 · Jun 27, 2026
diff --git a/index.html b/index.html
@@ -3,9 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
     <title>Motion Studio</title>
     <script>
-      if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      const savedTheme = window.localStorage.getItem("motion-studio-theme");
+      if (savedTheme === "dark" || (savedTheme !== "light" && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
         document.documentElement.classList.add("dark");
       }
     </script>

diff --git a/main-window.html b/main-window.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
     <title>App</title>
     <script>
       if (window.matchMedia("(prefers-color-scheme: dark)").matches) {

diff --git a/public/favicon.png b/public/favicon.png
diff --git a/renderer/components/appearance-toggle.tsx b/renderer/components/appearance-toggle.tsx
@@ -1,44 +1,42 @@
 import * as React from "react";
-import { Button } from "@glaze/core/components";
-import { Sun, Moon } from "lucide-react";
+import { Laptop, Moon, Sun } from "lucide-react";
+
+type ThemeSource = "system" | "dark" | "light";
+
+const THEME_ORDER: ThemeSource[] = ["system", "dark", "light"];
 
-// Quick light/dark switch for the main window. The full Auto/Light/Dark control
-// still lives in Settings; this just flips the effective appearance in place.
 export function AppearanceToggle() {
-  const [isDark, setIsDark] = React.useState<boolean | null>(null);
+  const [themeSource, setThemeSource] = React.useState<ThemeSource>("system");
 
   React.useEffect(() => {
     let active = true;
-    window.glazeAPI.nativeTheme.getShouldUseDarkColors().then((dark) => {
-      if (active) setIsDark(dark);
+    window.glazeAPI.nativeTheme.getThemeSource().then((source) => {
+      if (active) setThemeSource(source);
     });
 
-    // Keep the icon in sync when the OS appearance changes while on "system".
-    const media = window.matchMedia("(prefers-color-scheme: dark)");
-    const onChange = (e: MediaQueryListEvent) => setIsDark(e.matches);
-    media.addEventListener("change", onChange);
     return () => {
       active = false;
-      media.removeEventListener("change", onChange);
     };
   }, []);
 
   const toggle = async () => {
-    const next = !isDark;
-    setIsDark(next);
-    await window.glazeAPI.nativeTheme.setThemeSource(next ? "dark" : "light");
+    const next = THEME_ORDER[(THEME_ORDER.indexOf(themeSource) + 1) % THEME_ORDER.length];
+    setThemeSource(next);
+    await window.glazeAPI.nativeTheme.setThemeSource(next);
   };
 
+  const label =
+    themeSource === "system" ? "Use dark mode" : themeSource === "dark" ? "Use light mode" : "Use system theme";
+
   return (
-    <Button
-      iconOnly
-      variant="glass"
-      size="large"
+    <button
+      type="button"
+      className="inline-flex size-8 shrink-0 items-center justify-center rounded-full text-black/55 transition-colors hover:bg-black/[0.07] hover:text-foreground dark:text-white/50 dark:hover:bg-white/[0.07] dark:hover:text-white"
       onClick={toggle}
-      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
-      title={isDark ? "Switch to light mode" : "Switch to dark mode"}
+      aria-label={label}
+      title={label}
     >
-      {isDark ? <Sun /> : <Moon />}
-    </Button>
+      {themeSource === "system" ? <Laptop size={16} /> : themeSource === "dark" ? <Moon size={16} /> : <Sun size={16} />}
+    </button>
   );
 }
diff --git a/renderer/components/control-panel.tsx b/renderer/components/control-panel.tsx
@@ -1,40 +1,42 @@
-import { Button, Separator } from "@glaze/core/components";
-import { RotateCcw } from "lucide-react";
-import { ControlRow } from "./control-row";
+import { Separator } from "@glaze/core/components";
+import * as React from "react";
+import { ColorPresetGrid, ControlRow } from "./control-row";
 import type { Effect, EffectParams, ParamValue } from "./effects/types";
 
 interface ControlPanelProps {
   effect: Effect;
   params: EffectParams;
   onChange: (id: string, value: ParamValue) => void;
-  onReset: () => void;
 }
 
-export function ControlPanel({ effect, params, onChange, onReset }: ControlPanelProps) {
+export function ControlPanel({ effect, params, onChange }: ControlPanelProps) {
+  let colorPresetsShown = false;
+
   return (
     <div className="h-full flex flex-col">
-      <div className="px-4 pt-13 pb-3 flex items-start justify-between gap-3">
+      <div className="titlebar-drag px-4 py-3 flex items-start justify-between gap-3">
         <div className="min-w-0">
           <h2 className="text-strong">{effect.name}</h2>
           <p className="text-small text-secondary mt-0.5">{effect.description}</p>
         </div>
-        <Button
-          variant="transparent"
-          size="small"
-          iconOnly
-          className="shrink-0 text-secondary"
-          title="Reset to defaults"
-          aria-label="Reset to defaults"
-          onClick={onReset}
-        >
-          <RotateCcw size={15} />
-        </Button>
       </div>
       <Separator />
-      <div className="flex-1 overflow-y-auto px-4 py-4 flex flex-col gap-4">
-        {effect.controls.map((control) => (
-          <ControlRow key={control.id} control={control} params={params} onChange={onChange} />
-        ))}
+      <div className="flex-1 overflow-y-auto px-4 pt-3 pb-4 flex flex-col gap-4">
+        {effect.controls.map((control) => {
+          const showColorPresets =
+            !colorPresetsShown &&
+            control.type === "color" &&
+            (!control.visibleWhen || control.visibleWhen(params));
+          if (showColorPresets) colorPresetsShown = true;
+          return (
+            <React.Fragment key={control.id}>
+              {showColorPresets && (
+                <ColorPresetGrid controls={effect.controls} params={params} onChange={onChange} />
+              )}
+              <ControlRow control={control} params={params} onChange={onChange} />
+            </React.Fragment>
+          );
+        })}
       </div>
     </div>
   );