Mintplex-Labs/anything-llm
1
0
Fork 0
mirror of https://github.com/Mintplex-Labs/anything-llm.git synced 2026-07-19 22:23:50 -04:00
Code Issues 328 Packages Projects Releases 10 Wiki Activity

[PR #4996] [MERGED] feat: update light mode UI sidebar #4851

New Issue
Closed
opened 2026-02-22 18:36:39 -05:00 by yindo · 0 comments
yindo commented 2026-02-22 18:36:39 -05:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/Mintplex-Labs/anything-llm/pull/4996
Author: @angelplusultra
Created: 2/12/2026
Status: ✅ Merged
Merged: 2/18/2026
Merged by: @timothycarambat

Base: master ← Head: 4982-feat-update-light-mode-ui-sidebar

📝 Commits (10+)

  • 605e384 implement light mode sidebar redesign
  • dd726f5 Abstract hardcoded hex values into reusable css variables
  • 5de4119 reorder ternary and apply bold font on hovered workspaces
  • cdcafbd Remove double icon hack and use a state tracking whether workspace item is being hovered over for fill styles
  • 5f9625d lint
  • a03dd2c convert css variables and custom classes to default tailwind classes
  • b673278 remove grab icon filling on hover logic
  • 7d7c8d1 revert css vars to original values
  • 568a15e remove light mode css vars | change bg of sidebar in light mode to right color | make icons correct color in light mode
  • 24ff57a revert dark mode change

📊 Changes

7 files changed (+36 additions, -34 deletions)

View changed files

📝 frontend/src/components/Footer/index.jsx (+3 -6)
📝 frontend/src/components/SettingsButton/index.jsx (+2 -4)
📝 frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx (+8 -6)
📝 frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx (+3 -3)
📝 frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx (+11 -10)
📝 frontend/src/components/Sidebar/SearchBox/index.jsx (+7 -3)
📝 frontend/src/components/Sidebar/index.jsx (+2 -2)

📄 Description

Pull Request Type

  • 💄 style

https://github.com/user-attachments/assets/633c3955-a331-4861-b940-1caa696bb7d2

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

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/Mintplex-Labs/anything-llm/pull/4996 **Author:** [@angelplusultra](https://github.com/angelplusultra) **Created:** 2/12/2026 **Status:** ✅ Merged **Merged:** 2/18/2026 **Merged by:** [@timothycarambat](https://github.com/timothycarambat) **Base:** `master` ← **Head:** `4982-feat-update-light-mode-ui-sidebar` --- ### 📝 Commits (10+) - [`605e384`](https://github.com/Mintplex-Labs/anything-llm/commit/605e3848681fcd64ebc3095fe4d113a6aa3b86d1) implement light mode sidebar redesign - [`dd726f5`](https://github.com/Mintplex-Labs/anything-llm/commit/dd726f50272878bf5e893a67e89f41b5ff9e49fd) Abstract hardcoded hex values into reusable css variables - [`5de4119`](https://github.com/Mintplex-Labs/anything-llm/commit/5de4119f636305181b8f9bad2e42e10aa4a142bd) reorder ternary and apply bold font on hovered workspaces - [`cdcafbd`](https://github.com/Mintplex-Labs/anything-llm/commit/cdcafbd2a6661a6829aed3c18474add1560f5813) Remove double icon hack and use a state tracking whether workspace item is being hovered over for fill styles - [`5f9625d`](https://github.com/Mintplex-Labs/anything-llm/commit/5f9625dca7f61c2475652aba278c02d5f6b25087) lint - [`a03dd2c`](https://github.com/Mintplex-Labs/anything-llm/commit/a03dd2ca86bd565e244cd18c0efa20e5bc8530c1) convert css variables and custom classes to default tailwind classes - [`b673278`](https://github.com/Mintplex-Labs/anything-llm/commit/b673278ecf322ad73261e99fc051166055229659) remove grab icon filling on hover logic - [`7d7c8d1`](https://github.com/Mintplex-Labs/anything-llm/commit/7d7c8d157c3d1dec7f9a4c4557ee0d1e5dc37d86) revert css vars to original values - [`568a15e`](https://github.com/Mintplex-Labs/anything-llm/commit/568a15e668b50e9ee310423db220179c3f19712f) remove light mode css vars | change bg of sidebar in light mode to right color | make icons correct color in light mode - [`24ff57a`](https://github.com/Mintplex-Labs/anything-llm/commit/24ff57a31f3a7d74d3f92764b37e8e439d2b28d5) revert dark mode change ### 📊 Changes **7 files changed** (+36 additions, -34 deletions) <details> <summary>View changed files</summary> 📝 `frontend/src/components/Footer/index.jsx` (+3 -6) 📝 `frontend/src/components/SettingsButton/index.jsx` (+2 -4) 📝 `frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx` (+8 -6) 📝 `frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx` (+3 -3) 📝 `frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx` (+11 -10) 📝 `frontend/src/components/Sidebar/SearchBox/index.jsx` (+7 -3) 📝 `frontend/src/components/Sidebar/index.jsx` (+2 -2) </details> ### 📄 Description ### Pull Request Type - [x] 💄 style https://github.com/user-attachments/assets/633c3955-a331-4861-b940-1caa696bb7d2 ### 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 - [x] I ran `yarn lint` from the root of the repo & committed changes - [ ] Relevant documentation has been updated - [x] I have tested my code functionality - [ ] Docker build succeeds locally --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
yindo added the pull-request label 2026-02-22 18:36:39 -05:00
yindo closed this issue 2026-02-22 18:36:40 -05:00
yindo changed title from [PR #4996] feat: update light mode UI sidebar to [PR #4996] [MERGED] feat: update light mode UI sidebar 2026-06-05 15:20:42 -04:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Desktop
Docker
Integration Request
Integration Request
OS: Linux
OS: Mobile
OS: Windows
UI/UX
blocked
bug
bug
core-team-only
documentation
duplicate
embed-widget
enhancement
feature request
github_actions
good first issue
investigating
needs info / can't replicate
possible bug
pull-request
Mirrored from GitHub Pull Request
 question
stage: specifications
wontfix
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Mintplex-Labs/anything-llm#4851
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?