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. 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 Suppose if you want your MaterialApp
should ideally only be used once inside your app. API
Usage
<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
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>
Ready For More?
Continue to learn more about svelte materialify with content selected by the creator.