We've meticulously designed Flux to look great out of the box, however, every project has its own identity. You can choose from our hand-picked color schemes or build your own theme by customizing CSS variables.
Base color
There are essentially two colors in a Flux project: the base color and the accent color.
The base color is the color of the majority of your application's content. It's used for things like text, backgrounds, borders, etc.
The accent color is the color of the primary action buttons and other interactive elements in your application.
Flux ships with "zinc" as the default base color, but you are free to use any shade of gray you'd like.
Because
zinc
is hard-coded throughout Flux's source code, you will need to redefine it in your Tailwind config if you'd like to use a different base color.
Here is an example of redefining "zinc" to "slate" in your Tailwind config:
Now, Flux will use "slate" as the base color instead of "zinc", and you can use "slate" inside your application utilities like you normally would:
Accent color
Under the hood, flux uses CSS variables for its accent colors. This means that you can change the accent color to any color you'd like.
We recommend you use the
interactive theme builder with pre-selected colors, however, if you'd like to use a different accent color, you can define the following CSS variables in your own css file:
You'll notice Flux uses three different hues in both light mode and dark mode for its accent color palette. Here are descriptions of each hue:
Tailwind allows you to use reference CSS variable colors inline like so:
However, this is not a very ergonomic syntax. If you'd rather use standard utility such as:
You can extend your Tailwind config to use CSS variables for your accent color like so:
Accent props
Certain design elements like tabs and links use the accent color by default. If you'd like to opt out of this behavior, and use the base color instead, you can use the
:accent="false"
prop: