amitwh/markdown-converter
1
0
Fork 0
mirror of https://github.com/amitwh/markdown-converter.git synced 2026-08-02 10:00:17 +05:30
Code Issues Packages Projects Releases Wiki Activity

feat(renderer): ThemeSettings tab (mode, accent, font)

Browse Source
This commit is contained in:
amitwh
2026-06-05 19:32:43 +05:30
parent ed611c77ed
commit be3af42fc5
1 changed files with 45 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/modals/ThemeSettings.tsx
+45
View File
@@ -0,0 +1,45 @@
import { useSettingsStore } from '@/stores/settings-store';
import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
export function ThemeSettings() {
const { theme, accentColor, fontFamily, setSetting } = useSettingsStore();
return (
<div className="space-y-5 text-sm">
<div>
<Label>Mode</Label>
<RadioGroup value={theme} onValueChange={(v) => setSetting('theme', v as 'light' | 'dark' | 'auto')}>
<div className="flex items-center gap-2"><RadioGroupItem value="light" id="theme-light" /><Label htmlFor="theme-light">Light</Label></div>
<div className="flex items-center gap-2"><RadioGroupItem value="dark" id="theme-dark" /><Label htmlFor="theme-dark">Dark</Label></div>
<div className="flex items-center gap-2"><RadioGroupItem value="auto" id="theme-auto" /><Label htmlFor="theme-auto">Auto (system)</Label></div>
</RadioGroup>
</div>
<div>
<Label htmlFor="theme-accent">Accent color</Label>
<Select value={accentColor} onValueChange={(v) => setSetting('accentColor', v as any)}>
<SelectTrigger id="theme-accent" aria-label="Accent color"><SelectValue /></SelectTrigger>
<SelectContent>
<SelectItem value="brand">Brand (orange)</SelectItem>
<SelectItem value="blue">Blue</SelectItem>
<SelectItem value="green">Green</SelectItem>
<SelectItem value="purple">Purple</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<Label htmlFor="theme-font-family">Editor font</Label>
<Select value={fontFamily} onValueChange={(v) => setSetting('fontFamily', v as any)}>
<SelectTrigger id="theme-font-family" aria-label="Editor font"><SelectValue /></SelectTrigger>
<SelectContent>
<SelectItem value="system">System (Plus Jakarta Sans)</SelectItem>
<SelectItem value="jetbrains">JetBrains Mono</SelectItem>
<SelectItem value="fira">Fira Code</SelectItem>
</SelectContent>
</Select>
</div>
</div>
);
}