A Material theme for the Skeleton UI library.
The Skeleton Material Theme is an example app that aims to create a Material-like theme using SvelteKit and Skeleton UI. The theme is configured in two files, “material.ts” which is the main theme file for the Skeleton app, and “app.postcss” which contains additional styles and CSS corrections. The theme also includes a ripple effect, implemented using the svelte-ripple-action NPM package. The default color of the ripple effect is set to the text color, but it can be customized using CSS, Tailwind class, or Svelte action arguments.
To add the Skeleton Material Theme to your project, follow these steps:
Step 1: Install the required NPM packages
npm install sveltekit skeleton-ui svelte-ripple-action
Step 2: Create the main theme file “material.ts” and add the necessary configurations.
Step 3: Create the “app.postcss” file and add any additional styles and CSS corrections.
Step 4: Use the use:ripple Svelte action to add ripple effects to DOM elements. The default ripple color is set to the text color, but it can be customized using CSS, Tailwind class, or Svelte action arguments.
Step 5: If you want to implement automatic global ripple effects, add JavaScript code to your layout file (e.g., “+layout.svelte”) that applies the ripple effect to all elements with specific classes (e.g., “btn” or “btn-icon”).
The Skeleton Material Theme is a SvelteKit app that creates a Material-like theme using Skeleton UI. It provides a configurable theme file and includes a ripple effect implemented using the svelte-ripple-action NPM package. The theme can be installed by adding the necessary configurations, including the main theme file and additional styles in “app.postcss”. Ripple effects can be added using the use:ripple Svelte action, and automatic global ripple effects can be implemented by adding JavaScript code to apply the effect to elements with specific classes.