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.

Syntax highlighting colors

These variables control syntax highlighting in the FilterQuery component. They color each token type in the highlight overlay. Each has a hex fallback, so they work without a theme wrapper.

Variable	Controls	Default fallback
--wx-filter-query-field-color	Field name tokens (e.g., Status)	#2563eb
--wx-filter-query-value-color	Value tokens (e.g., Open)	#16a34a
--wx-filter-query-operator-color	Logical operators (and, or) and text operators	#9333ea
--wx-filter-query-comparison-color	Comparison symbols (>, <, ..)	#ea580c
--wx-filter-query-symbol-color	Structural symbols (:, ,, #) and wildcards (*)	#6b7280
--wx-filter-query-negation-color	Negation prefix (-)	#dc2626
--wx-filter-query-error-color	Invalid tokens (wavy underline)	#dc2626