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

12
src/ui/mobile/MobileApp.tsx
View File

@@ -124,7 +124,7 @@ const AppContent: FC = () => {
if (authLoading) {
return (
<div className="h-screen w-screen flex items-center justify-center bg-dark-bg">
<div className="h-screen w-screen flex items-center justify-center bg-canvas">
<div className="text-center">
<div className="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4" />
<p className="text-muted-foreground">{t("common.loading")}</p>
@@ -135,7 +135,7 @@ const AppContent: FC = () => {
if (!isAuthenticated || isReactNativeWebView()) {
return (
<div className="h-screen w-screen flex items-center justify-center bg-dark-bg p-4">
<div className="h-screen w-screen flex items-center justify-center bg-canvas p-4">
<Auth
setLoggedIn={setIsAuthenticated}
setIsAdmin={setIsAdmin}
@@ -152,12 +152,12 @@ const AppContent: FC = () => {
}
return (
<div className="h-screen w-screen flex flex-col bg-dark-bg-darkest overflow-y-hidden overflow-x-hidden relative">
<div className="h-screen w-screen flex flex-col bg-deepest overflow-y-hidden overflow-x-hidden relative">
<div className="flex-1 min-h-0 relative">
{tabs.map((tab) => (
<div
key={tab.id}
className={`absolute inset-0 mb-2 ${tab.id === currentTab ? "visible" : "invisible"} ${ready ? "opacity-100" : "opacity-0"}`}
className={`absolute inset-0 mb-2 bg-elevated ${tab.id === currentTab ? "visible" : "invisible"} ${ready ? "opacity-100" : "opacity-0"}`}
>
<Terminal
ref={tab.terminalRef}
@@ -167,11 +167,11 @@ const AppContent: FC = () => {
</div>
))}
{tabs.length === 0 && (
<div className="flex flex-col items-center justify-center h-full text-white gap-3 px-4 text-center">
<div className="flex flex-col items-center justify-center h-full text-foreground gap-3 px-4 text-center">
<h1 className="text-lg font-semibold">
{t("mobile.selectHostToStart")}
</h1>
<p className="text-sm text-gray-300 max-w-xs">
<p className="text-sm text-foreground-secondary max-w-xs">
{t("mobile.limitedSupportMessage")}
</p>
<button

8
src/ui/mobile/apps/navigation/BottomNavbar.tsx
View File

@@ -11,7 +11,7 @@ export function BottomNavbar({ onSidebarOpenClick }: MenuProps) {
const { tabs, currentTab, setCurrentTab, removeTab } = useTabs();
return (
<div className="w-full h-[80px] bg-dark-bg flex items-center p-2 gap-2">
<div className="w-full h-[80px] bg-canvas flex items-center p-2 gap-2">
<Button
className="w-[40px] h-[40px] flex-shrink-0"
variant="outline"
@@ -30,8 +30,8 @@ export function BottomNavbar({ onSidebarOpenClick }: MenuProps) {
<Button
variant="outline"
className={cn(
"h-10 rounded-r-none !px-3 border-1 border-dark-border",
tab.id === currentTab && "!bg-dark-bg-darkest !text-white",
"h-10 rounded-r-none !px-3 border-1 border-edge",
tab.id === currentTab && "!bg-deepest !text-foreground",
)}
onClick={() => setCurrentTab(tab.id)}
>
@@ -40,7 +40,7 @@ export function BottomNavbar({ onSidebarOpenClick }: MenuProps) {
</Button>
<Button
variant="outline"
className="h-10 rounded-l-none !px-2 border-1 border-dark-border"
className="h-10 rounded-l-none !px-2 border-1 border-edge"
onClick={() => removeTab(tab.id)}
>
<X className="h-4 w-4" />

6
src/ui/mobile/apps/navigation/LeftSidebar.tsx
View File

@@ -181,7 +181,7 @@ export function LeftSidebar({
<SidebarProvider open={isSidebarOpen}>
<Sidebar>
<SidebarHeader>
<SidebarGroupLabel className="text-lg font-bold text-white">
<SidebarGroupLabel className="text-lg font-bold text-foreground">
Termix
<Button
variant="outline"
@@ -194,12 +194,12 @@ export function LeftSidebar({
</SidebarHeader>
<Separator />
<SidebarContent className="px-2 py-2">
<div className="!bg-dark-bg-input rounded-lg mb-2">
<div className="!bg-field rounded-lg mb-2">
<Input
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder={t("placeholders.searchHostsAny")}
className="w-full h-8 text-sm border-2 !bg-dark-bg-input border-dark-border rounded-md"
className="w-full h-8 text-sm border-2 !bg-field border-edge rounded-md"
autoComplete="off"
/>
</div>

4
src/ui/mobile/apps/navigation/hosts/FolderCard.tsx
View File

@@ -53,9 +53,9 @@ export function FolderCard({
};
return (
<div className="bg-dark-bg-darker border-2 border-dark-border rounded-lg overflow-hidden p-0 m-0">
<div className="bg-elevated border-2 border-edge rounded-lg overflow-hidden p-0 m-0">
<div
className={`px-4 py-3 relative ${isExpanded ? "border-b-2" : ""} bg-dark-bg-header`}
className={`px-4 py-3 relative ${isExpanded ? "border-b-2" : ""} bg-header`}
>
<div className="flex gap-2 pr-10">
<div className="flex-shrink-0 flex items-center">

4
src/ui/mobile/apps/navigation/hosts/Host.tsx
View File

@@ -75,7 +75,7 @@ export function Host({ host, onHostConnect }: HostProps): React.ReactElement {
{host.enableTerminal && (
<Button
variant="outline"
className="!px-2 border-1 w-[60px] border-dark-border"
className="!px-2 border-1 w-[60px] border-edge"
onClick={handleTerminalClick}
>
<Terminal />
@@ -88,7 +88,7 @@ export function Host({ host, onHostConnect }: 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>

32
src/ui/mobile/apps/terminal/Terminal.tsx
View File

@@ -12,6 +12,8 @@ import { Unicode11Addon } from "@xterm/addon-unicode11";
import { WebLinksAddon } from "@xterm/addon-web-links";
import { useTranslation } from "react-i18next";
import { isElectron, getCookie } from "@/ui/main-axios.ts";
import { useTheme } from "@/components/theme-provider";
import { TERMINAL_THEMES } from "@/constants/terminal-themes";
interface HostConfig {
id?: number;
@@ -45,6 +47,7 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
function SSHTerminal({ hostConfig, isVisible }, ref) {
const { t } = useTranslation();
const { instance: terminal, ref: xtermRef } = useXTerm();
const { theme: appTheme } = useTheme();
const fitAddonRef = useRef<FitAddon | null>(null);
const webSocketRef = useRef<WebSocket | null>(null);
const resizeTimeout = useRef<NodeJS.Timeout | null>(null);
@@ -65,6 +68,13 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
const notifyTimerRef = useRef<NodeJS.Timeout | null>(null);
const DEBOUNCE_MS = 140;
// Auto-switch terminal theme based on app theme
const isDarkMode = appTheme === "dark" ||
(appTheme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
const themeColors = isDarkMode
? TERMINAL_THEMES.termixDark.colors
: TERMINAL_THEMES.termixLight.colors;
useEffect(() => {
isVisibleRef.current = isVisible;
}, [isVisible]);
@@ -270,7 +280,7 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
fontSize: 14,
fontFamily:
'"Caskaydia Cove Nerd Font Mono", "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
theme: { background: "#09090b", foreground: "#f7f7f7" },
theme: themeColors,
allowTransparency: true,
convertEol: true,
windowsMode: false,
@@ -419,7 +429,7 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
setIsReady(false);
isFittingRef.current = false;
};
}, [xtermRef, terminal, hostConfig, isAuthenticated]);
}, [xtermRef, terminal, hostConfig, isAuthenticated, isDarkMode]);
useEffect(() => {
if (!isVisible || !isReady || !fitAddonRef.current || !terminal) {
@@ -477,20 +487,32 @@ style.innerHTML = `
font-display: swap;
}
/* Light theme scrollbars */
.xterm .xterm-viewport::-webkit-scrollbar {
width: 8px;
background: transparent;
}
.xterm .xterm-viewport::-webkit-scrollbar-thumb {
background: rgba(180,180,180,0.7);
background: rgba(0,0,0,0.3);
border-radius: 4px;
}
.xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
background: rgba(120,120,120,0.9);
background: rgba(0,0,0,0.5);
}
.xterm .xterm-viewport {
scrollbar-width: thin;
scrollbar-color: rgba(180,180,180,0.7) transparent;
scrollbar-color: rgba(0,0,0,0.3) transparent;
}
/* Dark theme scrollbars */
.dark .xterm .xterm-viewport::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.3);
}
.dark .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.5);
}
.dark .xterm .xterm-viewport {
scrollbar-color: rgba(255,255,255,0.3) transparent;
}
.xterm {

8
src/ui/mobile/apps/terminal/TerminalKeyboard.tsx
View File

@@ -2,6 +2,8 @@ import React, { useState, useCallback, useEffect } from "react";
import Keyboard from "react-simple-keyboard";
import "react-simple-keyboard/build/css/index.css";
import "./kb-dark-theme.css";
import "./kb-light-theme.css";
import { useTheme } from "@/components/theme-provider";
interface TerminalKeyboardProps {
onSendInput: (input: string) => void;
@@ -15,6 +17,10 @@ export function TerminalKeyboard({
const [layoutName, setLayoutName] = useState("default");
const [isCtrl, setIsCtrl] = useState(false);
const [isAlt, setIsAlt] = useState(false);
const { theme: appTheme } = useTheme();
const isDarkMode = appTheme === "dark" ||
(appTheme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
useEffect(() => {
if (onLayoutChange) {
@@ -195,7 +201,7 @@ export function TerminalKeyboard({
"{pgUp}": "pgUp",
"{pgDn}": "pgDn",
}}
theme={"hg-theme-default dark-theme"}
theme={`hg-theme-default ${isDarkMode ? "dark-theme" : "light-theme"}`}
useTouchEvents={true}
disableButtonHold={true}
buttonTheme={buttonTheme}

29
src/ui/mobile/apps/terminal/kb-light-theme.css Normal file
View File

@@ -0,0 +1,29 @@
.simple-keyboard.light-theme {
background-color: #f3f4f6;
border-radius: 0;
}
.simple-keyboard.light-theme .hg-button {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background: #ffffff;
color: #18181b;
border-bottom-color: #d1d5db;
border: 1px solid #e5e7eb;
}
.simple-keyboard.light-theme .hg-button:active {
background: #e5e7eb;
color: #18181b;
}
#root .simple-keyboard.light-theme + .simple-keyboard-preview {
background: #e5e7eb;
}
.light-theme .hg-button.key-active {
background: #d1d5db;
color: #18181b;
}

8
src/ui/mobile/authentication/Auth.tsx
View File

@@ -562,7 +562,7 @@ export function Auth({
const Spinner = (
<svg
className="animate-spin mr-2 h-4 w-4 text-white inline-block"
className="animate-spin mr-2 h-4 w-4 text-foreground inline-block"
viewBox="0 0 24 24"
>
<circle
@@ -585,7 +585,7 @@ export function Auth({
if (isReactNativeWebView() && mobileAuthSuccess) {
return (
<div
className={`w-full max-w-md flex flex-col bg-dark-bg overflow-y-auto my-2 ${className || ""}`}
className={`w-full max-w-md flex flex-col bg-canvas overflow-y-auto thin-scrollbar my-2 ${className || ""}`}
style={{ maxHeight: "calc(100vh - 1rem)" }}
{...props}
>
@@ -620,7 +620,7 @@ export function Auth({
return (
<div
className={`w-full max-w-md flex flex-col bg-dark-bg overflow-y-auto my-2 ${className || ""}`}
className={`w-full max-w-md flex flex-col bg-canvas overflow-y-auto thin-scrollbar my-2 ${className || ""}`}
style={{ maxHeight: "calc(100vh - 1rem)" }}
{...props}
>
@@ -1094,7 +1094,7 @@ export function Auth({
</form>
)}
<div className="mt-6 pt-4 border-t border-dark-border">
<div className="mt-6 pt-4 border-t border-edge">
<div className="flex items-center justify-between">
<div>
<Label className="text-sm text-muted-foreground">

8
src/ui/mobile/navigation/BottomNavbar.tsx
View File

@@ -11,7 +11,7 @@ export function BottomNavbar({ onSidebarOpenClick }: MenuProps) {
const { tabs, currentTab, setCurrentTab, removeTab } = useTabs();
return (
<div className="w-full h-[50px] bg-dark-bg items-center p-1">
<div className="w-full h-[50px] bg-canvas items-center p-1">
<div className="flex gap-2 !mb-0.5">
<Button
className="w-[40px] h-[40px] flex-shrink-0"
@@ -31,8 +31,8 @@ export function BottomNavbar({ onSidebarOpenClick }: MenuProps) {
<Button
variant="outline"
className={cn(
"h-10 rounded-r-none !px-3 border-1 border-dark-border",
tab.id === currentTab && "!bg-dark-bg-darkest !text-white",
"h-10 rounded-r-none !px-3 border-1 border-edge",
tab.id === currentTab && "!bg-deepest !text-foreground",
)}
onClick={() => setCurrentTab(tab.id)}
>
@@ -41,7 +41,7 @@ export function BottomNavbar({ onSidebarOpenClick }: MenuProps) {
</Button>
<Button
variant="outline"
className="h-10 rounded-l-none !px-2 border-1 border-dark-border"
className="h-10 rounded-l-none !px-2 border-1 border-edge"
onClick={() => removeTab(tab.id)}
>
<X className="h-4 w-4" />

6
src/ui/mobile/navigation/LeftSidebar.tsx
View File

@@ -181,7 +181,7 @@ export function LeftSidebar({
<SidebarProvider open={isSidebarOpen}>
<Sidebar>
<SidebarHeader>
<SidebarGroupLabel className="text-lg font-bold text-white">
<SidebarGroupLabel className="text-lg font-bold text-foreground">
Termix
<Button
variant="outline"
@@ -195,12 +195,12 @@ export function LeftSidebar({
<Separator />
<SidebarContent>
<SidebarGroup className="flex flex-col gap-y-2">
<div className="!bg-dark-bg-input rounded-lg">
<div className="!bg-field rounded-lg">
<Input
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder={t("placeholders.searchHostsAny")}
className="w-full h-8 text-sm border-2 !bg-dark-bg-input border-dark-border rounded-md"
className="w-full h-8 text-sm border-2 !bg-field border-edge rounded-md"
autoComplete="off"
/>
</div>

4
src/ui/mobile/navigation/hosts/FolderCard.tsx
View File

@@ -53,9 +53,9 @@ export function FolderCard({
};
return (
<div className="bg-dark-bg-darker border-2 border-dark-border rounded-lg overflow-hidden p-0 m-0">
<div className="bg-elevated border-2 border-edge rounded-lg overflow-hidden p-0 m-0">
<div
className={`px-4 py-3 relative ${isExpanded ? "border-b-2" : ""} bg-dark-bg-header`}
className={`px-4 py-3 relative ${isExpanded ? "border-b-2" : ""} bg-header`}
>
<div className="flex gap-2 pr-10">
<div className="flex-shrink-0 flex items-center">

4
src/ui/mobile/navigation/hosts/Host.tsx
View File

@@ -95,7 +95,7 @@ export function Host({ host, onHostConnect }: HostProps): React.ReactElement {
{host.enableTerminal && (
<Button
variant="outline"
className="!px-2 border-1 w-[60px] border-dark-border"
className="!px-2 border-1 w-[60px] border-edge"
onClick={handleTerminalClick}
>
<Terminal />
@@ -108,7 +108,7 @@ export function Host({ host, onHostConnect }: 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>