Skip to main content

Styling

You can customize styles of the FilterBuilder and FilterEditor components interface to meet your project requirements. The library provides css variables with two built-in themes:

  • Willow
  • WillowDark

Theme settings​

Willow theme settings:

.wx-willow-theme {
  --wx-filter-value-color: var(--wx-color-primary); /* text value color in FilterBuilder*/
  --wx-filter-and-background: #fcba2e; /* background for the glue "and" logic button in FilterBuilder*/
  --wx-filter-or-background: #77d257; /* background for the glue "or" logic button in FilterBuilder*/
  --wx-filter-and-font-color: var(--wx-color-font); /* font color for the glue "and" logic button in FilterBuilder*/
  --wx-filter-or-font-color: var(--wx-color-font); /* font color for the glue "or" logic button in FilterBuilder*/
  --wx-filter-border: 1px solid #e6e6e6; /* filter border around filter blocks in  FilterEditor*/
}

The same settings for the WillowDark theme:

.wx-willow-dark-theme {
  color-scheme: dark;

  --wx-filter-value-color: #ac9eff;
  --wx-filter-and-background: #fcba2e;
  --wx-filter-or-background: #77d257;
  --wx-filter-and-font-color: #000000b3;
  --wx-filter-or-font-color: #000000b3;
  --wx-filter-border: var(--wx-border);
}

Applying a theme​

Apply the desired theme by importing the theme and wrapping FilterBuilder or FilterEditor into the required theme component:

import { Willow } from "@svar-ui/react-core";

<Willow>
  <FilterBuilder />
</Willow>

Customizing theme settings​

To change the styles, create a CSS class by changing values of the required CSS variables and apply it to the Filter.

The example below will change any current theme applied to the Filter.

Example:

import { getData } from "./common/data";
import { FilterBuilder } from "@svar-ui/react-filter";
import "@svar-ui/react-filter/all.css";

const { fields, options } = getData();

<div className="demo" style={{ padding: 20 }}>
  <div>
    <FilterBuilder fields={fields} options={options} />
  </div>
</div>
.demo {
  --wx-filter-value-color: #3c24aa;
  --wx-filter-and-background: #3c24aa;
  --wx-filter-or-background: #ca2929;
}

The example below demonstrates how to change the WillowDark theme that is applied to the component:

import { getData } from "./common/data";
import { FilterBuilder } from "@svar-ui/react-filter";
import { WillowDark } from "@svar-ui/react-core";
import "@svar-ui/react-filter/all.css";

const { fields, options } = getData();

<WillowDark>
  <FilterBuilder fields={fields} options={options} />
</WillowDark>
.wx-willow-dark-theme {
  --wx-filter-value-color: rgb(38, 17, 156);
  --wx-filter-and-background: rgb(134, 96, 13);
  --wx-filter-or-background: rgb(87, 210, 179);
}

Disabling fonts​

Whenever you need to disable the fonts used in a theme, you can make use of the fonts property of the theme and set it to the false value:

import { getData } from "./common/data";
import { FilterBuilder } from "@svar-ui/react-filter";
import { Willow } from "@svar-ui/react-core";
import "@svar-ui/react-filter/all.css";

const { fields, options } = getData();

<div style={{ width: 300 }}>
  <Willow fonts={false}>
    <FilterBuilder />
  </Willow>
</div>
Pay attention

Please note that if you switch the default fonts off, you will have to include the fonts you need by yourself.