chore: migrate all to use the new theme system

This commit is contained in:
LukeGus
2025-12-26 02:24:11 -06:00
parent 94d87ff406
commit 8f9f63c4ae
29 changed files with 258 additions and 115 deletions

View File

@@ -268,7 +268,7 @@ export function HostAuthenticationSection({
type="button"
variant="ghost"
size="sm"
className="w-full justify-start text-left rounded-md px-2 py-1.5 bg-canvas text-foreground hover:bg-white/15 focus:bg-white/20 focus:outline-none"
className="w-full justify-start text-left rounded-md px-2 py-1.5 bg-canvas text-foreground hover:bg-surface-hover focus:bg-surface-hover focus:outline-none"
onClick={() => {
field.onChange(opt.value);
setKeyTypeDropdownOpen(false);

View File

@@ -226,7 +226,7 @@ export function HostGeneralTab({
type="button"
variant="ghost"
size="sm"
className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-white/15 focus:bg-white/20 focus:outline-none"
className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-surface-hover focus:bg-surface-hover focus:outline-none"
onClick={() => handleFolderClick(folder)}
>
{folder}
@@ -250,12 +250,12 @@ export function HostGeneralTab({
{field.value.map((tag: string, idx: number) => (
<span
key={tag + idx}
className="flex items-center bg-gray-200 text-gray-800 rounded-full px-2 py-0.5 text-xs"
className="flex items-center bg-surface text-foreground rounded-full px-2 py-0.5 text-xs"
>
{tag}
<button
type="button"
className="ml-1 text-gray-500 hover:text-red-500 focus:outline-none"
className="ml-1 text-foreground-subtle hover:text-red-500 focus:outline-none"
onClick={() => {
const newTags = field.value.filter(
(_: string, i: number) => i !== idx,

View File

@@ -106,6 +106,119 @@ export function HostTerminalTab({
)}
/>
<FormField
control={control}
name="terminalConfig.theme"
render={({ field }) => (
<FormItem>
<FormLabel>{t("hosts.terminalTheme")}</FormLabel>
<Select onValueChange={field.onChange} value={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder={t("hosts.selectTheme")} />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="termix">Termix Default</SelectItem>
<SelectItem value="termixDark">Termix Dark</SelectItem>
<SelectItem value="termixLight">Termix Light</SelectItem>
<SelectItem value="dracula">Dracula</SelectItem>
<SelectItem value="monokai">Monokai</SelectItem>
<SelectItem value="nord">Nord</SelectItem>
<SelectItem value="gruvboxDark">Gruvbox Dark</SelectItem>
<SelectItem value="gruvboxLight">Gruvbox Light</SelectItem>
<SelectItem value="solarizedDark">
Solarized Dark
</SelectItem>
<SelectItem value="solarizedLight">
Solarized Light
</SelectItem>
<SelectItem value="oneDark">One Dark</SelectItem>
<SelectItem value="tokyoNight">Tokyo Night</SelectItem>
<SelectItem value="ayuDark">Ayu Dark</SelectItem>
<SelectItem value="ayuLight">Ayu Light</SelectItem>
<SelectItem value="materialTheme">
Material Theme
</SelectItem>
<SelectItem value="palenight">Palenight</SelectItem>
<SelectItem value="oceanicNext">Oceanic Next</SelectItem>
<SelectItem value="nightOwl">Night Owl</SelectItem>
<SelectItem value="synthwave84">Synthwave '84</SelectItem>
<SelectItem value="cobalt2">Cobalt2</SelectItem>
<SelectItem value="snazzy">Snazzy</SelectItem>
<SelectItem value="atomOneDark">Atom One Dark</SelectItem>
<SelectItem value="catppuccinMocha">
Catppuccin Mocha
</SelectItem>
</SelectContent>
</Select>
<FormDescription>
{t("hosts.chooseTerminalTheme")}
</FormDescription>
</FormItem>
)}
/>
<FormField
control={control}
name="terminalConfig.fontFamily"
render={({ field }) => (
<FormItem>
<FormLabel>{t("hosts.terminalFont")}</FormLabel>
<Select onValueChange={field.onChange} value={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder={t("hosts.selectFont")} />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="Caskaydia Cove Nerd Font Mono">
Caskaydia Cove Nerd Font Mono
</SelectItem>
<SelectItem value="JetBrains Mono">
JetBrains Mono
</SelectItem>
<SelectItem value="Fira Code">Fira Code</SelectItem>
<SelectItem value="Cascadia Code">Cascadia Code</SelectItem>
<SelectItem value="Source Code Pro">
Source Code Pro
</SelectItem>
<SelectItem value="SF Mono">SF Mono</SelectItem>
<SelectItem value="Consolas">Consolas</SelectItem>
<SelectItem value="Monaco">Monaco</SelectItem>
</SelectContent>
</Select>
<FormDescription>
{t("hosts.chooseTerminalFont")}
</FormDescription>
</FormItem>
)}
/>
<FormField
control={control}
name="terminalConfig.fontSize"
render={({ field }) => (
<FormItem>
<FormLabel>
{t("hosts.fontSizeValue", {
value: field.value,
})}
</FormLabel>
<FormControl>
<Slider
min={8}
max={24}
step={1}
value={[field.value]}
onValueChange={([value]) => field.onChange(value)}
/>
</FormControl>
<FormDescription>{t("hosts.adjustFontSize")}</FormDescription>
</FormItem>
)}
/>
<FormField
control={control}
name="terminalConfig.cursorStyle"

View File

@@ -314,7 +314,7 @@ export function HostTunnelTab({
type="button"
variant="ghost"
size="sm"
className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-white/15 focus:bg-white/20 focus:outline-none"
className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-surface-hover focus:bg-surface-hover focus:outline-none"
onClick={() =>
handleSshConfigClick(
config,