Themes

Learn more about customizing Skeleton themes.

Select your current theme to tailor the instructions below.

Preset Extras

When using preset themes provided by Skeleton, consider implementing the data-theme attribute on the body tag in app.html. This implements additional settings such as background gradients, header font weights, and more.

html 
<body data-theme="skeleton">

Backgrounds

Your app's background is automatically set via a design token class. Adjust your theme's color scheme to customize. This affects both light and dark mode.

css 
body { @apply bg-surface-50-900-token; }

Background Images

You may optionally provide a background image, including the use of CSS mesh gradients. Mix in theme color properties to create fully adaptive gradient backgrounds.

css 
body {
	background-image:
		radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%),
		radial-gradient(at 98% 1%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%);
}

Custom Fonts

Fonts may be installed from a local or remote source. For GDPR compliance and optimal performance we recommend installing the fonts locally. For this guide we'll demonstrate this process using free fonts from Google Fonts.

1. Download a Font

Select a font on Google Fonts, then tap the "Download Family" button near the top-right of the page.

Inter

2. Add the Font Files

Unzip the downloaded file, then copy all font files to the /static/fonts directory in the root of your SvelteKit project. When available we recommend using variable fonts as they require only a single file. Otherwise copy all static font file assets to the /static/fonts directory.

plaintext 
/static/fonts/Inter-VariableFont_slnt,wght.ttf

3. Apply @font-face

At the top of your global stylesheet /src/app.postcss append the @font-face settings per each font. The font-family assigns the font's reference name, while src points to the font file(s) in your /static/fonts directory.

css 
@font-face {
	/* Reference name */
	font-family: 'Inter';
	/* For multiple files use commas, ex: url(), url(), ... */
	src: url('/fonts/Inter-VariableFont_slnt,wght.ttf');
}

4. Set the Font Family.

When creating a custom theme, open your theme file and provide your desired font family set for the base and heading properties. Be sure to use the same reference name set above or your font will not work.

css 
:root {
    --theme-font-family-base: 'Inter', sans-serif;
    --theme-font-family-heading: 'Inter', sans-serif;
    /* ... */
}