mirror of
https://gitlab.com/ArkHost/HelixNotes.git
synced 2026-09-20 01:47:29 +02:00
main (#106)
WIP: Themes, accents, dropdown Reviewed-on: https://codeberg.org/ArkHost/HelixNotes/pulls/106
This commit is contained in:
blake
+627
-665
File diff suppressed because it is too large
Load Diff
@@ -475,8 +475,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function applyTheme(t: string) {
|
function applyTheme(t: string) {
|
||||||
const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula'];
|
const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'dark-coffee', 'crimson'];
|
||||||
const namedThemes = ['solarized-light', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-light', 'github-dark', 'dracula'];
|
const namedThemes = ['solarized-light', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-light', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'light-coffee', 'dark-coffee', 'cotton-candy', 'crimson', 'cloud', 'peach'];
|
||||||
const root = document.documentElement;
|
const root = document.documentElement;
|
||||||
root.classList.remove('dark');
|
root.classList.remove('dark');
|
||||||
root.removeAttribute('data-theme');
|
root.removeAttribute('data-theme');
|
||||||
|
|||||||
@@ -142,8 +142,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function applyTheme(t: string) {
|
function applyTheme(t: string) {
|
||||||
const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula'];
|
const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'dark-coffee', 'crimson'];
|
||||||
const namedThemes = ['solarized-light', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-light', 'github-dark', 'dracula'];
|
const namedThemes = ['solarized-light', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-light', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'light-coffee', 'dark-coffee', 'cotton-candy', 'crimson', 'cloud', 'peach'];
|
||||||
const root = document.documentElement;
|
const root = document.documentElement;
|
||||||
root.classList.remove('dark');
|
root.classList.remove('dark');
|
||||||
root.removeAttribute('data-theme');
|
root.removeAttribute('data-theme');
|
||||||
|
|||||||
@@ -35,8 +35,8 @@
|
|||||||
|
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
const t = $theme || 'system';
|
const t = $theme || 'system';
|
||||||
const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula'];
|
const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'dark-coffee', 'crimson'];
|
||||||
const namedThemes = ['solarized-light', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-light', 'github-dark', 'dracula'];
|
const namedThemes = ['solarized-light', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-light', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'light-coffee', 'dark-coffee', 'cotton-candy', 'crimson', 'cloud', 'peach'];
|
||||||
const root = document.documentElement;
|
const root = document.documentElement;
|
||||||
root.classList.remove('dark');
|
root.classList.remove('dark');
|
||||||
root.removeAttribute('data-theme');
|
root.removeAttribute('data-theme');
|
||||||
|
|||||||
@@ -384,7 +384,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit'];
|
const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'dark-coffee', 'crimson'];
|
||||||
let isThemeDark = $derived(
|
let isThemeDark = $derived(
|
||||||
darkThemes.includes($theme) || ($theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
|
darkThemes.includes($theme) || ($theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||||||
);
|
);
|
||||||
@@ -408,6 +408,12 @@
|
|||||||
{ id: 'synthwave', label: 'Synthwave', bg: '#0d0221', sidebar: '#130332', accent: '#ff6ac1' },
|
{ id: 'synthwave', label: 'Synthwave', bg: '#0d0221', sidebar: '#130332', accent: '#ff6ac1' },
|
||||||
{ id: 'ember', label: 'Ember', bg: '#0f0a06', sidebar: '#1a1008', accent: '#ff8c42' },
|
{ id: 'ember', label: 'Ember', bg: '#0f0a06', sidebar: '#1a1008', accent: '#ff8c42' },
|
||||||
{ id: 'moonlit', label: 'Moonlit', bg: '#0a0d12', sidebar: '#0f1520', accent: '#b0cceb' },
|
{ id: 'moonlit', label: 'Moonlit', bg: '#0a0d12', sidebar: '#0f1520', accent: '#b0cceb' },
|
||||||
|
{ id: 'light-coffee', label: 'Light Coffee', bg: '#fdf8f3', sidebar: '#f5ede0', accent: '#8b5e3c' },
|
||||||
|
{ id: 'dark-coffee', label: 'Dark Coffee', bg: '#1a1008', sidebar: '#211408', accent: '#c8894d' },
|
||||||
|
{ id: 'cotton-candy', label: 'Cotton Candy', bg: '#fff0f8', sidebar: '#ffe8f4', accent: '#e85fa0' },
|
||||||
|
{ id: 'crimson', label: 'Crimson', bg: '#1a0808', sidebar: '#220a0a', accent: '#e83535' },
|
||||||
|
{ id: 'cloud', label: 'Cloud', bg: '#f0f8ff', sidebar: '#e4f2fc', accent: '#2879c8' },
|
||||||
|
{ id: 'peach', label: 'Peach', bg: '#fff8f4', sidebar: '#ffeee4', accent: '#e8704a' },
|
||||||
];
|
];
|
||||||
|
|
||||||
const accentPresets = [
|
const accentPresets = [
|
||||||
@@ -463,10 +469,19 @@
|
|||||||
];
|
];
|
||||||
|
|
||||||
let activeAccent = $state($appConfig?.accent_color ?? 'Indigo');
|
let activeAccent = $state($appConfig?.accent_color ?? 'Indigo');
|
||||||
|
let customAccentColor = $state(($appConfig?.accent_color?.startsWith('#') ? $appConfig.accent_color : null) ?? '#5b6abf');
|
||||||
let activeFontSize = $state($appConfig?.font_size ?? 14);
|
let activeFontSize = $state($appConfig?.font_size ?? 14);
|
||||||
let activeFontFamily = $state($appConfig?.font_family ?? 'system');
|
let activeFontFamily = $state($appConfig?.font_family ?? 'system');
|
||||||
let activeLineHeight = $state($appConfig?.line_height ?? 1.6);
|
let activeLineHeight = $state($appConfig?.line_height ?? 1.6);
|
||||||
let activeUiScale = $state($appConfig?.ui_scale ?? 1);
|
let activeUiScale = $state($appConfig?.ui_scale ?? 1);
|
||||||
|
let themeDropdownOpen = $state(false);
|
||||||
|
let accentDropdownOpen = $state(false);
|
||||||
|
let activeThemePreset = $derived(themePresets.find(p => p.id === $theme) ?? themePresets[0]);
|
||||||
|
let activeAccentPreset = $derived(accentPresets.find(p => p.name === activeAccent) ?? accentPresets[0]);
|
||||||
|
let isCustomAccent = $derived(activeAccent.startsWith('#'));
|
||||||
|
let activeAccentColor = $derived(
|
||||||
|
isCustomAccent ? activeAccent : (isThemeDark ? activeAccentPreset.dark : activeAccentPreset.light)
|
||||||
|
);
|
||||||
|
|
||||||
// General settings
|
// General settings
|
||||||
let compactNotes = $state($appConfig?.compact_notes ?? false);
|
let compactNotes = $state($appConfig?.compact_notes ?? false);
|
||||||
@@ -579,6 +594,23 @@
|
|||||||
setAccentColor(accentName).catch((e) => console.error('Failed to save accent:', e));
|
setAccentColor(accentName).catch((e) => console.error('Failed to save accent:', e));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function applyCustomAccent(hex: string) {
|
||||||
|
const root = document.documentElement;
|
||||||
|
const isDark = darkThemes.includes($theme) || ($theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
||||||
|
root.style.setProperty('--accent', hex);
|
||||||
|
root.style.setProperty('--text-accent', hex);
|
||||||
|
root.style.setProperty('--accent-hover', hex);
|
||||||
|
root.style.setProperty('--accent-light', `color-mix(in srgb, ${hex} ${isDark ? '10%' : '8%'}, transparent)`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectCustomAccent(hex: string) {
|
||||||
|
customAccentColor = hex;
|
||||||
|
activeAccent = hex;
|
||||||
|
applyCustomAccent(hex);
|
||||||
|
if ($appConfig) $appConfig.accent_color = hex;
|
||||||
|
setAccentColor(hex).catch((e) => console.error('Failed to save custom accent:', e));
|
||||||
|
}
|
||||||
|
|
||||||
function selectFontSize(size: number) {
|
function selectFontSize(size: number) {
|
||||||
activeFontSize = size;
|
activeFontSize = size;
|
||||||
applyFontSize(size);
|
applyFontSize(size);
|
||||||
@@ -627,6 +659,14 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function clickOutside(node: HTMLElement, callback: () => void) {
|
||||||
|
function handle(e: MouseEvent) {
|
||||||
|
if (!node.contains(e.target as Node)) callback();
|
||||||
|
}
|
||||||
|
document.addEventListener('mousedown', handle, true);
|
||||||
|
return { destroy() { document.removeEventListener('mousedown', handle, true); } };
|
||||||
|
}
|
||||||
|
|
||||||
function close() {
|
function close() {
|
||||||
// Ensure AI settings are saved when closing (in case input wasn't blurred)
|
// Ensure AI settings are saved when closing (in case input wasn't blurred)
|
||||||
// Only save if the key differs from what's already stored
|
// Only save if the key differs from what's already stored
|
||||||
@@ -640,10 +680,16 @@
|
|||||||
$effect(() => {
|
$effect(() => {
|
||||||
const savedAccent = $appConfig?.accent_color;
|
const savedAccent = $appConfig?.accent_color;
|
||||||
if (savedAccent) {
|
if (savedAccent) {
|
||||||
const preset = accentPresets.find(p => p.name === savedAccent);
|
if (savedAccent.startsWith('#')) {
|
||||||
if (preset) {
|
|
||||||
activeAccent = savedAccent;
|
activeAccent = savedAccent;
|
||||||
applyAccent(preset);
|
customAccentColor = savedAccent;
|
||||||
|
applyCustomAccent(savedAccent);
|
||||||
|
} else {
|
||||||
|
const preset = accentPresets.find(p => p.name === savedAccent);
|
||||||
|
if (preset) {
|
||||||
|
activeAccent = savedAccent;
|
||||||
|
applyAccent(preset);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const savedSize = $appConfig?.font_size;
|
const savedSize = $appConfig?.font_size;
|
||||||
@@ -983,45 +1029,96 @@
|
|||||||
</div>
|
</div>
|
||||||
{:else if activeTab === 'styling'}
|
{:else if activeTab === 'styling'}
|
||||||
<div class="tab-content">
|
<div class="tab-content">
|
||||||
|
<div class="two-col-sections">
|
||||||
<div class="settings-section">
|
<div class="settings-section">
|
||||||
<h3>Theme</h3>
|
<h3>Theme</h3>
|
||||||
<div class="theme-grid">
|
<div class="dropdown-wrap">
|
||||||
{#each themePresets as preset}
|
<button
|
||||||
<button
|
class="dropdown-trigger"
|
||||||
class="theme-swatch"
|
class:open={themeDropdownOpen}
|
||||||
class:active={$theme === preset.id}
|
onclick={() => { themeDropdownOpen = !themeDropdownOpen; accentDropdownOpen = false; }}
|
||||||
onclick={() => { $theme = preset.id; setTheme(preset.id); }}
|
>
|
||||||
title={preset.label}
|
<span class="dropdown-preview" style="--preview-bg: {activeThemePreset.bg}; --preview-sidebar: {activeThemePreset.sidebar}; --preview-accent: {activeThemePreset.accent}">
|
||||||
>
|
<span class="preview-sidebar"></span>
|
||||||
<span class="theme-preview" style="--preview-bg: {preset.bg}; --preview-sidebar: {preset.sidebar}; --preview-accent: {preset.accent}">
|
<span class="preview-main">
|
||||||
<span class="preview-sidebar"></span>
|
<span class="preview-accent-bar"></span>
|
||||||
<span class="preview-main">
|
|
||||||
<span class="preview-accent-bar"></span>
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
<span class="theme-label">{preset.label}</span>
|
</span>
|
||||||
</button>
|
<span class="dropdown-trigger-label">{activeThemePreset.label}</span>
|
||||||
{/each}
|
<svg class="dropdown-chevron" viewBox="0 0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||||
|
</button>
|
||||||
|
{#if themeDropdownOpen}
|
||||||
|
<div class="dropdown-list" use:clickOutside={() => themeDropdownOpen = false}>
|
||||||
|
{#each themePresets as preset}
|
||||||
|
<button
|
||||||
|
class="dropdown-item"
|
||||||
|
class:active={$theme === preset.id}
|
||||||
|
onclick={() => { $theme = preset.id; setTheme(preset.id); themeDropdownOpen = false; }}
|
||||||
|
>
|
||||||
|
<span class="dropdown-preview" style="--preview-bg: {preset.bg}; --preview-sidebar: {preset.sidebar}; --preview-accent: {preset.accent}">
|
||||||
|
<span class="preview-sidebar"></span>
|
||||||
|
<span class="preview-main">
|
||||||
|
<span class="preview-accent-bar"></span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<span class="dropdown-item-label">{preset.label}</span>
|
||||||
|
{#if $theme === preset.id}
|
||||||
|
<svg class="dropdown-check" viewBox="0 0 16 16" fill="none"><path d="M3 8l4 4 6-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="settings-section">
|
<div class="settings-section">
|
||||||
<h3>Accent Color</h3>
|
<h3>Accent Color</h3>
|
||||||
<div class="accent-grid">
|
<div class="dropdown-wrap">
|
||||||
{#each accentPresets as preset}
|
<button
|
||||||
<button
|
class="dropdown-trigger"
|
||||||
class="accent-swatch"
|
class:open={accentDropdownOpen}
|
||||||
class:active={activeAccent === preset.name}
|
onclick={() => { accentDropdownOpen = !accentDropdownOpen; themeDropdownOpen = false; }}
|
||||||
style="--swatch-color: {isThemeDark ? preset.dark : preset.light}"
|
>
|
||||||
onclick={() => selectAccent(preset)}
|
<span class="accent-dot" style="background: {activeAccentColor}"></span>
|
||||||
title={preset.name}
|
<span class="dropdown-trigger-label">{isCustomAccent ? 'Custom' : activeAccentPreset.name}</span>
|
||||||
>
|
<svg class="dropdown-chevron" viewBox="0 0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||||
<span class="swatch-circle"></span>
|
</button>
|
||||||
<span class="swatch-label">{preset.name}</span>
|
{#if accentDropdownOpen}
|
||||||
</button>
|
<div class="dropdown-list" use:clickOutside={() => accentDropdownOpen = false}>
|
||||||
{/each}
|
{#each accentPresets as preset}
|
||||||
|
<button
|
||||||
|
class="dropdown-item"
|
||||||
|
class:active={activeAccent === preset.name}
|
||||||
|
onclick={() => { selectAccent(preset); accentDropdownOpen = false; }}
|
||||||
|
>
|
||||||
|
<span class="accent-dot" style="background: {isThemeDark ? preset.dark : preset.light}"></span>
|
||||||
|
<span class="dropdown-item-label">{preset.name}</span>
|
||||||
|
{#if activeAccent === preset.name}
|
||||||
|
<svg class="dropdown-check" viewBox="0 0 16 16" fill="none"><path d="M3 8l4 4 6-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
{/each}
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<label class="dropdown-item custom-accent-item" class:active={isCustomAccent}>
|
||||||
|
<span class="accent-dot" style="background: {customAccentColor}"></span>
|
||||||
|
<span class="dropdown-item-label">Custom</span>
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
class="color-wheel-input"
|
||||||
|
value={customAccentColor}
|
||||||
|
oninput={(e) => applyCustomAccent(e.currentTarget.value)}
|
||||||
|
onchange={(e) => selectCustomAccent(e.currentTarget.value)}
|
||||||
|
/>
|
||||||
|
{#if isCustomAccent}
|
||||||
|
<svg class="dropdown-check" viewBox="0 0 16 16" fill="none"><path d="M3 8l4 4 6-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||||
|
{/if}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="settings-section">
|
<div class="settings-section">
|
||||||
<h3>Font Size</h3>
|
<h3>Font Size</h3>
|
||||||
@@ -1902,42 +1999,116 @@
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-grid {
|
.two-col-sections {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(5, 1fr);
|
grid-template-columns: 1fr 1fr;
|
||||||
gap: 8px;
|
gap: 0 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-swatch {
|
.two-col-sections .settings-section {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-wrap {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-trigger {
|
||||||
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 5px;
|
gap: 10px;
|
||||||
padding: 6px;
|
padding: 8px 10px;
|
||||||
|
background: var(--bg-secondary);
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: var(--bg-secondary);
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.15s;
|
transition: border-color 0.15s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-swatch:hover {
|
.dropdown-trigger:hover,
|
||||||
border-color: var(--text-tertiary);
|
.dropdown-trigger.open {
|
||||||
}
|
|
||||||
|
|
||||||
.theme-swatch.active {
|
|
||||||
border-color: var(--accent);
|
border-color: var(--accent);
|
||||||
box-shadow: 0 0 0 2px var(--accent-light);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-preview {
|
.dropdown-trigger-label {
|
||||||
display: flex;
|
flex: 1;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-chevron {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: transform 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-trigger.open .dropdown-chevron {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-list {
|
||||||
|
position: absolute;
|
||||||
|
top: calc(100% + 4px);
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
z-index: 100;
|
||||||
|
max-height: 240px;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-item {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 32px;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 7px 8px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-item:hover {
|
||||||
|
background: var(--bg-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-item.active {
|
||||||
|
background: var(--accent-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-item-label {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-check {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
color: var(--accent);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-preview {
|
||||||
|
display: flex;
|
||||||
|
width: 36px;
|
||||||
|
height: 22px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: var(--preview-bg);
|
background: var(--preview-bg);
|
||||||
border: 1px solid rgba(0,0,0,0.1);
|
border: 1px solid rgba(0,0,0,0.12);
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-sidebar {
|
.preview-sidebar {
|
||||||
@@ -1949,10 +2120,10 @@
|
|||||||
.preview-main {
|
.preview-main {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
background: var(--preview-bg);
|
background: var(--preview-bg);
|
||||||
padding: 4px;
|
padding: 3px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 3px;
|
gap: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-accent-bar {
|
.preview-accent-bar {
|
||||||
@@ -1962,62 +2133,33 @@
|
|||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-label {
|
.accent-dot {
|
||||||
font-size: 10px;
|
width: 18px;
|
||||||
color: var(--text-secondary);
|
height: 18px;
|
||||||
text-align: center;
|
|
||||||
line-height: 1.2;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-swatch.active .theme-label {
|
|
||||||
color: var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.accent-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accent-swatch {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 12px 8px;
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: 10px;
|
|
||||||
background: var(--bg-secondary);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accent-swatch:hover {
|
|
||||||
background: var(--bg-hover);
|
|
||||||
border-color: var(--swatch-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.accent-swatch.active {
|
|
||||||
border-color: var(--swatch-color);
|
|
||||||
background: var(--accent-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.swatch-circle {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: var(--swatch-color);
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.swatch-label {
|
.dropdown-divider {
|
||||||
font-size: 11px;
|
height: 1px;
|
||||||
color: var(--text-secondary);
|
background: var(--border-light);
|
||||||
|
margin: 4px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.accent-swatch.active .swatch-label {
|
.custom-accent-item {
|
||||||
color: var(--text-primary);
|
cursor: pointer;
|
||||||
font-weight: 500;
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-wheel-input {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-size-options {
|
.font-size-options {
|
||||||
@@ -2686,15 +2828,6 @@
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-panel.mobile .accent-grid {
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-panel.mobile .accent-swatch {
|
|
||||||
padding: 14px 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-panel.mobile .font-size-options {
|
.settings-panel.mobile .font-size-options {
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -16,8 +16,8 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
function applyTheme(t: string) {
|
function applyTheme(t: string) {
|
||||||
const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit'];
|
const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'dark-coffee', 'crimson'];
|
||||||
const namedThemes = ['solarized-light', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-light', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit'];
|
const namedThemes = ['solarized-light', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-light', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'light-coffee', 'dark-coffee', 'cotton-candy', 'crimson', 'cloud', 'peach'];
|
||||||
const root = document.documentElement;
|
const root = document.documentElement;
|
||||||
root.classList.remove('dark');
|
root.classList.remove('dark');
|
||||||
root.removeAttribute('data-theme');
|
root.removeAttribute('data-theme');
|
||||||
|
|||||||
+27
-17
@@ -26,8 +26,8 @@
|
|||||||
// Apply theme immediately to prevent flash
|
// Apply theme immediately to prevent flash
|
||||||
const themeValue = config.theme || 'system';
|
const themeValue = config.theme || 'system';
|
||||||
const root = document.documentElement;
|
const root = document.documentElement;
|
||||||
const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula'];
|
const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'dark-coffee', 'crimson'];
|
||||||
const namedThemes = ['solarized-light', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-light', 'github-dark', 'dracula'];
|
const namedThemes = ['solarized-light', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-light', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'light-coffee', 'dark-coffee', 'cotton-candy', 'crimson', 'cloud', 'peach'];
|
||||||
root.classList.remove('dark');
|
root.classList.remove('dark');
|
||||||
root.removeAttribute('data-theme');
|
root.removeAttribute('data-theme');
|
||||||
if (namedThemes.includes(themeValue)) {
|
if (namedThemes.includes(themeValue)) {
|
||||||
@@ -60,21 +60,31 @@
|
|||||||
}
|
}
|
||||||
// Apply saved accent
|
// Apply saved accent
|
||||||
if (config.accent_color) {
|
if (config.accent_color) {
|
||||||
const accentPresets: Record<string, { light: string; dark: string }> = {
|
const themeVal = config.theme || 'light';
|
||||||
Indigo: { light: '#5b6abf', dark: '#7b9bd4' },
|
const isDark = darkThemes.includes(themeVal) || (themeVal === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
||||||
Rose: { light: '#e11d48', dark: '#d4768a' },
|
let color: string | null = null;
|
||||||
Emerald: { light: '#059669', dark: '#5bab8a' },
|
if (config.accent_color.startsWith('#')) {
|
||||||
Amber: { light: '#d97706', dark: '#c9a04e' },
|
color = config.accent_color;
|
||||||
Purple: { light: '#7c3aed', dark: '#9a82c4' },
|
} else {
|
||||||
Cyan: { light: '#0891b2', dark: '#5ba8b5' },
|
const accentPresets: Record<string, { light: string; dark: string }> = {
|
||||||
Orange: { light: '#ea580c', dark: '#c98560' },
|
Indigo: { light: '#5b6abf', dark: '#7b9bd4' },
|
||||||
Teal: { light: '#0d9488', dark: '#5fada5' },
|
Rose: { light: '#e11d48', dark: '#d4768a' },
|
||||||
};
|
Emerald: { light: '#059669', dark: '#5bab8a' },
|
||||||
const preset = accentPresets[config.accent_color];
|
Amber: { light: '#d97706', dark: '#c9a04e' },
|
||||||
if (preset) {
|
Purple: { light: '#7c3aed', dark: '#9a82c4' },
|
||||||
const themeVal = config.theme || 'light';
|
Cyan: { light: '#0891b2', dark: '#5ba8b5' },
|
||||||
const isDark = darkThemes.includes(themeVal) || (themeVal === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
Orange: { light: '#ea580c', dark: '#c98560' },
|
||||||
const color = isDark ? preset.dark : preset.light;
|
Teal: { light: '#0d9488', dark: '#5fada5' },
|
||||||
|
Sakura: { light: '#d4547a', dark: '#f4a0b5' },
|
||||||
|
Gold: { light: '#b8860b', dark: '#fabd2f' },
|
||||||
|
Lavender: { light: '#9d5cdb', dark: '#c084fc' },
|
||||||
|
Sky: { light: '#0284c7', dark: '#38bdf8' },
|
||||||
|
Coral: { light: '#e85d4a', dark: '#ff8a7a' },
|
||||||
|
};
|
||||||
|
const preset = accentPresets[config.accent_color];
|
||||||
|
if (preset) color = isDark ? preset.dark : preset.light;
|
||||||
|
}
|
||||||
|
if (color) {
|
||||||
const root = document.documentElement;
|
const root = document.documentElement;
|
||||||
root.style.setProperty('--accent', color);
|
root.style.setProperty('--accent', color);
|
||||||
root.style.setProperty('--text-accent', color);
|
root.style.setProperty('--text-accent', color);
|
||||||
|
|||||||
Reference in New Issue
Block a user