Material App
This component is the base for Svelte Materialify and helps you to bootstrap your app. All other svelte materialify components are required to be inside of this component in order for them to properly inherit styles and helpers. MaterialApp should ideally only be used once inside your app.
MaterialAppMin instead! It only provides ress.css, theming and colors. API
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>Remove Css Helpers, Defaults and Typography
If you want to use your own heading styles, fonts, etc. and just want theming and colors out of the box:
<!-- Min version -->
<MaterialAppMin {theme}>
...
</MaterialAppMin>Ready For More?
Continue to learn more about svelte materialify with content selected by the creator.