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 Property | Description |
---|---|
--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.
: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.
: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 v2Skeleton now defines theme settings via CSS-in-JS format. This allows means themes can be easily injected into the Skeleton Tailwind plugin rather than requiring additional CSS stylesheet imports.
Backgrounds
Your app's background color is set automatically via a design token.
This utilizes --color-surface-50
for light mode and --color-surface-900
for dark mode by default. Here's a few examples illustrating how to modify this in app.postcss
:
/* 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.
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.
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
/>