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 "@svar-ui/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 "@svar-ui/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 "@svar-ui/svelte-filter";
    import { WillowDark } from "@svar-ui/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>

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:

<script>
  import { getData } from "./common/data";
  import { FilterBuilder } from "@svar-ui/svelte-filter";
  import { Willow } from "@svar-ui/svelte-core";
</script>

<div style="width:300px">
  <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.