Superminaren
/
kvm
mirror of https://github.com/jetkvm/kvm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Settings appearance page

This commit is contained in:
Marc Brooks 2025-10-13 20:36:48 -05:00
parent 0dcf56ef18
commit f2e665126a
No known key found for this signature in database
GPG Key ID: 583A6AF2D6AE1DC6
2 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui/localization/messages/en.json
View File

@ -591,5 +591,13 @@
"advanced_troubleshooting_mode_title": "Troubleshooting Mode", "advanced_troubleshooting_mode_title": "Troubleshooting Mode",
"advanced_update_ssh_key_button": "Update SSH Key", "advanced_update_ssh_key_button": "Update SSH Key",
"advanced_usb_emulation_description": "Control the USB emulation state", "advanced_usb_emulation_description": "Control the USB emulation state",
"advanced_usb_emulation_title": "USB Emulation" "advanced_usb_emulation_title": "USB Emulation",
"appearance_description": "Choose your preferred color theme",
"appearance_page_description": "Customize the look and feel of your JetKVM interface",
"appearance_theme_dark": "Dark",
"appearance_theme_light": "Light",
"appearance_theme_system": "System",
"appearance_theme": "Theme",
"appearance_title": "Appearance"
} }

24
ui/src/routes/devices.$id.settings.appearance.tsx
View File

@ -1,9 +1,9 @@
import { useCallback, useState } from "react"; import { useCallback, useState } from "react";
import { SelectMenuBasic } from "@components/SelectMenuBasic";
import { SettingsItem } from "@components/SettingsItem"; import { SettingsItem } from "@components/SettingsItem";
import { SettingsPageHeader } from "@components/SettingsPageheader";
import { SettingsPageHeader } from "../components/SettingsPageheader"; import { m } from "@localizations/messages.js";
import { SelectMenuBasic } from "../components/SelectMenuBasic";
export default function SettingsAppearanceRoute() { export default function SettingsAppearanceRoute() {
const [currentTheme, setCurrentTheme] = useState(() => { const [currentTheme, setCurrentTheme] = useState(() => {
@ -28,22 +28,24 @@ export default function SettingsAppearanceRoute() {
} }
}, []); }, []);
const themeOptions = [
{ value: "system", label: m.appearance_theme_system() },
{ value: "light", label: m.appearance_theme_light() },
{ value: "dark", label: m.appearance_theme_dark() },
];
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<SettingsPageHeader <SettingsPageHeader
title="Appearance" title={m.appearance_title()}
description="Customize the look and feel of your JetKVM interface" description={m.appearance_page_description()}
/> />
<SettingsItem title="Theme" description="Choose your preferred color theme"> <SettingsItem title={m.appearance_theme()} description={m.appearance_description()}>
<SelectMenuBasic <SelectMenuBasic
size="SM" size="SM"
label="" label=""
value={currentTheme} value={currentTheme}
options={[ options={themeOptions}
{ value: "system", label: "System" },
{ value: "light", label: "Light" },
{ value: "dark", label: "Dark" },
]}
onChange={e => { onChange={e => {
setCurrentTheme(e.target.value); setCurrentTheme(e.target.value);
handleThemeChange(e.target.value); handleThemeChange(e.target.value);