feat: update light mode UI sidebar

[angelplusultra]

Pull Request Type

• 💄 style

screenrecording-2026-02-12_14-51-29.mp4

Relevant Issues

resolves #4982

What is in this change?

Sidebar container (Sidebar/index.jsx)

• Sidebar panel and bottom footer area both receive an explicit light:bg-slate-200 background

Footer icons (Footer/index.jsx)

• GitHub, Docs (BookOpen), and Discord icons: removed inline color="var(--theme-sidebar-footer-icon-fill)" prop, replaced with Tailwind classes text-white light:text-slate-800

Settings button icons (SettingsButton/index.jsx)

• Back arrow (ArrowUUpLeft) and Wrench icons: same treatment as footer — CSS variable color prop replaced with text-white light:text-slate-800 classes

Active workspaces (ActiveWorkspaces/index.jsx)

• Active workspace highlight changed from an outline-based style (light:outline-2 light:outline-blue-400) to a fill-based style (light:bg-blue-200)
• Inactive workspace hover state gets light:hover:bg-slate-300; removed hover:font-bold
• DotsSixVertical drag handle icon: replaced color="var(--theme-sidebar-item-workspace-active)" prop with conditional className (light:text-blue-800 when active)
• Workspace name text gets light:text-blue-900 when active
• Upload and gear action icons get context-aware light mode colors using nested group hover classes (group/upload, group/gear) for distinct active vs inactive states

Thread items (ThreadContainer/ThreadItem/index.jsx)

• Thread connector border colors updated: active uses light:border-blue-800, inactive uses light:border-slate-400
• Active thread background changed from a border highlight to light:bg-blue-200; inactive hover gets light:hover:bg-slate-300
• Thread name text gets light:text-blue-900 when active with font-semibold, light:text-slate-800 with font-medium when inactive

New thread button (ThreadContainer/index.jsx)

• Hover state gets light:hover:bg-slate-300
• Icon container background changed from bg-white/20 to bg-zinc-800 light:bg-slate-50
• "New Thread" label gets font-semibold

Search box & new workspace button (SearchBox/index.jsx)

• Search input placeholder changed from placeholder:text-theme-settings-input-placeholder to placeholder:text-white/50 light:placeholder:text-slate-500 placeholder:font-semibold
• Short-width new workspace button gets light:hover:bg-slate-300 hover state; Plus icon gets light:text-slate-500

Additional Information

All light mode overrides use Tailwind light: variant classes directly in JSX rather than introducing new CSS variables. CSS variable color props on Phosphor icons have been replaced with Tailwind text color classes, keeping the approach consistent with the rest of the codebase.

Developer Validations

• I ran yarn lint from the root of the repo & committed changes
• Relevant documentation has been updated
• I have tested my code functionality
• Docker build succeeds locally

[shatfield4]

Reassigned back to you to make changes we discussed @angelplusultra

[shatfield4]

Be sure to not be using the custom css theme variables anymore when implementing designs. Use tailwind classes provided from the designs always being sure to use the light: prefix for light mode classes.

Also avoid using onMouseEnter and onMouseLeave when tracking hover states. This usually adds an unneeded useState and you can usually use group and group-hover tailwind classes to accomplish the same thing using css only.

[shatfield4]

LGTM