GCWing · GCWing · Mar 23, 2026 · Mar 23, 2026
diff --git a/src/web-ui/src/app/scenes/mermaid/MermaidEditorScene.scss b/src/web-ui/src/app/scenes/mermaid/MermaidEditorScene.scss
@@ -7,7 +7,7 @@
   min-width: 0;
   height: 100%;
   overflow: hidden;
-  background: var(--color-bg-primary);
+  background: var(--color-bg-scene);
 
   // ── Top: Mermaid diagram ─────────────────────────────────────
   &__top {
@@ -129,7 +129,7 @@
     flex: 1;
     min-height: 0;
     overflow: hidden;
-    background: var(--color-bg-primary);
+    background: var(--color-bg-scene);
   }
 
   // Loading fallback

diff --git a/src/web-ui/src/app/scenes/profile/views/AssistantCard.tsx b/src/web-ui/src/app/scenes/profile/views/AssistantCard.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Bot } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Badge } from '@/component-library';
 import type { WorkspaceInfo } from '@/shared/types';
@@ -15,7 +16,7 @@ const AssistantCard: React.FC<AssistantCardProps> = ({ workspace, onClick, style
   const identity = workspace.identity;
 
   const name = identity?.name?.trim() || workspace.name || t('nursery.card.unnamed');
-  const emoji = identity?.emoji?.trim() || '🤖';
+  const emoji = identity?.emoji?.trim() ?? '';
   const creature = identity?.creature?.trim() || '';
   const vibe = identity?.vibe?.trim() || '';
   const modelPrimary = identity?.modelPrimary?.trim() || '';
@@ -37,7 +38,11 @@ const AssistantCard: React.FC<AssistantCardProps> = ({ workspace, onClick, style
       {/* Header: avatar + name + badges */}
       <div className="assistant-card__header">
         <div className="assistant-card__avatar">
-          <span className="assistant-card__emoji">{emoji}</span>
+          {emoji ? (
+            <span className="assistant-card__emoji">{emoji}</span>
+          ) : (
+            <Bot className="assistant-card__avatar-icon" size={20} strokeWidth={1.6} aria-hidden />
+          )}
         </div>
         <div className="assistant-card__header-info">
           <div className="assistant-card__title-row">

diff --git a/src/web-ui/src/app/scenes/profile/views/NurseryView.scss b/src/web-ui/src/app/scenes/profile/views/NurseryView.scss
@@ -349,6 +349,11 @@ $nursery-scene-gutter: clamp(40px, 6vw, 80px);
     line-height: 1;
   }
 
+  &__avatar-icon {
+    flex-shrink: 0;
+    color: var(--color-text-primary);
+  }
+
   &__header-info {
     flex: 1;
     min-width: 0;

diff --git a/src/web-ui/src/flow_chat/components/ChatInput.scss b/src/web-ui/src/flow_chat/components/ChatInput.scss
@@ -24,7 +24,7 @@
       box-shadow: 
         0 12px 32px rgba(0, 0, 0, 0.45),
         inset 0 1px 0 rgba(255, 255, 255, 0.12);
-      background: var(--color-bg-elevated);
+      background: var(--color-bg-scene);
     }
   }
 
@@ -355,7 +355,7 @@
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 12px;
     padding: 12px 8px 0;
-    background: var(--color-bg-tertiary);
+    background: var(--color-bg-scene);
     backdrop-filter: blur(16px) saturate(1.2);
     -webkit-backdrop-filter: blur(16px) saturate(1.2);
     transition:

diff --git a/src/web-ui/src/infrastructure/theme/core/ThemeService.ts b/src/web-ui/src/infrastructure/theme/core/ThemeService.ts
@@ -251,7 +251,6 @@ export class ThemeService {
       root.style.setProperty('--color-bg-tooltip', colors.background.tooltip);
     }
 
-
     root.style.setProperty('--color-overlay', theme.type === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.3)');
 
 

diff --git a/src/web-ui/src/infrastructure/theme/presets/dark-theme.ts b/src/web-ui/src/infrastructure/theme/presets/dark-theme.ts
@@ -14,14 +14,14 @@ export const bitfunDarkTheme: ThemeConfig = {
 
   colors: {
     background: {
-      primary: '#121214',
-      secondary: '#18181a',
-      tertiary: '#121214',
-      quaternary: '#202024',
-      elevated: '#18181a',
-      workbench: '#121214',
-      scene: '#16161a',
-      tooltip: 'rgba(30, 30, 32, 0.92)',  
+      primary: '#0e0e10',
+      secondary: '#1c1c1f',
+      tertiary: '#0e0e10',
+      quaternary: '#252528',
+      elevated: '#1c1c1f',
+      workbench: '#0e0e10',
+      scene: '#1c1c1f',
+      tooltip: 'rgba(28, 28, 31, 0.96)',
     },
 
     text: {

diff --git a/src/web-ui/src/infrastructure/theme/presets/light-theme.ts b/src/web-ui/src/infrastructure/theme/presets/light-theme.ts
@@ -14,12 +14,12 @@ export const bitfunLightTheme: ThemeConfig = {
 
   colors: {
     background: {
-      primary: '#f7f8fa',          
+      primary: '#e8ecf2',          
       secondary: '#ffffff',        
-      tertiary: '#f3f5f8',         
-      quaternary: '#ebeef3',       
+      tertiary: '#dde2eb',         
+      quaternary: '#d4dae5',       
       elevated: '#ffffff',         
-      workbench: '#f7f8fa',        
+      workbench: '#e8ecf2',        
       scene: '#ffffff',
       tooltip: 'rgba(255, 255, 255, 0.98)',
     },
@@ -91,11 +91,11 @@ export const bitfunLightTheme: ThemeConfig = {
 
 
     element: {
-      subtle: 'rgba(71, 102, 143, 0.05)',      
-      soft: 'rgba(71, 102, 143, 0.08)',        
-      base: 'rgba(71, 102, 143, 0.11)',        
-      medium: 'rgba(71, 102, 143, 0.15)',      
-      strong: 'rgba(71, 102, 143, 0.20)',      
+      subtle: 'rgba(71, 102, 143, 0.07)',      
+      soft: 'rgba(71, 102, 143, 0.11)',        
+      base: 'rgba(71, 102, 143, 0.15)',        
+      medium: 'rgba(71, 102, 143, 0.20)',      
+      strong: 'rgba(71, 102, 143, 0.27)',      
       elevated: 'rgba(255, 255, 255, 0.92)',   
     },
 

diff --git a/src/web-ui/src/infrastructure/theme/presets/slate-theme.ts b/src/web-ui/src/infrastructure/theme/presets/slate-theme.ts
@@ -14,14 +14,14 @@ export const bitfunSlateTheme: ThemeConfig = {
 
   colors: {
     background: {
-      primary: '#1a1c1e',       
-      secondary: '#1a1c1e',     
-      tertiary: '#1a1c1e',      
-      quaternary: '#32363a',    
-      elevated: '#1a1c1e',      
-      workbench: '#1a1c1e',     
-      scene: '#1d2023',
-      tooltip: 'rgba(42, 45, 48, 0.96)',
+      primary: '#14161a',
+      secondary: '#22262c',
+      tertiary: '#14161a',
+      quaternary: '#2c3038',
+      elevated: '#22262c',
+      workbench: '#14161a',
+      scene: '#22262c',
+      tooltip: 'rgba(34, 38, 44, 0.96)',
     },
 
     text: {

diff --git a/src/web-ui/src/tools/mermaid-editor/components/MermaidEditor.css b/src/web-ui/src/tools/mermaid-editor/components/MermaidEditor.css
@@ -6,7 +6,7 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  background: var(--color-bg-primary, #121214);
+  background: var(--mermaid-bg, var(--color-bg-scene));
   border-radius: 0;
   overflow: hidden;
   position: relative;
@@ -20,7 +20,7 @@
   min-height: 0;
   gap: var(--size-gap-2, 8px);
   padding: var(--size-gap-2, 8px);
-  background: var(--color-bg-primary, #121214);
+  background: var(--mermaid-bg, var(--color-bg-scene));
 }
 
 /* Panels. */
@@ -110,7 +110,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: color-mix(in srgb, var(--mermaid-bg, #121214) 85%, transparent);
+  background: color-mix(in srgb, var(--mermaid-bg, var(--color-bg-scene)) 85%, transparent);
   backdrop-filter: blur(4px);
   animation: errorOverlayFadeIn 0.3s ease;
 }
@@ -206,7 +206,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: color-mix(in srgb, var(--mermaid-bg, #121214) 92%, transparent);
+  background: color-mix(in srgb, var(--mermaid-bg, var(--color-bg-scene)) 92%, transparent);
   display: flex;
   flex-direction: column;
   align-items: center;

diff --git a/src/web-ui/src/tools/mermaid-editor/components/MermaidEditorHeader.css b/src/web-ui/src/tools/mermaid-editor/components/MermaidEditorHeader.css
@@ -9,7 +9,7 @@
   justify-content: space-between;
   height: 40px;
   padding: 0 var(--size-gap-3, 12px);
-  background: var(--mermaid-bg, var(--color-bg-primary, #121214));
+  background: var(--mermaid-bg, var(--color-bg-scene));
   border-bottom: none;
   flex-shrink: 0;
 }

diff --git a/src/web-ui/src/tools/mermaid-editor/components/MermaidPanel.scss b/src/web-ui/src/tools/mermaid-editor/components/MermaidPanel.scss
@@ -11,7 +11,7 @@
   height: 100%;
   min-width: 0;
   min-height: 0;
-  background: var(--color-bg-primary, #121214);
+  background: var(--color-bg-scene);
   border-radius: 0;
   overflow: hidden;
 

diff --git a/src/web-ui/src/tools/mermaid-editor/components/MermaidPreview.css b/src/web-ui/src/tools/mermaid-editor/components/MermaidPreview.css
@@ -7,7 +7,7 @@
   position: relative;
   width: 100%;
   height: 100%;
-  background: var(--mermaid-bg, var(--color-bg-primary, #121214));
+  background: var(--mermaid-bg, var(--color-bg-scene));
   border-radius: 0;
   overflow: hidden;
   display: flex;
@@ -23,7 +23,7 @@
   padding: 0;
   box-sizing: border-box;
   display: block;
-  background: var(--mermaid-bg, var(--color-bg-primary, #121214));
+  background: var(--mermaid-bg, var(--color-bg-scene));
   position: relative;
 }
 
@@ -68,7 +68,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: color-mix(in srgb, var(--mermaid-bg, #121214) 92%, transparent);
+  background: color-mix(in srgb, var(--mermaid-bg, var(--color-bg-scene)) 92%, transparent);
   display: flex;
   flex-direction: column;
   align-items: center;

diff --git a/src/web-ui/src/tools/mermaid-editor/theme/_tokens.scss b/src/web-ui/src/tools/mermaid-editor/theme/_tokens.scss
@@ -110,7 +110,7 @@
   --mermaid-branch-label: #{$color-text-primary};
 
   // ==================== Background and container ====================
-  --mermaid-bg: #{$color-bg-primary};
+  --mermaid-bg: var(--color-bg-scene);
   --mermaid-container-border: #{$border-subtle};
 }
 
@@ -188,7 +188,7 @@
   --mermaid-branch-label: #1e293b;
 
   // Background
-  --mermaid-bg: #f7f8fa;
+  --mermaid-bg: var(--color-bg-scene);
   --mermaid-container-border: rgba(100, 116, 139, 0.18);
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -251,7 +251,6 @@ export class ThemeService {
		root.style.setProperty('--color-bg-tooltip', colors.background.tooltip);
		}


		root.style.setProperty('--color-overlay', theme.type === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.3)');


Expand Down