iu/ds-galo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

feat(frontend): darken neutral theme and reorder theme switcher

Browse Source 
- make neutral theme a warm dark graphite
- order switches as dark -> neutral -> light -> system
- replace neutral icon with contrast glyph
This commit is contained in:
iu
2026-10-10 18:36:32 +03:00
parent ba605402ce
commit 1f0e909ffd
3 changed files with 18 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app.css
+14 -14
View File
@@ -38,22 +38,22 @@
--shadow: 0 0% 0% / 0.4; --shadow: 0 0% 0% / 0.4;
} }
/* Нейтральная (тёплая серо-бежевая) */ /* Нейтральная (тёплый графит) */
[data-theme='neutral'] { [data-theme='neutral'] {
--bg: 40 20% 96%; --bg: 30 12% 18%;
--bg-elevated: 40 22% 92%; --bg-elevated: 30 12% 23%;
--bg-muted: 40 18% 87%; --bg-muted: 30 11% 28%;
--border: 40 14% 78%; --border: 30 9% 34%;
--text: 30 10% 15%; --text: 35 18% 93%;
--text-muted: 30 8% 40%; --text-muted: 32 10% 68%;
--text-subtle: 30 6% 55%; --text-subtle: 30 7% 50%;
--primary: 25 90% 50%; --primary: 25 90% 55%;
--primary-fg: 0 0% 100%; --primary-fg: 0 0% 100%;
--danger: 0 72% 55%; --danger: 0 72% 62%;
--success: 142 55% 42%; --success: 142 45% 52%;
--chrome: 40 22% 92%; --chrome: 30 12% 15%;
--canvas: 40 20% 96%; --canvas: 30 12% 18%;
--shadow: 30 20% 20% / 0.12; --shadow: 30 30% 5% / 0.45;
} }
html, html,
frontend/src/lib/components/ThemeSwitcher.svelte
+2 -2
View File
@@ -4,9 +4,9 @@
import { theme, type Theme } from '$lib/stores/theme.svelte'; import { theme, type Theme } from '$lib/stores/theme.svelte';
const options: { value: Theme; label: string; icon: IconName }[] = [ const options: { value: Theme; label: string; icon: IconName }[] = [
{ value: 'light', label: 'Light', icon: 'light_mode' },
{ value: 'dark', label: 'Dark', icon: 'dark_mode' }, { value: 'dark', label: 'Dark', icon: 'dark_mode' },
{ value: 'neutral', label: 'Neutral', icon: 'palette' }, { value: 'neutral', label: 'Neutral', icon: 'contrast' },
{ value: 'light', label: 'Light', icon: 'light_mode' },
{ value: 'system', label: 'System', icon: 'brightness_auto' } { value: 'system', label: 'System', icon: 'brightness_auto' }
]; ];
</script> </script>
frontend/src/lib/icons/registry.ts
+2 -1
View File
@@ -45,7 +45,8 @@ export const icons = {
grid_view: { path: '<path fill="currentColor" d="M3 3v8h8V3zm10 0v8h8V3zM3 13v8h8v-8zm10 0v8h8v-8z"/>' }, grid_view: { path: '<path fill="currentColor" d="M3 3v8h8V3zm10 0v8h8V3zM3 13v8h8v-8zm10 0v8h8v-8z"/>' },
wallpaper: { path: '<path fill="currentColor" d="M4 4h7V2H4c-1.1 0-2 .9-2 2v7h2zm6 9l-4 5h12l-3-4l-2.03 2.71zm7-4.5c0-.83-.67-1.5-1.5-1.5S14 7.67 14 8.5s.67 1.5 1.5 1.5S17 9.33 17 8.5M20 2h-7v2h7v7h2V4c0-1.1-.9-2-2-2m0 18h-7v2h7c1.1 0 2-.9 2-2v-7h-2zM4 13H2v7c0 1.1.9 2 2 2h7v-2H4z"/>' }, wallpaper: { path: '<path fill="currentColor" d="M4 4h7V2H4c-1.1 0-2 .9-2 2v7h2zm6 9l-4 5h12l-3-4l-2.03 2.71zm7-4.5c0-.83-.67-1.5-1.5-1.5S14 7.67 14 8.5s.67 1.5 1.5 1.5S17 9.33 17 8.5M20 2h-7v2h7v7h2V4c0-1.1-.9-2-2-2m0 18h-7v2h7c1.1 0 2-.9 2-2v-7h-2zM4 13H2v7c0 1.1.9 2 2 2h7v-2H4z"/>' },
fullscreen: { path: '<path fill="currentColor" d="M7 14H5v5h5v-2H7zm-2-4h2V7h3V5H5zm12 7h-3v2h5v-5h-2zM14 5v2h3v3h2V5z"/>' }, fullscreen: { path: '<path fill="currentColor" d="M7 14H5v5h5v-2H7zm-2-4h2V7h3V5H5zm12 7h-3v2h5v-5h-2zM14 5v2h3v3h2V5z"/>' },
fullscreen_exit: { path: '<path fill="currentColor" d="M5 16h3v3h2v-5H5zm3-8H5v2h5V5H8zm6 11h2v-3h3v-2h-5zm2-11v3h-2v2h5V5z"/>' } fullscreen_exit: { path: '<path fill="currentColor" d="M5 16h3v3h2v-5H5zm3-8H5v2h5V5H8zm6 11h2v-3h3v-2h-5zm2-11v3h-2v2h5V5z"/>' },
contrast: { path: '<path fill="currentColor" fill-rule="evenodd" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16zM12 4a8 8 0 0 1 0 16z"/>' }
} satisfies Record<string, IconDef>; } satisfies Record<string, IconDef>;
export type IconName = keyof typeof icons; export type IconName = keyof typeof icons;