Theme Generator
Toggle the "Enable Preview" option to begin creating a new theme. The entire documentation site will update as you progress. You can navigate to different sections without losing your settings as long as you do not refresh the page. Disabling the preview will reset back to your original theme.
Enable Preview
Fonts
Text Color
Border Radius
Border Size
Preview
Implement Your Theme
Generate your theme above, copy the source, then paste this into a new file in the root of your project with a distinct name, such as: my-custom-theme.[ts|js]
. Make sure to strip out the Typescript type information within your theme if you opt for the Javascript format.
Open tailwind.config.[cjs|js|ts]
found in the root of your project, and import your custom theme.
import { myCustomTheme } from './my-custom-theme'
Within this same file, register your custom theme via the Skeleton Tailwind plugin settings as shown below.
plugins: [
skeleton({
themes: {
custom: [
myCustomTheme
]
}
})
]
Open /src/app.html
and define your theme using the data-theme
attribute. The value should match the name
field set within your theme source code.
<body data-theme="my-custom-theme">
Note that custom themes can be registered alongside Skeleton's preset themes, allowing you to switch between these as desired.
Advanced Color Curation
Looking for deeper customization? We recommend using Palette Generator. This includes support for hue, saturation, and lightness adjustments. Pair this with the Hex-To-RGB extension to convert each Hex color value to RGB in bulk with VS Code.