Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Docs: Persist custom theme #321

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Docs: Persist custom theme #321

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fb5453d
Export buttton only writes the explciit settings, and converts to sel…
dimfeld Mar 31, 2024
c496549
persist custom theme to localStorage
dimfeld Mar 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
311 changes: 86 additions & 225 deletions packages/svelte-ux/src/routes/theme/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,17 @@
} from '$lib/styles/theme.js';
import { entries, fromEntries, type MenuOption } from '$lib/types/index.js';
import ColorField from './ColorField.svelte';
import { formatColor } from './colors.js';
import { getSettings } from '$lib/components/settings.js';
import localStore from '$lib/stores/localStore.js';
import type { Writable } from 'svelte/store';
import { isEmptyObject } from '$lib/utils/object.js';

export let data;

type ThemeMenuOption = MenuOption & {
themeName: string;
theme: typeof customLightTheme | typeof data.themes.daisy | typeof data.themes.skeleton;
theme: Record<string, string> | typeof data.themes.daisy | typeof data.themes.skeleton;
};

const { currentTheme } = getSettings();
Expand All @@ -48,8 +52,14 @@
const daisyThemeNames = getThemeNames(data.themes.daisy);
const skeletonThemeNames = getThemeNames(data.themes.skeleton);

let customLightTheme: Record<string, string> = {};
let customDarkTheme: Record<string, string> = {};
let customLightTheme: Writable<Record<string, string>> = localStore(
'svelte-ux-custom-light-theme',
{}
);
let customDarkTheme: Writable<Record<string, string>> = localStore(
'svelte-ux-custom-dark-theme',
{}
);

let applyToSiteImmediately = false;

