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

50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900

Fonts

Text Color

Border Radius

Border Size

Preview

surface primary secondary tertiary glass success warning error

How to Implement

Generate your theme above, copy the source code, then paste this into a new file in the root of your project with a distinct name, such as: my-custom-theme.[ts|js]. If you opt for the Javascript format, make sure to strip out any Typescript type information.

Open tailwind.config.[ts|js|cjs] found in the root of your project, and import your custom theme.

typescript 
import { myCustomTheme } from './my-custom-theme'

Within this file, register your custom theme via the Skeleton Tailwind plugin settings.

typescript 
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's source code.

html 
<body data-theme="my-custom-theme">

Note that custom themes can be registered along with Skeleton's preset themes, allowing you to switch between these as desired.

Migrate from v1 to v2

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.