我们可以根据应用当前使用的主题，改变应用的标志还有应用小图标的颜色。 回到项目，先打开 app-logo 组件，在组件里先导入 mapGetters ，它来自 vuex 这个包。

然后在组件的 computed 选项里面，把执行 mapGetters 返回的东西放进来，一个对象，本地叫 theme，对应的是 layout 模块里 theme。

修改一下 appLogoStyles ，在里面声明一个 color ，然后可以判断一个组件里的 color 属性有没有值，如果有，就让 color 等于这个 color 属性的值。 如果没有，我们可以根据主题来设置这个 color ，判断一下主题是不是等于 dark，如果是，就让 color 的值是 #585858 ，如果不是就让 color 的值是 #000000 。

修改一下提供的样式， color 这个样式的值可以设置成上面准备好的这个 color 。 找到组件里的这个 color 属性，可以把给这个属性设置的默认的值删除掉。

回到浏览器观察一下应用的标志，当前是暗色主题，应用标志的颜色就会是 585858 。 切换一下主题，改成亮色主题，应用标志的颜色就会是黑色。

应用标志

下面再用同样的方法修改一下应用的小图标组件，先复制一下这块代码，打开 app-icon 组件，找到组件的 appIconStyles ，把复制的代码粘贴到这里。 修改一下返回的 color 样式的值，让它等于上面准备好的 color 的值。

找到组件的 color 属性，去掉这个属性默认的值。 然后在组件里面，还得再导入 mapGetters ，它来自 vuex 。

把执行这个 mapGetters 返回的结果放在这个组件的 computed 属性里面，组件里面叫 theme，对应的是 layout 模块里的 theme 这个获取器。

最后再回到浏览器预览一下，现在应用使用的是暗色主题，应用的标志还有小图标的颜色是一种灰色。 切换一下应用的主题，在亮色主题的下面，应用标志还有小图标都是黑色的。