feat: dashboard theme inline editor

web-common/src/features/canvas/CanvasDashboardWrapper.svelte

@@ -5,6 +5,7 @@
   import CanvasFilters from "./filters/CanvasFilters.svelte";
   import { getCanvasStore } from "./state-managers/state-managers";
   import ThemeProvider from "../dashboards/ThemeProvider.svelte";
+  import { themePreviewOverride } from "../themes/selectors";
 
   const client = useRuntimeClient();
 
@@ -22,13 +23,15 @@
   $: ({ instanceId } = client);
 
   $: ({
-    canvasEntity: { theme },
+    canvasEntity: { theme: resolvedCanvasTheme },
   } = getCanvasStore(canvasName, instanceId));
 
+  $: effectiveTheme = $themePreviewOverride ?? $resolvedCanvasTheme;
+
   $: ({ width: clientWidth } = contentRect);
 </script>
 
-<ThemeProvider theme={$theme}>
+<ThemeProvider theme={effectiveTheme}>
   <main
     class="flex flex-col overflow-hidden"
     class:w-full={$dynamicHeight}

web-common/src/features/canvas/inspector/PageEditor.svelte

@@ -31,7 +31,9 @@
 
   import CanvasTabs from "./CanvasTabs.svelte";
 
-  import { goto } from "$app/navigation";
+  import { beforeNavigate, goto } from "$app/navigation";
+  import { themeEditorStore } from "@rilldata/web-common/features/visual-editing/theme-editor-store";
+  import { buildInlineThemeObject } from "@rilldata/web-common/features/visual-editing/theme-yaml-utils";
   import DefaultFilterDisplay from "./DefaultFilterDisplay.svelte";
 
   export let updateProperties: (
@@ -43,6 +45,11 @@
 
   const client = useRuntimeClient();
 
+  // Clean up theme editing state on navigation
+  beforeNavigate(() => {
+    themeEditorStore.exitEditing();
+  });
+
   $: ({
     canvasEntity: { filtersEnabledStore, _embeddedTheme },
   } = getCanvasStore(canvasName, client.instanceId));
@@ -249,18 +256,8 @@
             await updateProperties({ theme: value });
           }
         }}
-        onColorChange={async (primary, secondary, isDarkMode) => {
-          // TODO: Update to support dark mode - currently always sets light mode
-          // Use new theme structure: theme.light or theme.dark
-          const modeKey = isDarkMode ? "dark" : "light";
-          await updateProperties({
-            theme: {
-              [modeKey]: {
-                primary,
-                secondary,
-              },
-            },
-          });
+        onInlineThemeChange={async (spec) => {
+          await updateProperties({ theme: buildInlineThemeObject(spec) });
         }}
       />
     </div>

web-common/src/features/dashboards/workspace/Dashboard.svelte

@@ -18,7 +18,10 @@
   import { DashboardState_ActivePage } from "../../../proto/gen/rill/ui/v1/dashboard_pb";
   import { useRuntimeClient } from "../../../runtime-client/v2";
   import { activeDashboardTheme } from "../../themes/active-dashboard-theme";
-  import { createResolvedThemeStore } from "../../themes/selectors";
+  import {
+    createResolvedThemeStore,
+    themePreviewOverride,
+  } from "../../themes/selectors";
   import MeasuresContainer from "../big-number/MeasuresContainer.svelte";
   import DimensionDisplay from "../dimension-table/DimensionDisplay.svelte";
   import Filters from "../filters/Filters.svelte";
@@ -131,16 +134,21 @@
   let themeSource: Readable<string | null> = urlThemeName;
   $: themeSource = isEmbedded && embedThemeName ? embedThemeName : urlThemeName;
 
-  $: theme = createResolvedThemeStore(themeSource, exploreQuery, client);
+  $: resolvedTheme = createResolvedThemeStore(
+    themeSource,
+    exploreQuery,
+    client,
+  );
+  $: theme = $themePreviewOverride ?? $resolvedTheme;
 
   // Publish the resolved theme to the shared store for external components (e.g., chat in layout)
-  $: activeDashboardTheme.set($theme);
+  $: activeDashboardTheme.set(theme);
 
   // Clear the active theme when this dashboard is destroyed
   onDestroy(() => activeDashboardTheme.set(undefined));
 </script>
 
-<ThemeProvider theme={$theme}>
+<ThemeProvider {theme}>
   <article
     class="flex flex-col overflow-y-hidden bg-surface-background"
     bind:clientWidth={exploreContainerWidth}

web-common/src/features/themes/selectors.ts

@@ -2,7 +2,7 @@ import {
   ResourceKind,
   useResource,
 } from "@rilldata/web-common/features/entity-management/resource-selectors";
-import { derived, type Readable } from "svelte/store";
+import { derived, writable, type Readable } from "svelte/store";
 import { Theme } from "./theme";
 import type { ConnectError } from "@connectrpc/connect";
 import type { RuntimeClient } from "@rilldata/web-common/runtime-client/v2";
@@ -11,6 +11,13 @@ import type { CanvasResponse } from "../canvas/selector";
 import type { ExploreValidSpecResponse } from "../explores/selectors";
 import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
 
+/**
+ * Writable store for live theme preview override.
+ * When set, dashboards use this theme instead of the persisted one.
+ * Cleared on save/discard to revert to the persisted theme.
+ */
+export const themePreviewOverride = writable<Theme | undefined>(undefined);
+
 export function useTheme(client: RuntimeClient, name: string) {
   return useResource(client, name, ResourceKind.Theme);
 }

web-common/src/features/themes/theme.ts

@@ -100,6 +100,9 @@ export class Theme {
 }
 .dark .dashboard-theme-boundary {
   ${this.stringifyVars(darkColors)}
+}
+.light .dashboard-theme-boundary {
+  ${this.stringifyVars(lightColors)}
 }`.trim();
 
     return css;