Skip to main content

Styling

You can customize styles of the File Manager interface to meet your project requirements. The library provides a wide range of css variables with three built-in themes:

  • Willow
  • WillowDark
  • Material

Theme settings​

Willow theme settings:

:global(.wx-willow-theme) {
        --wx-theme-name: willow;

        --wx-fm-background: #f2f3f7;
        --wx-fm-box-shadow: 0px 1px 2px rgba(44, 47, 60, 0.06),
            0px 3px 10px rgba(44, 47, 60, 0.12);

        --wx-fm-grid-border: 1px solid #ededf1;
        --wx-fm-grid-header-color: #fafafb;
        --wx-fm-button-font-color: #9fa1ae;
        --wx-fm-toolbar-height: 56px;
}

WillowDark theme settings:

:global(.wx-willow-dark-theme) {
        --wx-theme-name: willow-dark;
        color-scheme: dark;

        --wx-fm-background: #2b343b;
        --wx-fm-box-shadow: none;

        --wx-fm-grid-border: 1px solid #384047;
        --wx-fm-grid-header-color: var(--wx-background);
        --wx-fm-button-font-color: #9fa1ae;
        --wx-fm-toolbar-height: 56px;
    }

Material theme settings:

    :global(.wx-material-theme) {
        --wx-theme-name: material;

        --wx-fm-background: #f2f3f7;
        --wx-fm-box-shadow: 0px 1px 2px rgba(44, 47, 60, 0.06),
            0px 3px 10px rgba(44, 47, 60, 0.12);

        --wx-fm-grid-border: 1px solid #ededf1;
        --wx-fm-grid-header-color: #fafafb;
        --wx-fm-button-font-color: #9fa1ae;

        --wx-fm-toolbar-height: 56px;
    }

Applying a theme​

Apply the desired theme by importing the theme and wrapping File Manager into the required theme tag:

<script>
    import { Filemanager } from ".@wx/svelte-filemanager";
    import { getData, getDrive } from "./common/data";
    import { Willow } from "@wx/svelte-filemanager";
    
</script>

<Willow>
 <Filemanager 
  data={getData()} 
  drive={getDrive()}
  //other settings />
</Willow>

Example of applying custom theme settings​

<script>
  import { getData, getDrive } from "./common/data";
  import { Filemanager } from "@wx/svelte-filemanager";
</script>

<div class="filemanager">
  <Filemanager data="{getData()}" drive="{getDrive()}" />
</div>

<style>
  .filemanager {
    height: 100%;
    width: 100%;
    --wx-color-primary: rgb(0, 128, 0);
    --wx-fm-background: rgb(207, 209, 221);
    --wx-fm-select-color: rgb(235, 235, 255);
    --wx-table-select-background: rgba(33, 195, 255, 0.1);
    --wx-table-select-focus-background: rgba(33, 195, 255, 0.1);
  }

  .filemanager > :global(.wx-filemanager .wx-cards) {
    color: rgba(0, 128, 0);
  }
</style>

Related sample: Styling