Theme Customization Wizard

Axiom01's theming system is built on CSS variables, offering unparalleled flexibility. Use this interactive wizard to generate your own custom theme by adjusting core HSL color components and other key variables. See your changes reflected live and export the generated CSS for your project.

How to Use

Adjust the sliders and input fields in the "Customize Your Theme" panel. The "Live Preview" section will update in real-time, showing you how your changes affect various elements. Once you're satisfied with your theme, copy the generated CSS variables from the "Exported CSS Variables" section and paste them into your project's stylesheet.

Customize Your Theme

Primary Color

Hue: 220

Saturation: 70%

Brightness: 50%

Spacing Unit

Base Space Unit (rem): 1

Border Radius

Base Border Radius (px): 5

Live Preview

Adjust the controls to see how your theme changes instantly.

Primary Color Example

Secondary Color Example

Surface Color Example

This is some text on the surface color. It should be easily readable.

Exported CSS Variables

Copy the CSS below and paste it into your project's stylesheet to apply your custom theme. You can place it in your :root selector or within a [data-theme="your-theme-name"] block.