Add Light Mode Support

[PeetMcK]

Overview

This PR implements light mode support for Termix, adding a comprehensive theme system that enables automatic switching between light and dark modes based on user preference or system settings.

What's Changed

Theme Infrastructure

• CSS Variable System: Added semantic CSS variables in index.css with separate definitions for light (:root) and dark (.dark) modes
• Terminal Themes: Introduced termixDark and termixLight variants with optimized ANSI color palettes for each mode
• Auto-Switching: Terminal theme automatically adapts when "Termix Default" is selected, switching between light/dark variants based on app theme

Component Updates

Updated components across desktop and mobile to use semantic CSS classes instead of hard-coded dark mode values:

Desktop (~46 files)

• Terminal, File Manager, Server Stats widgets, Dashboard, Host Manager, Credentials Manager
• Navigation: TopNavbar, LeftSidebar, Tab system with theme-aware borders
• Authentication forms and dialogs
• User Profile with redesigned tabbed interface

Mobile (~18 files)

• Terminal with theme auto-switching
• New kb-light-theme.css for mobile keyboard
• Navigation components and host cards
• Authentication screens

UI Components

• Alert, Badge, Button, Input, Resizable

Technical Approach

• Replaced hard-coded classes (bg-dark-*, border-dark-*) with semantic alternatives (bg-canvas, bg-elevated, border-edge)
• Integrated useTheme hook for runtime theme detection
• Added system theme detection via window.matchMedia("(prefers-color-scheme: dark)")
• Theme-aware scrollbars using CSS custom properties

Files Changed

72 files changed: 1,278 additions, 602 deletions

Class Migration Reference

Background Classes

Old Class	New Class	Light Value	Dark Value	Usage
bg-dark-bg	bg-canvas	#fcfcfc	#18181b	Main canvas/container backgrounds
bg-dark-bg-darker	bg-canvas	#fcfcfc	#18181b	Also maps to canvas
bg-dark-bg-darkest	bg-deepest	#e5e7eb	#09090b	Deepest background layer
bg-dark-bg-panel	bg-surface	#f3f4f6	#1b1b1e	Panel and surface backgrounds
bg-dark-bg-input	bg-field	#ffffff	#222225	Input field backgrounds
bg-dark-bg-button	bg-button	#f3f4f6	#23232a	Button backgrounds
bg-dark-bg-active	bg-active	#e5e7eb	#1d1d1f	Active state backgrounds
bg-dark-bg-header	bg-header	#eeeeef	#131316	Header backgrounds
bg-dark-hover	bg-hover	#f3f4f6	#2d2d30	Hover state backgrounds
bg-dark-bg-panel-hover	bg-surface-hover	#e5e7eb	#232327	Panel hover states
bg-dark-bg-light	bg-light	#fafafa	#141416	Light background variant
bg-dark-bg-very-light	bg-subtle	#f5f5f5	#101014	Very subtle backgrounds
bg-dark-active	bg-interact	#d1d5db	#2a2a2c	Interactive/active states
bg-dark-hover-alt	bg-hover-alt	#e5e7eb	#2a2a2d	Alternative hover state
bg-dark-pressed	bg-pressed	#d1d5db	#1a1a1c	Pressed/clicked state
—	bg-elevated	#ffffff	#0e0e10	Elevated surfaces (new semantic)

Border Classes

Old Class	New Class	Light Value	Dark Value	Usage
border-dark-border	border-edge	#e5e7eb	#303032	Standard borders
border-dark-border-panel	border-edge-panel	#d1d5db	#222224	Panel borders
border-dark-border-light	border-edge-subtle	#f3f4f6	#5a5a5d	Subtle borders
border-dark-border-medium	border-edge-medium	#d1d5db	#373739	Medium emphasis borders
border-dark-border-hover	border-edge-hover	#d1d5db	#434345	Hover state borders
border-dark-border-active	border-edge-active	#9ca3af	#2d2d30	Active state borders

Text Classes

Old Class	New Class	Light Value	Dark Value	Usage
text-white	text-foreground	#18181b	#fafafa	Primary text
text-gray-300	text-foreground-secondary	#334155	#d1d5db	Secondary descriptive text
text-gray-400	text-muted-foreground	#71717a	#9ca3af	Muted/secondary text
text-gray-500	text-foreground-subtle	#94a3b8	#6b7280	Subtle/placeholder text
text-dark-text-secondary	text-muted-foreground	#71717a	#9ca3af	Secondary text (legacy)

Scrollbar Styling

Element	CSS Variable	Light Value	Dark Value
Scrollbar thumb	--scrollbar-thumb	#c1c1c3	#434345
Scrollbar thumb hover	--scrollbar-thumb-hover	#a1a1a3	#5a5a5d
Scrollbar track	--scrollbar-track	#f3f4f6	#18181b

Core shadcn/ui Variables (Also Updated)

Variable	Light Value	Dark Value	Usage
--background	#ffffff	#09090b	App background
--foreground	#18181b	#fafafa	App foreground text
--card	#ffffff	#18181b	Card backgrounds
--muted	#f4f4f5	#27272a	Muted backgrounds
--sidebar	#f9f9f9	#18181b	Sidebar background
--input	#e4e4e7	#ffffff26	Input borders

Usage Examples

Before:

<div className="bg-dark-bg border border-dark-border text-white hover:bg-dark-hover">
  <p className="text-gray-400">Description</p>
</div>

After:

<div className="bg-canvas border border-edge text-foreground hover:bg-hover">
  <p className="text-muted-foreground">Description</p>
</div>

Tabs Example:

<TabsList className="bg-button border border-edge-medium">
  <TabsTrigger className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium">
    General
  </TabsTrigger>
</TabsList>

Notes

• Chart widgets (CPU, Memory, Disk) retain their current styling for data visualization
• Light mode color palette designed for accessibility and readability
• Dark mode maintains its existing visual appearance

Testing Suggestions

• Verify theme switching in Settings works correctly
• Test with system theme preference (light/dark/auto)
• Check terminal rendering in both themes
• Review mobile keyboard appearance in light mode
• Test navigation and dialogs in both themes

---

Co-Authored-By: Claude Sonnet 4.5 [email protected]

[PeetMcK]

I have a problem staying focued on dark mode ... probably because I can't see worth a crap after 40. Please let me know if i missed anything or you'd like anything tweeked.

[LukeGus]

Looks decent in light mode, however, the regular dark mode color scheme was mostly messed up.

As you can see in the image, some background colors were changed, borders were messed up, etc. This exists across many of the components

Another thing is that a light mode terminal theme option should be added. Right now, it defaults to this:

However, when in light mode, there should be a new terminal option for Termix Light Default that uses the new light mode background color. Then the Termix Default should be renamed to Termix Dark Default.

[PeetMcK]

Boy did I ever come at that wrong. I could have walked into an unlocked front door, but decided it would be easier to dig a tunel from the street into the basement ¯\_(ツ)_/¯ ...

All that said, this is probably feature complete. Its possible I missed something or didn't dig deep enoug into a sub menu to find something that did't quite work. (60f6243 turns out to be just such a miss).

let me know if you have any questions or need a change.

[LukeGus]

Lighmode is good, dark mode still needs much improvement.

Here is what Termix currently looks like in Dark mode:

The color scheme is consistent, visible, and looks nice. Heres the new dark mode:

The colors don't match, the app bg color was changed, the sidebars are oddly light, and many other stuff was changed too like this:

Which now uses a completely different background color that's never used anywhere else in the app.

[LukeGus]

Also, i've changed your PR to use the latest dev-x.x.x version. This includes several new features like RBAC/Docker, which all added new components. Would you mind updating the new files, and resolving some of the merge conflicts that came with it?

[PeetMcK]

@LukeGus I've addressed the visual inconsistancies. If you find any more feel free to apply your prefered colors to the variables/classes. Virtually all of the inconsistencies were from poor conversions of oklch() conversions to hex.

The PR's been rebased onto Termix-SSH:dev-1.10.0, and while i didn't find anything that stood out as an immediat issue all other added features need testing and it absolutely should have another set of eyes or two to ensure there are no visual regressions.