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

{item.title}

{item.description}

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

{'\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}

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}

{#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: theme.forceDark !== undefined, onChange: (value: boolean) => theme = { ...theme, forceDark: value ? false : undefined } } }, { type: 'conditional', props: { condition: theme.forceDark !== undefined, 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 } } } } }, { 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}