Use M3 Svelte

1

Install M3 Svelte with npm i m3-svelte (or your package manager).
2

StyleFromScheme

Manual
Copy a theme snippet and paste it on your site.
+layout.svelte or similar
```
<script>
  import { StyleFromScheme } from "m3-svelte";
</script>

[your theme snippet]
```

Get a font for M3 Svelte to use.

app.html

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" />

Match up with M3 Svelte

Make your body match up with the rest of M3 Svelte

app.html

<body class="m3-font-body-large">

app.css

body {
  background-color: rgb(var(--m3-scheme-background));
  color: rgb(var(--m3-scheme-on-background));
}

Start using components

+page.svelte

<script>
  import { Button } from "m3-svelte";
</script>

<Button type="filled" on:click={() => alert("Hello world!")}>Hello world!</Button>

Start using variables

Plain

Tailwind

+page.svelte

button {
  background-color: rgb(var(--m3-scheme-surface-container-low));
  color: rgb(var(--m3-scheme-primary));
  box-shadow: var(--m3-util-elevation-1);
  border-radius: var(--m3-util-rounding-full);
}

Have fun!
(FYI if your app.css isn't working, make sure you imported it from where your app gets mounted, like in +layout.svelte.)

Use customization

There are a few variables you should know about.
You might already know that you can change the default font stack with --m3-font, but you can also customize the fonts of certain sizes (eg --m3-font-label) and their configuration (eg --m3-font-label-large-size).
If you want to mess around with the shapes of things, you can configure rounding both at a high level (eg --m3-util-rounding-large) and low level (eg --m3-button-shape)
If you use outlined text fields, use --m3-util-background to make them match up with your background.
If you want to decrease your bundle size by removing ripples, define M3_SVELTE_NO_RIPPLE to true using Vite's define functionality.