Theme Creator
{'\ueb44'}
Need help? Check out the docs!
{#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: '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: '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}
\ueb44
{theme.coverImage ? 'Change' : 'Add'} cover image
{#if !theme.hideThemeName && theme.coverImage}
{theme.name}
{/if}
{#if theme.coverImage}
})
{/if}
{#each theme.CustomImages as image (image.id)}
{/each}
Add image