Svelte Material UI

SvelteKit Installation

(You can also check out the SvelteKit example repo.)

You will need to install the packages you use individually as well as the theme package.

npm install --save-dev @smui/button
npm install --save-dev @smui/card
# etc...

npm install --save-dev smui-theme

Create your theme files with smui-theme.

npx smui-theme template src/theme

You can modify your theme variables in the files now in src/theme.

Theme Build Scripts

You’ll need one of these sets of prepare scripts in your package.json file. Note that SvelteKit already provides a “prepare” script, so you’ll need to modify it to look like below.

  • Without Dark Mode support.

    "prepare": "svelte-kit sync && npm run smui-theme",
"smui-theme": "smui-theme compile static/smui.css -i src/theme"

  • With Dark Mode support.

    "prepare": "svelte-kit sync && npm run smui-theme-light && npm run smui-theme-dark",
"smui-theme-light": "smui-theme compile static/smui.css -i src/theme",
"smui-theme-dark": "smui-theme compile static/smui-dark.css -i src/theme/dark"

Stylesheets

Now in your src/app.html file, add the following to the head section:

<!-- Material Icons -->
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<!-- Roboto -->
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700"
/>
<!-- Roboto Mono -->
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto+Mono"
/>

And this for without Dark Mode support.

<!-- SMUI Styles -->
<link rel="stylesheet" href="/smui.css" />

Or this for with Dark Mode support.

<!-- SMUI Styles -->
<link rel="stylesheet" href="/smui.css" media="(prefers-color-scheme: light)" />
<link
  rel="stylesheet"
  href="/smui-dark.css"
  media="screen and (prefers-color-scheme: dark)"
/>
info Note: There used to be a Vite config step at this point, because SMUI was packaged incorrectly. It is now packaged correctly, so that's no longer required.

Finishing Up

After that, run npm run prepare to build your CSS file, then you can run npm run dev to start developing. Happy coding!

Adding More SMUI Packages

Whenever you add a new SMUI package, run npm run prepare again to rebuild your CSS file with the new component’s styles included.