Recently, I developed a vuejs application incorporating Google's material design components.
I've been exploring options to customize the background color.
<template>
<div class="page-container">
<md-app>
<md-app-toolbar class="md-primary" md-elevation="0">
<md-button class="md-icon-button" @click="toggleMenu" v-if="!menuVisible">
<md-icon>menu</md-icon>
</md-button>
<span class="md-title">My Title</span>
</md-app-toolbar>
<md-app-drawer :md-active.sync="menuVisible" md-persistent="mini">
<md-toolbar class="md-transparent" md-elevation="0">
<span>Navigation</span>
<div class="md-toolbar-section-end">
<md-button class="md-icon-button md-dense" @click="toggleMenu">
<md-icon>keyboard_arrow_left</md-icon>
</md-button>
</div>
</md-toolbar>
<md-list>
<md-list-item>
<md-icon>move_to_inbox</md-icon>
<span class="md-list-item-text">Inbox</span>
</md-list-item>
<md-list-item>
<md-icon>send</md-icon>
<span class="md-list-item-text">Sent Mail</span>
</md-list-item>
<md-list-item>
<md-icon>delete</md-icon>
<span class="md-list-item-text">Trash</span>
</md-list-item>
<md-list-item>
<md-icon>error</md-icon>
<span class="md-list-item-text">Spam</span>
</md-list-item>
</md-list>
</md-app-drawer>
<md-app-content>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea.
</md-app-content>
</md-app>
</div>
</template>
After some research, I discovered that by including the following code snippets:
@import "~vue-material/dist/theme/engine"; // Import the theme engine
@include md-register-theme("default", (
primary: #3fffbe, // The primary color of your brand
accent: #1a11e8 // The secondary color of your brand
));
@import "~vue-material/dist/theme/all"; // Apply the theme
I am unsure how to integrate this into the drawer section for modifying the background color. Any suggestions?