Welcome to M3 Svelte! If you haven't already, play around with the components on the home page. It's rather fun. They even adapt to the theme you pick. You should also check out the Discord and GitHub if you want to keep track of this project.

The rest of this page covers some finer details of M3 Svelte. It isn't the place to look for component-specific info - the home page is.

Make your own components

Vanilla

Tailwind

Chances are M3 doesn't have everything you need. That's where you can make your own components while still using Material 3 elements. Here's an example.

<button>Click me</button>
<style>
  button {
    background-color: var(--m3c-surface-container-low);
    color: var(--m3c-primary);
    box-shadow: var(--m3-elevation-1);
    border-radius: var(--m3-shape-full);
  }
</style>

Apply your theme

body {
  @apply --m3-body-large;
  background-color: var(--m3c-background);
  color: var(--m3c-on-background);
}

So what's going on here?

We're using M3 Svelte globals. All, except colors, were defined in styles.css. All can be used and overridden in your own app. You can categorize these into...

Colors

These start with --m3c- and are defined in your theme. If you want a list of them, just read your theme's code!

Tokens

The truths of Material 3. These start with --m3- and look like --m3-elevation-1. They have a predefined value and live in @layer tokens.

There's more M3 theming beyond the theme page: you can modify these directly.

We recommend using vite-plugin-token-shaker to minify tokens by dropping unused ones, inlining rarely used ones, and mangling commonly used ones.

Variables

These start with --m3v-, but only a few can be set:

• Set --m3v-bottom-offset to shift up snackbars
• Set --m3v-background to calibrate the color of an outlined text field's box

Functions

These are shorthands for specific logic. M3 Svelte only has a few:

• --translucent([color], [opacity]) makes a color semitransparent
• --m3-density([size]) (theme-defined) adjusts a size

Mixins

These are shorthands for specific properties, applied with @apply --[name]. M3 Svelte's only global mixins are for font styles. You can and could override them to make your own theme.