fix(source filter): dark mode support

[jessicasingh7]

Description

[Provide a brief description of the changes in this PR]

How Has This Been Tested?

[Describe the tests you ran to verify your changes]

Additional Options

• [Optional] Override Linear Check

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
internal-search	Ready	Preview	Comment	Sep 26, 2025 0:49am

[greptile-apps]

Greptile Overview

Summary

This PR implements dark mode support for source filter components by updating color classes from legacy text-* and background-* to standardized neutral-* variants with dark mode variants.

Key Changes:

• ActionManagement.tsx: Updated color classes throughout component, improved dropdown styling with proper dark mode backgrounds/shadows, and added SVG filter styling for icons
• Dropdown.tsx: Replaced legacy color classes with neutral variants for consistent theming
• TagFilter.tsx: Updated border colors to use neutral color classes
• hooks.ts: Cleaned up useEffect dependency array by removing unused llmProviders

Issues Found:

• Inline styling with DOM queries for dark mode detection could cause SSR hydration mismatches and may not update properly with theme changes

Confidence Score: 4/5

• This PR is safe to merge with minor style considerations
• The changes are primarily cosmetic color class updates for dark mode support. The inline SVG styling approach could be improved but doesn't break functionality. The hooks dependency cleanup is correct.
• ActionManagement.tsx requires attention for the inline dark mode detection approach

Important Files Changed

File Analysis

Filename	Score	Overview
web/src/app/chat/components/input/ActionManagement.tsx	4/5	Updated color classes from text-* to neutral-* for dark mode support, improved styling for dropdown and toggle components
web/src/components/Dropdown.tsx	5/5	Replaced text-* and background-* color classes with neutral-* variants for proper dark mode theming

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant ActionManagement
    participant Dropdown
    participant TagFilter
    participant Theme

    User->>Browser: Toggle dark mode
    Browser->>Theme: Update documentElement.classList
    Theme->>ActionManagement: Apply dark mode styles
    ActionManagement->>ActionManagement: Update neutral-* color classes
    ActionManagement->>ActionManagement: Apply inline SVG filter styles
    Theme->>Dropdown: Apply dark mode styles  
    Dropdown->>Dropdown: Update neutral-* background/text colors
    Theme->>TagFilter: Apply dark mode styles
    TagFilter->>TagFilter: Update neutral-* border colors
    User->>ActionManagement: Interact with source filters
    ActionManagement->>User: Display with proper dark mode styling

Loading

_{3 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

style: The inline style with document.documentElement.classList.contains("dark") checks can cause hydration mismatches in SSR and may not update properly with theme changes. Consider using CSS variables or a theme context instead.

Suggested change

	filter:
	document.documentElement.classList.contains(
	"dark"
	)
	? "invert(0.6) sepia(1) saturate(0) hue-rotate(0deg) brightness(1.2)"
	: "invert(0.4) sepia(1) saturate(0) hue-rotate(0deg) brightness(0.8)",
	opacity:
	document.documentElement.classList.contains(
	"dark"
	)
	? 0.9
	: 0.7,
	}}
	className="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 pointer-events-none dark:invert-[0.6] dark:brightness-125 invert-[0.4] brightness-75 dark:opacity-90 opacity-70"

[cubic-dev-ai]

1 issue found across 3 files

Prompt for AI agents (all 1 issues)

Understand the root cause of the following 1 issues and fix them.


<file name="web/src/app/chat/components/input/ActionManagement.tsx">

<violation number="1" location="web/src/app/chat/components/input/ActionManagement.tsx:983">
Inline style reads document.documentElement.classList in render to set theme-specific filter/opacity, making them non-reactive to dark-mode toggles and coupling logic to DOM; prefer CSS (dark: classes) or state-driven updates.</violation>
</file>

_{React with 👍 or 👎 to teach cubic. Mention @cubic-dev-ai to give feedback, ask questions, or re-run the review.}

[cubic-dev-ai]

Inline style reads document.documentElement.classList in render to set theme-specific filter/opacity, making them non-reactive to dark-mode toggles and coupling logic to DOM; prefer CSS (dark: classes) or state-driven updates.

Prompt for AI agents

Address the following comment on web/src/app/chat/components/input/ActionManagement.tsx at line 983:

<comment>Inline style reads document.documentElement.classList in render to set theme-specific filter/opacity, making them non-reactive to dark-mode toggles and coupling logic to DOM; prefer CSS (dark: classes) or state-driven updates.</comment>

<file context>
@@ -972,18 +971,29 @@ export function ActionToggle({
                               alt=&quot;Disable All Sources&quot;
-                              className=&quot;absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 pointer-events-none opacity-60&quot;
+                              className=&quot;absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 pointer-events-none&quot;
+                              style={{
+                                filter:
+                                  document.documentElement.classList.contains(
</file context>

✅ Addressed in 2b7b7a7

[raunakab]

Trust it looks good!