Filters

Add each filter you plan to use within scope of your filtered elements. To use globally throughout your application, add this to your application's root layout. Avoid importing filters you are not using.

import { Emerald, BlueNight /* ... */  } from '@skeletonlabs/skeleton';

<Emerald />
<BlueNight />

Applying a Filter

Use either of the two menthods below to apply your desired filter. The hash mark is required.

Via the Skeleton Action

Use the following Svelte action to to filter any element. Pass the filter name as the only parameter.

import { filter } from '@skeletonlabs/skeleton';

<img src={myImageSrc} use:filter={'#BlueNight'}>

Via Style Attribute

Alternatively you may apply filters using inline CSS. This is what the action is doing under the hood.

<img src={myImageSrc} style="filter: url({'#Emerald'})">

How It Works

This feature is enabled by the use of native browser SVG filters via feColorMatrix transformations.

Browser Support

Please be aware that browser support varies for this feature. Some filters are not functional in Safari, while Firefox is not supported at all. For non-supported browsers the filter will not be present but the image will still display, which allows for progressive enhancement.