feat(theme): add 5 preset color themes (Nord/Gruvbox/Monokai/Dracula/Solarized) with popover selector

Implements Approach C (dual-attribute: data-theme + data-theme-preset),
keeping all 106 existing [data-theme="dark"] overrides unchanged.

- Colors: 5 professionally designed oklch palettes in tokens/colors.css
- UI: popover theme selector with mode (Light/Dark/Auto) + preset grid
- JS: cycleTheme(), setPreset(), localStorage persistence
- Locale: 12 new translation keys across 10 languages
- Polish: solid accent swatches matching flat token-driven aesthetic
This commit is contained in:
Will Miao
2026-06-18 09:53:40 +08:00
parent b7721866e5
commit c5c7373e10
16 changed files with 837 additions and 93 deletions

View File

@@ -46,16 +46,20 @@
</script>
<script>
(function() {
// Apply theme immediately based on stored preference
const STORAGE_PREFIX = 'lora_manager_';
const savedTheme = localStorage.getItem(STORAGE_PREFIX + 'theme') || 'auto';
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
var STORAGE_PREFIX = 'lora_manager_';
var savedTheme = localStorage.getItem(STORAGE_PREFIX + 'theme') || 'auto';
var savedPreset = localStorage.getItem(STORAGE_PREFIX + 'theme_preset') || 'default';
var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (savedTheme === 'dark' || (savedTheme === 'auto' && prefersDark)) {
document.documentElement.setAttribute('data-theme', 'dark');
} else {
document.documentElement.setAttribute('data-theme', 'light');
}
if (savedPreset && savedPreset !== 'default') {
document.documentElement.setAttribute('data-theme-preset', savedPreset);
}
})();
</script>
{% block head_scripts %}{% endblock %}