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:

<style>
  :global(.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*/
  }
</style>

The same settings for the WillowDark theme:

<style>
  :global(.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);
  }
</style>

Applying a theme

Apply the desired theme by importing the theme and wrapping FilterBuilder or FIlterEditor into the required theme tag:

<script>
  import { Willow } from "wx-svelte-core";
   
</script>

<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 Filter.

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

Example:

<script>
    import { getData } from "./common/data";
    import { FilterBuilder } from "wx-svelte-filter;
    const { fields, options } = getData();

</script>
    
  <div class="demo" style="padding: 20px;">
    <div>
        <FilterBuilder {fields} {options} />
    </div>
 </div>

<style>
    .demo {
      --wx-filter-value-color: #3c24aa;
      --wx-filter-and-background: #3c24aa;
      --wx-filter-or-background: #ca2929;
  }
</style>

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

<script>
    import { getData } from "./common/data";
    import { FilterBuilder } from "wx-svelte-filter;
    import { WillowDark } from "wx-svelte-core";

    const { fields, options } = getData();

</script>

<Material>
    <FilterBuilder {fields} {options} />
</Material>

<style>
    :global(.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);
    }
</style>