Skeleton Material Theme

A an example app which attempts to create a Material-like theme using SvelteKit and Skeleton UI.

This site demo has been deployed to GitHub pages.

Theme

Configuration

The theme is configured in two files:

• material.ts      <- The main theme file for Skeleton
• app.postcss   <- Contains some extra styles & CSS corrections

Ripple Effect

The svelte-ripple-action NPM package was installed to implement the material ripple.

npm install svelte-ripple-action

To add a Ripple effect to a DOM element, you can use the use:ripple Svelte action.

e.g.

<button class="btn variant-filled-primary" use:ripple>primary</button>

[!NOTE]

The default color of the ripple is set to the text color.

You can set the ripple color either using CSS, Tailwind class, or using the Svelte action arguments.

[!WARNING]

The ripple effect action cannot be added to child elements of pre-built components because the elements (i.e. buttons) are not exposed to the developer and use:ripple cannot be added.

If you wish to add ripple effects to child elements of pre-built components (modals, paginators, steppers, etc) - you need to configure JavaScript, as described below.

How to implement Automatic global ripple effect

If you want the ripple effect to be configured globally (or for chidren of a DOM element), without needing to use use:ripple, you can consider adding JavaScript to apply the ripple effect to all elements with specific classes.

This can allow buttons inside of pre-built components (modals, toasts, stepper-form, etc) to have ripple effects.

For example, below is a Svelte action which you can place in +layout.svelte to automatically add ripple effects to all elements with the btn or btn-icon class:

/**
 * Every 100ms, add ripple effect to all .btn, .btn-icon class elements
 * if they do not already have a ripple effect configured.
 */
function rippleBtnClass(e: Element) {
    setInterval(() => {
        const btns = e.querySelectorAll('.btn, .btn-icon');
        btns.forEach((el) => {
            if (!el.classList.contains('ripple-effect')) {
                ripple(el as HTMLElement);
            }
        });
    }, 100);
}

Usage:

<svelte:body use:rippleBtnClass />