ArkHost/HelixNotes
1
0
Fork 0
mirror of https://gitlab.com/ArkHost/HelixNotes.git synced 2026-07-24 15:55:55 +02:00
Code Issues Projects Releases Wiki Activity

Added custom themes, import/export option with json (#159)

Browse Source 
Reviewed-on: https://codeberg.org/ArkHost/HelixNotes/pulls/159
This commit is contained in:
blake
2026-06-23 20:19:23 +02:00
committed by ArkHost
parent 84ff75f223
commit 7b3609afbb
9 changed files with 866 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+layout.svelte
+35 -5
View File
@@ -1,17 +1,18 @@
<script lang="ts">
import { onMount } from 'svelte';
import '../app.css';
import { theme, appConfig, activeNote, activeNotePath, installType, platformIsMobile, checkForUpdate, isManagedInstall } from '$lib/stores/app';
import { theme, appConfig, activeNote, activeNotePath, installType, platformIsMobile, checkForUpdate, checkForUpdateMobile, isManagedInstall, customThemes } from '$lib/stores/app';
import { openFile, openUrl, readNote, getInstallType, isMobilePlatform } from '$lib/api';
import { get } from 'svelte/store';
import { darkThemes, isMobile, isAndroid } from '$lib/platform';
import type { CustomTheme } from '$lib/types';
import ResizeHandles from '$lib/components/ResizeHandles.svelte';
let { children } = $props();
// Reactively apply theme class to <html> whenever $theme changes
// Reactively apply theme class to <html> whenever $theme or custom themes change
$effect(() => {
applyTheme($theme);
applyTheme($theme, $customThemes);
});
// Apply link arrow visibility from config
@@ -21,12 +22,41 @@
}
});
function applyTheme(t: string) {
const CUSTOM_THEME_VARS = [
'--bg-primary', '--bg-secondary', '--bg-tertiary',
'--bg-hover', '--bg-active', '--bg-editor',
'--text-primary', '--text-secondary', '--border-color',
];
function applyCustomThemeVars(root: HTMLElement, ct: CustomTheme) {
root.style.setProperty('--bg-primary', ct.colors.bg_primary);
root.style.setProperty('--bg-secondary', ct.colors.bg_secondary);
root.style.setProperty('--bg-tertiary', ct.colors.bg_tertiary);
root.style.setProperty('--bg-hover', ct.colors.bg_hover);
root.style.setProperty('--bg-active', ct.colors.bg_active);
root.style.setProperty('--bg-editor', ct.colors.bg_editor);
root.style.setProperty('--text-primary', ct.colors.text_primary);
root.style.setProperty('--text-secondary', ct.colors.text_secondary);
root.style.setProperty('--border-color', ct.colors.border_color);
}
function clearCustomThemeVars(root: HTMLElement) {
for (const v of CUSTOM_THEME_VARS) root.style.removeProperty(v);
}
function applyTheme(t: string, themes: CustomTheme[] = []) {
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', 'material-dark', 'material-light', 'monokai', 'rose-pine', 'everforest', 'horizon', 'cyberpunk', 'black', 'one-dark'];
const root = document.documentElement;
root.classList.remove('dark');
root.removeAttribute('data-theme');
if (namedThemes.includes(t)) {
clearCustomThemeVars(root);
if (t.startsWith('custom-')) {
const ct = themes.find(c => c.id === t);
if (ct) {
applyCustomThemeVars(root, ct);
if (ct.is_dark) root.classList.add('dark');
}
} else if (namedThemes.includes(t)) {
root.setAttribute('data-theme', t);
if (darkThemes.includes(t)) root.classList.add('dark');
} else if (t === 'dark' || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {