Theming

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.

Build your theme with our interactive theme builder ->

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:

Copy to clipboard

import colors from 'tailwindcss/colors';export default {    ...    theme: {        extend: {            colors: {                // Re-assign Flux's base color (zinc) to a different shade of gray...                zinc: colors.slate,            },        }    },};

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:

Copy to clipboard

<flux:text class="text-slate-800 dark:text-white">...</flux:text>

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:

Copy to clipboard

/* resources/css/app.css */@layer base {    :root {        --color-accent: var(--color-red-500);        --color-accent-content: var(--color-red-600);        --color-accent-foreground: var(--color-white);    }    .dark {        --color-accent: var(--color-red-500);        --color-accent-content: var(--color-red-400);        --color-accent-foreground: var(--color-white);    }}

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:

Variable	Description
--color-accent	The main accent color used is the background for primary buttons.
--color-accent-content	A (typically) darker hue used for text content because it's more readable.
--color-accent-foreground	The color of (typically) text content on top of an accent colored background.

Tailwind allows you to use reference CSS variable colors inline like so:

Copy to clipboard

<button class="bg-[var(--color-accent)] text-[var(--color-accent-foreground)]">

However, this is not a very ergonomic syntax. If you'd rather use standard utility such as:

Copy to clipboard

<button class="bg-accent text-accent-foreground">

You can extend your Tailwind config to use CSS variables for your accent color like so:

Copy to clipboard

export default {    ...    theme: {        extend: {            colors: {                accent: {                    DEFAULT: 'var(--color-accent)',                    content: 'var(--color-accent-content)',                    foreground: 'var(--color-accent-foreground)',                },            },        }    },};

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:

Copy to clipboard

<!-- Link --><flux:link :accent="false">Profile</flux:tab><!-- Tabs --><flux:tabs>    <flux:tab :accent="false">Profile</flux:tab>    <flux:tab :accent="false">Account</flux:tab>    <flux:tab :accent="false">Billing</flux:tab></flux:tabs><!-- Navbar --><flux:navbar>    <flux:navbar.item :accent="false">Profile</flux:navbar.item>    <flux:navbar.item :accent="false">Account</flux:navbar.item>    <flux:navbar.item :accent="false">Billing</flux:navbar.item></flux:navbar><!-- Navlist --><flux:navlist>    <flux:navlist.item :accent="false">Profile</flux:navlist.item>    <flux:navlist.item :accent="false">Account</flux:navlist.item>    <flux:navlist.item :accent="false">Billing</flux:navlist.item></flux:navlist>

Built with by
Caleb Porzio and Hugo Sainte-Marie