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.
Rebased onto dev-1.10.0 - This branch is now a single squashed commit cleanly rebased onto the latest upstream development branch.
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
Scrollbar Theming
Theme-Aware Scrollbars: Updated thin-scrollbar class to use CSS variables that adapt to light/dark mode
Consistent Application: Applied thin-scrollbar to all overflow elements across ~84 files for unified appearance
CodeMirror Support: Added inline scrollbar styling to CodeMirror editors using scrollbarWidth and scrollbarColor CSS properties
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
Component Updates
Updated components across desktop and mobile to use semantic CSS classes instead of hard-coded dark mode values:
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.
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.
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.
Looks decent in light mode, however, the regular dark mode color scheme was mostly messed up.
<img width="1911" height="915" alt="image" src="https://github.com/user-attachments/assets/211253e3-5d3d-4d22-b58b-531482d28cfd" />
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:
<img width="299" height="111" alt="image" src="https://github.com/user-attachments/assets/6131e03f-67bb-4aa7-8bf7-53d055adb65a" />
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.
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 ¯\_(ツ)_/¯ ...
let me know if you have any questions or need a change.
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. (https://github.com/Termix-SSH/Termix/pull/450/commits/60f624341a2156eb8fa40607c144774e766eba0e turns out to be just such a miss).
let me know if you have any questions or need a change.
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.
Lighmode is good, dark mode still needs much improvement.
Here is what Termix currently looks like in Dark mode:
<img width="3840" height="1918" alt="Screenshot 2025-12-19 at 20-16-12 Termix" src="https://github.com/user-attachments/assets/f67b0bfc-209a-42de-b03c-af395bca2bf5" />
The color scheme is consistent, visible, and looks nice. Heres the new dark mode:
<img width="3840" height="1918" alt="Screenshot 2025-12-19 at 20-17-42 Termix" src="https://github.com/user-attachments/assets/e826d473-aa28-49e9-8fa5-e8384699d9e1" />
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:
<img width="590" height="86" alt="image" src="https://github.com/user-attachments/assets/8461f8b9-29e8-4edf-824d-7d681e7ba080" />
Which now uses a completely different background color that's never used anywhere else in the app.
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?
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?
@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.
@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.
Thanks for fixing the merge issues. I'll check it out later today. I just finished updating thousands of hardcoded text into translations, which may cause some merge issues, but I can sort that out easily. I should also be able to take care of any visual issues. Thanks for the help!
Thanks for fixing the merge issues. I'll check it out later today. I just finished updating thousands of hardcoded text into translations, which may cause some merge issues, but I can sort that out easily. I should also be able to take care of any visual issues. Thanks for the help!
@LukeGus No worries. I guess I spent a bunch of time rebasing to the wrong commit, then to the right one. In the future, were would you like PR's to be based to have the best chance to avoid the extra lift and possible conflicts?
@LukeGus No worries. I guess I spent a bunch of time rebasing to the wrong commit, then to the right one. In the future, were would you like PR's to be based to have the best chance to avoid the extra lift and possible conflicts?
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
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.
Rebased onto
dev-1.10.0- This branch is now a single squashed commit cleanly rebased onto the latest upstream development branch.What's Changed
Theme Infrastructure
index.csswith separate definitions for light (:root) and dark (.dark) modestermixDarkandtermixLightvariants with optimized ANSI color palettes for each modeScrollbar Theming
thin-scrollbarclass to use CSS variables that adapt to light/dark modethin-scrollbarto all overflow elements across ~84 files for unified appearancescrollbarWidthandscrollbarColorCSS properties--scrollbar-thumb#c1c1c3#434345--scrollbar-thumb-hover#a1a1a3#5a5a5d--scrollbar-track#f3f4f6#18181bComponent Updates
Updated components across desktop and mobile to use semantic CSS classes instead of hard-coded dark mode values:
Desktop
Mobile
kb-light-theme.cssfor mobile keyboardUI Components
Technical Approach
bg-dark-*,border-dark-*) with semantic alternatives (bg-canvas,bg-elevated,border-edge)useThemehook for runtime theme detectionwindow.matchMedia("(prefers-color-scheme: dark)")Class Migration Reference
Background Classes
bg-dark-bgbg-canvas#fcfcfc#18181bbg-dark-bg-darkerbg-canvas#fcfcfc#18181bbg-dark-bg-darkestbg-deepest#e5e7eb#09090bbg-dark-bg-panelbg-surface#f3f4f6#1b1b1ebg-dark-bg-inputbg-field#ffffff#222225bg-dark-bg-buttonbg-button#f3f4f6#23232abg-dark-bg-activebg-active#e5e7eb#1d1d1fbg-dark-bg-headerbg-header#eeeeef#131316bg-dark-hoverbg-hover#f3f4f6#2d2d30bg-dark-bg-panel-hoverbg-surface-hover#e5e7eb#232327bg-dark-bg-lightbg-light#fafafa#141416bg-dark-bg-very-lightbg-subtle#f5f5f5#101014bg-dark-activebg-interact#d1d5db#2a2a2cbg-dark-hover-altbg-hover-alt#e5e7eb#2a2a2dbg-dark-pressedbg-pressed#d1d5db#1a1a1cbg-elevated#ffffff#0e0e10Border Classes
border-dark-borderborder-edge#e5e7eb#303032border-dark-border-panelborder-edge-panel#d1d5db#222224border-dark-border-lightborder-edge-subtle#f3f4f6#5a5a5dborder-dark-border-mediumborder-edge-medium#d1d5db#373739border-dark-border-hoverborder-edge-hover#d1d5db#434345border-dark-border-activeborder-edge-active#9ca3af#2d2d30Text Classes
text-whitetext-foreground#18181b#fafafatext-gray-300text-foreground-secondary#334155#d1d5dbtext-gray-400text-muted-foreground#71717a#9ca3aftext-gray-500text-foreground-subtle#94a3b8#6b7280text-dark-text-secondarytext-muted-foreground#71717a#9ca3afCore shadcn/ui Variables (Also Updated)
--background#ffffff#09090b--foreground#18181b#fafafa--card#ffffff#18181b--muted#f4f4f5#27272a--sidebar#f9f9f9#18181b--input#e4e4e7#ffffff26Usage Examples
Before:
After:
Tabs Example:
Notes
upstream/dev-1.10.0as a single squashed commitTesting Suggestions
Co-Authored-By: Claude [email protected]
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.
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.
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. (https://github.com/Termix-SSH/Termix/pull/450/commits/60f624341a2156eb8fa40607c144774e766eba0e turns out to be just such a miss).
let me know if you have any questions or need a change.
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.
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?
@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.
Thanks for fixing the merge issues. I'll check it out later today. I just finished updating thousands of hardcoded text into translations, which may cause some merge issues, but I can sort that out easily. I should also be able to take care of any visual issues. Thanks for the help!
@LukeGus No worries. I guess I spent a bunch of time rebasing to the wrong commit, then to the right one. In the future, were would you like PR's to be based to have the best chance to avoid the extra lift and possible conflicts?