CSS Custom Properties
Skeleton themes are generated using a number of CSS Custom Properties, also known as as CSS variables.
|Set the font family for your default base text.
|Set the font family for your heading text.
|Set the default text color for light mode.
|Set the default text color for dark mode.
|Set the border radius for small elements, such as buttons, inputs, etc.
|Set the border radius for large elements, such as cards, textfields, etc.
|Set the default border size for elements, including inputs.
|Set an accessible overlapping text or fill color per each theme color.
|Defines each color and shade value for your theme.
Similar to variables in other languages, CSS properties can be overwritten. By adding the following snippet in
/src/app.postcss, you can overwrite the base and container border radius styles for your active theme.
Likewise, you can override base and heading font family settings as shown below.
For deeper customization, consider cloning Skeleton's preset themes, modifying each as desired, then implementing as a custom theme. Follow the theme generator implementation guide for more information.
CSS-in-JS FormatNew in v2
Skeleton now defines theme settings via the CSS-in-JS format. This allows themes to be easily registered within the Skeleton Tailwind plugin, rather than relying on additional stylesheet imports.
Tailwind Plugin SettingsNew in v2
Themes are configured via Skeleton's Tailwind plugin in your
tailwind.config.[ts|js|cjs], found in your
Skeleton provides a number of preset themes out of the box. You'll need to register at least one theme to load them and make them available to use.
/src/app.html and define the active theme to display using the
You can modify this attribute to dynamically switch between any registered theme.
Preset themes may sometimes include additional optional features, such as: heading font weights, background mesh gradients, and more.
To enable these settings, include
enhancements as shown below.
View the theme generator for more information about implementing custom themes. Note that it is possible to mix and match preset and custom themes.
By default Tailwind opts for light mode. If you wish to default to dark mode, append the following class to the
Tailwind's documentation for more information.
Note that Skeleton also provides a Lightswitch utility if you wish toggle between light and dark modes.
The background color of your application is automatically set using one of Skeleton's design token styles. By default, this utilizes
--color-surface-50 for light mode and
--color-surface-900 for dark mode. Use your global stylesheet
app.postcss to modify this.
Images and Gradients
You may optionally provide a background image, including the use of a CSS mesh gradient. Replace the static color values with theme color properties to create a fully adaptive gradient background.
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.