1

我创建了一个 vuejs 应用程序，我正在使用谷歌的材料设计

我正在尝试找到一种更改背景颜色的方法。

<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>

如果您添加以下内容，我会阅读

@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

但不知道如何将其添加到抽屉中以更改背景。有任何想法吗？

4

2 回答 2

1

试试这个，我认为它对你有用

@import "~vue-material/dist/theme/engine"; // Import the theme engine

@include md-register-theme("default", (
  primary: md-get-palette-color(blue, A200), // The primary color of your application
  accent: md-get-palette-color(red, A200) // The accent or secondary color
));

@import "~vue-material/dist/theme/all"; // Apply the theme

其中 A200 是色调基于颜色重量，可以是 100、200、300、400、500、600、700、800、900、A100、A200、A400 或 A700

于 2018-06-13T13:51:38.093 回答
0

来自 Vue Material文档：

Vue Material 使用类来应用这些颜色意图：md-primary、md-accent和md-transparent. 背景颜色由主题引擎自动应用。

这也适用于md-app-drawer组件。您可以做的是覆盖其默认类样式。我想它恰好在md-drawer课堂上，所以它是：

.md-drawer {
    background: blue !important; // makes the drawer partially blue
}

md-drawer有一组子组件（如md-list）样式，您还必须覆盖这些样式。您的实际问题是“有没有办法通过主题设置来实现？”。如果是这样，我想答案是否定的。

于 2018-03-27T21:06:39.733 回答