Material App

API

• MaterialApp

Usage

The default theme is the light theme, this is how ideally your base layout should look. It is also recommended that you store the theme variable in a store and can access it in any component you want and also if you want your user selected theme to be saved, use localStorage

<script>
  import { MaterialApp } from 'svelte-materialify';
  let theme = 'light';

  function toggleTheme() {
    if (theme === 'light') theme = 'dark';
    else theme = 'light';
  }
</script>

<MaterialApp {theme}>
  <button on:click="{toggleTheme}">Toggle Theme</button>
  ...
</MaterialApp>

Manually Set Themes

Suppose if you want your div to be dark themed no matter what the theme of the app is then add the class theme--dark to the div or theme--light if you want it to be light themed.

<MaterialApp {theme}>
  <!-- this div will have dark theme no matter the value of {theme} -->
  <div class="theme--dark">...</div>
</MaterialApp>