dennii/Termix
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 22 Wiki Activity

feat: Complete light mode implementation with semantic theme system (#450)

Browse Source 
- Add comprehensive light/dark mode CSS variables with semantic naming
- Implement theme-aware scrollbars using CSS variables
- Add light mode backgrounds: --bg-base, --bg-elevated, --bg-surface, etc.
- Add theme-aware borders: --border-base, --border-panel, --border-subtle
- Add semantic text colors: --foreground-secondary, --foreground-subtle
- Convert oklch colors to hex for better compatibility
- Add theme awareness to CodeMirror editors
- Update dark mode colors for consistency (background, sidebar, card, muted, input)
- Add Tailwind color mappings for semantic classes

Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com>
This commit was merged in pull request #450.
This commit is contained in:
Peet McKinney
2025-12-23 15:35:49 -07:00
committed by GitHub
parent 186ba34c66
commit e6a70e3a02
84 changed files with 1084 additions and 664 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/ui/desktop/navigation/hosts/Host.tsx
View File

@@ -147,7 +147,7 @@ export function Host({ host: initialHost }: HostProps): React.ReactElement {
{host.enableTerminal && (
<Button
variant="outline"
className="!px-2 border-1 border-dark-border"
className="!px-2 border-1 border-edge"
onClick={handleTerminalClick}
>
<Terminal />
@@ -158,7 +158,7 @@ export function Host({ host: initialHost }: HostProps): React.ReactElement {
<DropdownMenuTrigger asChild>
<Button
variant="outline"
className={`!px-2 border-1 border-dark-border ${
className={`!px-2 border-1 border-edge ${
host.enableTerminal ? "rounded-tl-none rounded-bl-none" : ""
}`}
>
@@ -169,14 +169,14 @@ export function Host({ host: initialHost }: HostProps): React.ReactElement {
<DropdownMenuContent
align="start"
side="right"
className="w-56 bg-dark-bg border-dark-border text-white"
className="w-56 bg-canvas border-edge text-foreground"
>
{shouldShowMetrics && (
<DropdownMenuItem
onClick={() =>
addTab({ type: "server", title, hostConfig: host })
}
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-dark-hover text-gray-300"
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-hover text-foreground-secondary"
>
<Server className="h-4 w-4" />
<span className="flex-1">{t('hosts.openServerStats')}</span>
@@ -187,7 +187,7 @@ export function Host({ host: initialHost }: HostProps): React.ReactElement {
onClick={() =>
addTab({ type: "file_manager", title, hostConfig: host })
}
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-dark-hover text-gray-300"
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-hover text-foreground-secondary"
>
<FolderOpen className="h-4 w-4" />
<span className="flex-1">{t('hosts.openFileManager')}</span>
@@ -198,7 +198,7 @@ export function Host({ host: initialHost }: HostProps): React.ReactElement {
onClick={() =>
addTab({ type: "tunnel", title, hostConfig: host })
}
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-dark-hover text-gray-300"
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-hover text-foreground-secondary"
>
<ArrowDownUp className="h-4 w-4" />
<span className="flex-1">{t('hosts.openTunnels')}</span>
@@ -209,7 +209,7 @@ export function Host({ host: initialHost }: HostProps): React.ReactElement {
onClick={() =>
addTab({ type: "docker", title, hostConfig: host })
}
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-dark-hover text-gray-300"
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-hover text-foreground-secondary"
>
<Container className="h-4 w-4" />
<span className="flex-1">{t('hosts.openDocker')}</span>
@@ -224,7 +224,7 @@ export function Host({ host: initialHost }: HostProps): React.ReactElement {
initialTab: "add_host",
})
}
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-dark-hover text-gray-300"
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-hover text-foreground-secondary"
>
<Pencil className="h-4 w-4" />
<span className="flex-1">{t('common.edit')}</span>
@@ -238,7 +238,7 @@ export function Host({ host: initialHost }: HostProps): React.ReactElement {
{tags.map((tag: string) => (
<div
key={tag}
className="bg-dark-bg border-1 border-dark-border pl-2 pr-2 rounded-[10px]"
className="bg-canvas border-1 border-edge pl-2 pr-2 rounded-[10px]"
>
<p className="text-sm">{tag}</p>
</div>