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.
<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.
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.
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.
:root {
--theme-rounded-base: 20px;
--theme-rounded-container: 4px;
}
Likewise, if you wish to implement a custom the font family for a preset theme, you can modify the base and heading properties as shown below.
: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.
1. Download a Font
Select a font on Google Fonts, then tap the "Download Family" button near the top-right of the page.
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.
/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.
@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.
: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
<link
rel="preload"
href="%sveltekit.assets%/fonts/Inter-VariableFont_slnt,wght.ttf"
as="font"
type="font/ttf"
crossorigin
/>