Themes

Learn more about Skeleton themes and customizing.

CSS Custom Properties

Skeleton themes are generated using a number of CSS Custom Properties, also known as as CSS variables.

CSS PropertyDescription
--theme-font-family-base Set the font family for your default base text.
--theme-font-family-heading Set the font family for your heading text.
--theme-font-color-base Set the default text color for light mode.
--theme-font-color-dark Set the default text color for dark mode.
--theme-rounded-base Set the border radius size for small elements, such as buttons, inputs, etc.
--theme-rounded-container Set the border radicus for large elements, such as cards and textfields
--theme-border-base Set the default border size for various elements, including inputs.
--on-[color] Set the accessible overlapping text or fill color.
--color-[color]-[shade] Defines each color and shade value for your theme.

Overwriting Properties

Similar to variables in other languages, these can be modified and overwritten as desired. By adding the following snippet in /src/app.postcss, you can overwrite the base and container border radius styles for your active theme.

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

Likewise, you can override font family settings for your base and heading text settings as shown below.

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

For heavy modifications, consider cloning Skeleton's preset themes and implementing as a custom theme. Follow the guide provide on our theme generator documentation for more information.

CSS-in-JS Format

New in v2

Skeleton now defines theme settings via CSS-in-JS format. This allows themes to be easily injected into the Skeleton Tailwind plugin rather than requiring additional CSS stylesheet imports.

Tailwind Plugin Settings

New in v2

Themes are configured via Skeleton's Tailwind plugin in your tailwind.config.[cjs|js|ts], found in your project root.

Register Themes

Skeleton provides a number of preset themes out of the box. Register one or more within your Tailwind plugin settings.

typescript 
plugins: [
	skeleton({
		themes: {
			// Register a single theme:
			preset: [ "skeleton" ]

			// Register multiple themes:
			// preset: [ "skeleton", "modern", "crimson" ] 
		}
	})
]

Open /src/app.html and define the active theme using the data-theme attribute. You can modify this attribute to dynamically switch between themes.

html 
<body data-theme="skeleton">

Enhancements

Preset themes may implement additional optional features for your theme, including: setting font weights, background mesh gradients, and more. To enable these settings, use enhancements as shown below.

typescript 
plugins: [
	skeleton({
		themes: {
			// Enable 'enhancements' as shown below:
			preset: [
				{ name: "skeleton", enhancements: true }
			] 
		}
	})
]

Custom Themes

View the theme generator for more information about custom themes.

Backgrounds

The background color of your application is set automatically using one of Skeleton's design token styles. This utilizes --color-surface-50 for light mode and --color-surface-900 for dark mode by default. See the examples below to learn how to modify this in your app.postcss:

css 
/* Default setting: */
body { @apply bg-surface-50-900-token; }

/* Example: modified to the primary color via a design token: */
body { @apply bg-primary-50-900-token; }

/* Example: modified to the secondary color via Tailwind: */
body { @apply bg-secondary-50 dark:bg-secondary-900; }

/* Example: modified using vanilla CSS: */
body { background: red; }
.dark body { background: blue; }

Images and Gradients

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

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;
}

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.

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

html 
<link
	rel="preload"
	href="%sveltekit.assets%/fonts/Inter-VariableFont_slnt,wght.ttf"
	as="font"
	type="font/ttf"
	crossorigin
/>