{ item.direction === 'vertical' && toggleAccordion(item.title, e) }} onkeydown={(e) => { e.key === 'Enter' && item.direction === 'vertical' && toggleAccordion(item.title, e) }} class="flex justify-between pr-4 {item.direction === 'vertical' ? 'cursor-pointer w-full select-none' : ''}">

{item.title}

{item.description}

{#if item.direction === 'vertical'}

{#if item.type === 'codeEditor'} {/if} {'\ue9e6'}

{/if}

{#if !closedAccordions.includes(item.title)}

{#if item.type === 'switch'} {:else if item.type === 'button'}

{/each}

{'\uec60'} Add image

{:else if item.type === 'lightDarkToggle'} {/if}

{#if codeEditorFullscreen}

Custom CSS

{ theme = { ...theme, CustomCSS: value } }} />

{/if}

Theme Creator

{'\ueb44'} Need help? Check out the docs!

Theme Name

Description (optional)

{'\uec60'}

{theme.coverImage ? 'Change' : 'Add'} cover image {#if !theme.hideThemeName && theme.coverImage}

{theme.name}

{/if} {#if theme.coverImage}

{/if}

Adaptive CSS variables

One per line, each must start with --. These receive the same colour as the adaptive accent when "Adaptive theme colour" is enabled in general settings. Use them in Custom CSS, e.g. border-color: var(--my-accent);

{#each [ { type: 'switch', title: 'Hide Theme Name', description: 'Useful when your cover image contains text', props: { state: theme.hideThemeName, onChange: (value: boolean) => theme = { ...theme, hideThemeName: value } } }, { type: 'switch', title: 'Force Theme', description: 'Force users to use either dark or light mode', props: { state: shouldForceThemeAppearance(theme), onChange: (value: boolean) => { if (value) { theme = { ...theme, forceTheme: true, forceDark: false }; } else { theme = { ...theme, forceTheme: false, forceDark: undefined }; } } } }, { type: 'conditional', props: { condition: shouldForceThemeAppearance(theme), children: { type: 'lightDarkToggle', title: 'Mode', description: 'Choose whether to force light or dark mode', props: { state: theme.forceDark === true, onChange: (value: boolean) => (theme = { ...theme, forceDark: value, forceTheme: true }) } } } }, { type: 'colourPicker', title: 'Default Theme Colour', description: 'Set the default color for your theme', direction: 'vertical', props: { customState: theme.defaultColour, customOnChange: (color: string) => theme = { ...theme, defaultColour: color } } }, { type: 'imageUpload', title: 'Custom Images', description: 'Add custom images to your theme', direction: 'vertical', }, { type: 'codeEditor', title: 'Custom CSS', description: 'Add custom CSS to your theme', direction: 'vertical', props: { value: theme.CustomCSS, onChange: (value: string) => { theme = { ...theme, CustomCSS: value } } } } ] as SettingItem[] as setting} {@render settingItem(setting)} {/each}