Advanced Color & Theming

Unlock the full power of Axiom's dynamic and flexible theming system.

Live Theme Showcase

Use the theme switcher below to see how all components on this page instantly adapt to the new color scheme. This is the power of CSS variables at the core of Axiom.

Building with Color

Axiom's semantic color system makes it easy to build beautiful, consistent interfaces. Here are some examples of how to combine colors to create stunning components.

Themed Card

Primary Container

This card uses the primary container color for its background, ensuring perfect text contrast.

Themed Alert

Error! Something went wrong.

Themed Badges

Secondary Tertiary

Creating a Custom Theme

Creating a new theme is as simple as defining a new set of CSS variables. You can use the interactive color pickers below to help you generate the code for your own theme.

Primary Color

Secondary Color