Colors

Primary Color
Secondary Colors
Material Color Schemes

Primary Color

Colors in Konsta UI are a bit tricky, because for example "Material You" design comes with whole set of different colors.

Konsta UI generate all required colors automatically, based on colors provided in @theme declaration.

@import 'tailwindcss';
@import 'konsta/react/theme.css';

@theme {
  --color-brand-primary: #007aff;
}

It's important to note that color variable should start with --color-brand- prefix.

Only colors defined with --color-brand- will be used for Konsta UI components theming.

Secondary Colors

If you want some secondary colors for Konsta UI components, let's say to make some button red, you need to specify these colors in same @theme declaration:

@theme {
  --color-brand-primary: #007aff;
  --color-brand-red: #ff0000;
  --color-brand-green: #00ff00;
}

And to apply these colors, we need to add k-color-[name] class to required component, e.g.:

<Button>Usual Button</Button>
<Button class="k-color-brand-red">Red Button</Button>
<Button class="k-color-brand-green">Green Button</Button>

Such colors will be correctly inherited, so k-color-[name] class can be added to parent elements as well, e.g.:

<Page class="k-color-brand-red">
  <Button>Red Button</Button>
  <Button>Red Button</Button>
  <Button>Red Button</Button>
</Page>

Material Color Schemes

There are 2 new additional color schemes for Material Design, you can use them by adding additional class to wrapping elements (e.g. <html> or <body>):

Monochrome Scheme - by adding k-md-monochrome class,
Vibrant Scheme - by adding k-md-vibrant class

These schemes are available only for Material Design, so if you are using iOS or Android Design, these classes will be ignored.

Colors

Contents

Primary Color

Secondary Colors

Material Color Schemes