Flux Developer

Appearance

On this page

Theme basics ​

Flux UI is designed with theming in mind, making it easy for you to customize its look and feel to suit your needs.

Flux UI's theming system is built using standard web APIs, which means you don't need to learn any new syntax or tools to customize the library's theme. All you need is a good understanding of CSS and CSS Variables.

To customize Flux UI's theme, you'll need to define values for the various CSS Variables that are used throughout the library's styles. These variables control things like colors, font sizes, and spacing, among other things. By changing the values of these variables, you can customize the look and feel of Flux UI to suit your needs.

Built in themes ​

Flux already comes with a couple of themes that you can try out:

Default dark.css cyberpunk.css retro.css black.css

TIP

When using create-flux-app, you should not need to do this. Theming is controlled by the user, and you should not hard code that.

To use them in your project import one of them like this:

js
import "@fluxsocial/ui/themes/{name}.css";

And then add the name to the html element like this:

html
<html class="dark">
  <head></head>
  <body></body>
</html>

Creating your own theme ​

Changing CSS variables ​

Change the primary hue value to change the primary color like this:

Activate
css
html.color {
  --j-color-primary-hue: 10;
}

Or create a simple dark mode by just modifying two properties:

Activate
css
html.dark-mode {
  --j-color-subtractor: 100%;
  --j-color-multiplier: -1;
}