Expand All @@ -58,7 +68,7 @@
label: 'Custom',
value: 'custom',
themeName: 'custom',
theme: customLightTheme,
theme: $customLightTheme,
},
...daisyThemeNames.light.map((themeName) => {
return {
Expand All @@ -85,7 +95,7 @@
label: 'Custom',
value: 'custom',
themeName: 'custom',
theme: customDarkTheme,
theme: $customDarkTheme,
},
...daisyThemeNames.dark.map((themeName) => {
return {
Expand All @@ -107,12 +117,12 @@
}),
] as ThemeMenuOption[];

// Set initial theme selections (skip custom)
// Set initial theme selections (skip custom if not set)
$: if (selectedLightThemeValue === undefined) {
selectedLightThemeValue = lightThemes[1].value;
selectedLightThemeValue = isEmptyObject($customLightTheme) ? lightThemes[1].value : 'custom';
}
$: if (selectedDarkThemeValue === undefined) {
selectedDarkThemeValue = darkThemes[1].value;
selectedDarkThemeValue = isEmptyObject($customDarkTheme) ? darkThemes[1].value : 'custom';
}

$: showDarkTheme = $currentTheme.dark;
Expand All @@ -125,7 +135,7 @@

// Break cyclical dependency with lightThemes => customLightTheme -> selectedLightTheme -> lightThemes
function updateLightTheme() {
customLightTheme = {
$customLightTheme = {
...selectedLightTheme,
primary: selectedLightTheme?.primary ?? selectedLightTheme?.['primary-500'],
secondary: selectedLightTheme?.secondary ?? selectedLightTheme?.['secondary-500'],
Expand All @@ -141,7 +151,7 @@

// Break cyclical dependency with darkThemes => customDarkTheme -> selectedDarkTheme -> darkThemes
function updateDarkTheme() {
customDarkTheme = {
$customDarkTheme = {
...selectedDarkTheme,
primary: selectedDarkTheme?.primary ?? selectedDarkTheme?.['primary-500'],
secondary: selectedDarkTheme?.secondary ?? selectedDarkTheme?.['secondary-500'],
Expand Down Expand Up @@ -176,6 +186,33 @@

// TODO: Update settings({ themes: { light: ['light'], dark: ['dark'] }})
}

const themeKeys = [
{ key: 'primary', label: 'Primary', optional: false },
{ key: 'secondary', label: 'Secondary', optional: false },
{ key: 'accent', label: 'Accent', optional: false },
{ key: 'neutral', label: 'Neutral', optional: true },
{ key: 'info', label: 'Info', optional: true },
{ key: 'success', label: 'Success', optional: true },
{ key: 'warning', label: 'Warning', optional: true },
{ key: 'danger', label: 'Danger', optional: true },
{ key: 'surface-100', label: 'Surface 100', optional: false },
{ key: 'surface-200', label: 'Surface 200', optional: true },
{ key: 'surface-300', label: 'Surface 300', optional: true },
];

$: currentThemeSettings = themeKeys.reduce(
(acc, { key }) => {
if ($customDarkTheme[key]) {
acc.dark[key] = formatColor($customDarkTheme[key], colorSpace);
}
if ($customLightTheme[key]) {
acc.light[key] = formatColor($customLightTheme[key], colorSpace);
}
return acc;
},
{ light: {}, dark: {} }
);
</script>

<main class="p-4 grid gap-5">
Expand Down Expand Up @@ -218,15 +255,25 @@

<ButtonGroup variant="fill" color="primary">
<Tooltip title="Copy themes to clipboard" offset={2}>
<CopyButton
value={JSON.stringify({ light: selectedLightTheme, dark: selectedDarkTheme }, null, 2)}
/>
<CopyButton value={JSON.stringify(currentThemeSettings, null, 2)} />
</Tooltip>

<Toggle let:on={open} let:toggle>
<div class="grid">
<Button icon={mdiChevronDown} on:click={toggle} rounded class="px-1" />
<Menu {open} on:close={toggle} placement="bottom-start">
<MenuItem
on:click={() => {
const value = JSON.stringify(
{ light: selectedLightTheme, dark: selectedDarkTheme },
null,
2
);
navigator.clipboard.writeText(value);
}}
>
Copy Full Theme
</MenuItem>
<MenuItem
on:click={() => {
const allThemes = {
Expand Down Expand Up @@ -275,222 +322,36 @@
<div class="grid sm:grid-cols-2 gap-2">
<div class="grid gap-2">
<div class="text-xs -mb-1 text-surface-content/50 font-semibold">Light theme</div>
<ColorField
label="Primary"
bind:value={customLightTheme.primary}
on:change={() => {
selectedLightThemeValue = 'custom';
showDarkTheme = false;
}}
{colorSpace}
/>
<ColorField
label="Secondary"
bind:value={customLightTheme.secondary}
on:change={() => {
selectedLightThemeValue = 'custom';
showDarkTheme = false;
}}
{colorSpace}
/>
<ColorField
label="Accent"
bind:value={customLightTheme.accent}
on:change={() => {
selectedLightThemeValue = 'custom';
showDarkTheme = false;
}}
{colorSpace}
/>

{#if showOptionalColors}
<ColorField
label="Neutral (optional)"
bind:value={customLightTheme.neutral}
on:change={() => {
selectedLightThemeValue = 'custom';
showDarkTheme = false;
}}
{colorSpace}
/>
<!-- State colors -->
<ColorField
label="Info (optional)"
bind:value={customLightTheme.info}
on:change={() => {
selectedLightThemeValue = 'custom';
showDarkTheme = false;
}}
{colorSpace}
/>
<ColorField
label="Success (optional)"
bind:value={customLightTheme.success}
on:change={() => {
selectedLightThemeValue = 'custom';
showDarkTheme = false;
}}
{colorSpace}
/>
<ColorField
label="Warning (optional)"
bind:value={customLightTheme.warning}
on:change={() => {
selectedLightThemeValue = 'custom';
showDarkTheme = false;
}}
{colorSpace}
/>
<ColorField
label="Danger (optional)"
bind:value={customLightTheme.danger}
on:change={() => {
selectedLightThemeValue = 'custom';
showDarkTheme = false;
}}
{colorSpace}
/>
{/if}

<ColorField
label="Surface 100"
bind:value={customLightTheme['surface-100']}
on:change={() => {
selectedLightThemeValue = 'custom';
showDarkTheme = false;
}}
{colorSpace}
/>
{#if showOptionalColors}
<ColorField
label="Surface 200 (optional)"
bind:value={customLightTheme['surface-200']}
on:change={() => {
selectedLightThemeValue = 'custom';
showDarkTheme = false;
}}
{colorSpace}
/>
<ColorField
label="Surface 300 (optional)"
bind:value={customLightTheme['surface-300']}
on:change={() => {
selectedLightThemeValue = 'custom';
showDarkTheme = false;
}}
{colorSpace}
/>
{/if}
{#each themeKeys as { key, label, optional }}
{#if showOptionalColors || !optional}
<ColorField
label={optional ? `${label} (optional)` : label}
bind:value={$customLightTheme[key]}
on:change={() => {
selectedLightThemeValue = 'custom';
showDarkTheme = false;
}}
{colorSpace}
/>
{/if}
{/each}
</div>

<div class="grid gap-2">
<div class="text-xs -mb-1 text-surface-content/50 font-semibold">Dark theme</div>
<ColorField
label="Primary"
bind:value={customDarkTheme.primary}
on:change={() => {
selectedDarkThemeValue = 'custom';
showDarkTheme = true;
}}
{colorSpace}
/>
<ColorField
label="Secondary"
bind:value={customDarkTheme.secondary}
on:change={() => {
selectedDarkThemeValue = 'custom';
showDarkTheme = true;
}}
{colorSpace}
/>
<ColorField
label="Accent"
bind:value={customDarkTheme.accent}
on:change={() => {
selectedDarkThemeValue = 'custom';
showDarkTheme = true;
}}
{colorSpace}
/>

{#if showOptionalColors}
<ColorField
label="Neutral (optional)"
bind:value={customDarkTheme.neutral}
on:change={() => {
selectedDarkThemeValue = 'custom';
showDarkTheme = true;
}}
{colorSpace}
/>
<!-- State colors -->
<ColorField
label="Info (optional)"
bind:value={customDarkTheme.info}
on:change={() => {
selectedDarkThemeValue = 'custom';
showDarkTheme = true;
}}
{colorSpace}
/>
<ColorField
label="Success (optional)"
bind:value={customDarkTheme.success}
on:change={() => {
selectedDarkThemeValue = 'custom';
showDarkTheme = true;
}}
{colorSpace}
/>
<ColorField
label="Warning (optional)"
bind:value={customDarkTheme.warning}
on:change={() => {
selectedDarkThemeValue = 'custom';
showDarkTheme = true;
}}
{colorSpace}
/>
<ColorField
label="Danger (optional)"
bind:value={customDarkTheme.danger}
on:change={() => {
selectedDarkThemeValue = 'custom';
showDarkTheme = true;
}}
{colorSpace}
/>
{/if}

<ColorField
label="Surface 100"
bind:value={customDarkTheme['surface-100']}
on:change={() => {
selectedDarkThemeValue = 'custom';
showDarkTheme = true;
}}
{colorSpace}
/>
{#if showOptionalColors}
<ColorField
label="Surface 200 (optional)"
bind:value={customDarkTheme['surface-200']}
on:change={() => {
selectedDarkThemeValue = 'custom';
showDarkTheme = true;
}}
{colorSpace}
/>
<ColorField
label="Surface 300 (optional)"
bind:value={customDarkTheme['surface-300']}
on:change={() => {
selectedDarkThemeValue = 'custom';
showDarkTheme = true;
}}
{colorSpace}
/>
{/if}
{#each themeKeys as { key, label, optional }}
{#if showOptionalColors || !optional}
<ColorField
label={optional ? `${label} (optional)` : label}
bind:value={$customDarkTheme[key]}
on:change={() => {
selectedDarkThemeValue = 'custom';
showDarkTheme = true;
}}
{colorSpace}
/>
{/if}
{/each}
</div>

<div>
Expand Down