ChainSafe · krzysu · Feb 7, 2025 · Feb 5, 2025
diff --git a/packages/circle-demo-webapp/public/favicon.ico b/packages/circle-demo-webapp/public/favicon.ico
diff --git a/packages/circle-react-elements/.storybook/main.ts b/packages/circle-react-elements/.storybook/main.ts
@@ -25,6 +25,7 @@ const config: StorybookConfig = {
     name: getAbsolutePath('@storybook/react-vite'),
     options: {},
   },
+  staticDirs: ['../public'],
   core: {
     disableTelemetry: true,
   },

diff --git a/packages/circle-react-elements/.storybook/manager.ts b/packages/circle-react-elements/.storybook/manager.ts
@@ -0,0 +1,28 @@
+import { addons } from '@storybook/manager-api';
+import { create } from '@storybook/theming';
+
+// Set initial theme
+addons.setConfig({
+  theme: create({
+    base: 'light',
+    brandTitle: 'Circle React Elements',
+    brandImage: './circle-logo.svg',
+  }),
+});
+
+// Listen for theme changes and update logo
+addons.register('theme-switcher', (api) => {
+  const channel = api.getChannel();
+
+  if (channel) {
+    channel.on('DARK_MODE', (isDark) => {
+      const newTheme = create({
+        base: isDark ? 'dark' : 'light',
+        brandTitle: 'Circle React Elements',
+        brandImage: isDark ? './circle-logo-ondark.svg' : './circle-logo.svg',
+      });
+
+      addons.setConfig({ theme: newTheme });
+    });
+  }
+});
diff --git a/packages/circle-react-elements/public/circle-logo-ondark.svg b/packages/circle-react-elements/public/circle-logo-ondark.svg