Skeleton — UI Toolkit for Svelte + Tailwind

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.

Create a Mesh

css

html, body { @apply h-full; }
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%);
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

CSS Properties

If you open any existing theme, you can see they are made up of a number of CSS Custom Properties (aka CSS Variables). Similar to Javascript variables these can be modified and overwritten as desired. For example, if you add the following snippet to your global stylesheet in /src/app.postcss, you can overwrite the base and container rounding styles for your current theme.

css

:root {
	--theme-rounded-base: 20px;
	--theme-rounded-container: 4px;
}

Likewise, if you wish to implement a custom font family for a preset theme, you can modify the base and heading properties as shown below.

css

:root {
    --theme-font-family-base: 'MyCustomFont', sans-serif;
    --theme-font-family-heading: 'MyCustomFont', sans-serif;
}

View any existing theme for a full list of available CSS custom properties. For heavy modifications to preset themes, consider copying the theme to your local project and use it like any other custom theme.

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.

Local (recommended)

Remote

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.

Use CSS Property overrides or open your custom theme to set the font family for 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;
    /* ... */
}

5. Preloading Fonts.

To avoid your page flickering during hydration, consider preloading fonts within the head tag in app.html