Fix embedding tokens: soft blue instead of viridis black/green; make toggles, sidebar button, checkboxes more visible in light mode

circuit_analysis/circuit_trace_page.py

@@ -1840,41 +1840,54 @@ def create_interactive_attribution_graph(analysis, prompt_idx, enable_explanatio
     traces = edge_traces
     traces.extend(path_highlight_traces)
     
-    colors = {'embedding': 'lightblue', 'feature': 'lightgreen', 'output': 'orange'}
-    
     for node_type, data in node_traces.items():
         if data['x']:
-            trace = go.Scatter(
-                x=data['x'], y=data['y'],
-                mode='markers+text',
-                hoverinfo='text',
-                hovertext=data['hovertext'],
-                text=data['text'],
-                textposition="middle center",
-                marker=dict(
-                    size=data['size'],
-                    color=data['color'],
-                    colorscale='viridis',
-                    showscale=True if node_type == 'feature' else False,
-                    colorbar=dict(
-                        title=tr('colorbar_title'),
-                        x=0.97,
-                        xanchor="left",
-                        thickness=15,
-                        len=0.7,
-                        tickfont=dict(color=tc_graph['text']),
-                        title_font=dict(color=tc_graph['text']),
-                    ) if node_type == 'feature' else None,
-                    line=dict(width=0.5, color=tc_graph['node_outline'])
-                ),
-                name=node_type.title()
-            )
-            # Manually translate the legend names.
             if node_type == 'embedding':
-                trace.name = tr('embedding_legend')
-            elif node_type == 'feature':
-                trace.name = tr('feature_legend')
-                
+                # Embeddings: fixed soft blue, no colorscale
+                trace = go.Scatter(
+                    x=data['x'], y=data['y'],
+                    mode='markers+text',
+                    hoverinfo='text',
+                    hovertext=data['hovertext'],
+                    text=data['text'],
+                    textposition="middle center",
+                    textfont=dict(color=tc_graph['text'], size=11),
+                    marker=dict(
+                        size=data['size'],
+                        color='#60a5fa',
+                        showscale=False,
+                        line=dict(width=0.5, color=tc_graph['node_outline'])
+                    ),
+                    name=tr('embedding_legend')
+                )
+            else:
+                # Features: viridis colorscale with colorbar
+                trace = go.Scatter(
+                    x=data['x'], y=data['y'],
+                    mode='markers+text',
+                    hoverinfo='text',
+                    hovertext=data['hovertext'],
+                    text=data['text'],
+                    textposition="middle center",
+                    textfont=dict(color=tc_graph['text']),
+                    marker=dict(
+                        size=data['size'],
+                        color=data['color'],
+                        colorscale='viridis',
+                        showscale=True,
+                        colorbar=dict(
+                            title=tr('colorbar_title'),
+                            x=0.97,
+                            xanchor="left",
+                            thickness=15,
+                            len=0.7,
+                            tickfont=dict(color=tc_graph['text']),
+                            title_font=dict(color=tc_graph['text']),
+                        ),
+                        line=dict(width=0.5, color=tc_graph['node_outline'])
+                    ),
+                    name=tr('feature_legend')
+                )
             traces.append(trace)
     
     # Calculate the total width needed for the plot.

web_app.py

@@ -225,6 +225,35 @@ if _is_light:
         border-color: #c8cdd5 !important;
     }
 
+    /* ── Toggle switches ──────────────────────────────────────── */
+    [data-testid="stToggle"] label,
+    [data-testid="stToggle"] span {
+        color: #1b1b2f !important;
+    }
+    [data-testid="stToggle"] [role="checkbox"] {
+        border: 2px solid #2f3f70 !important;
+    }
+
+    /* ── Sidebar collapse button ──────────────────────────────── */
+    [data-testid="stSidebar"] button[kind="header"],
+    [data-testid="collapsedControl"] button,
+    button[data-testid="stBaseButton-headerNoPadding"] {
+        color: #1b1b2f !important;
+        background-color: #e8ecf6 !important;
+        border: 1px solid #c8cdd5 !important;
+        border-radius: 8px !important;
+    }
+
+    /* ── Slider thumb & track ─────────────────────────────────── */
+    [data-testid="stSlider"] label {
+        color: #1b1b2f !important;
+    }
+
+    /* ── Checkbox ─────────────────────────────────────────────── */
+    .stCheckbox label span {
+        color: #1b1b2f !important;
+    }
+
     /* ── Option menu (sidebar nav) ────────────────────────────── */
     [data-testid="stSidebar"] iframe + div,
     [data-testid="stSidebar"] .nav {