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

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 class="m3-layer">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>

If layers don't work on your own components, or even in M3 Svelte's, you may need to import "m3-svelte/etc/layer".

Apply your theme

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

So what's going on here?

We're using M3 Svelte globals.

Some globals are defined in styles.css. If you want to change them, nothing's stopping you from overriding them in your own theme.

Other globals are defined directly in your theme - you can read and write them there.

Tokens

These live in @layer tokens. M3 Svelte defines many, like elevations (--m3-elevation-0 through --m3-elevation-5) and shapes (--m3-shape-[size] where size is none, extra-small, small, medium, large, extra-large, or full). Colors, the --m3c- variables, are also tokens.

Want these to be minified and inlined? The "Use token-shaker" option from setup does that.

Variables

These start with --m3v-, and let you send information to M3 Svelte.

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

Functions

These are shorthands for specific logic, like:

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

Mixins

These are shorthands for specific properties, applied with @apply --[name].

M3 Svelte's built in mixins: font styles (@apply --m3-[scale]-[size]. scales: display, headline, title, body, label. sizes: large, medium, small) and focus styles (@apply --m3-focus-inward and @apply --m3-focus-none).