在页面边栏上可以添加一个能切换页面主题用的小图标。回到项目，先去创建一个组件，放在 src/sidebar/components 的下面，名字是 app-sidebar-item-theme.vue 。

在这个文件里定义一个组件，组件的名字是 AppSidebarItemTheme ，打开 app-sidebar 组件，在组件里面导入刚才创建的组件，名字是 AppSidebarItemTheme，位置是当前目录 components 下面的 app-sidebar-item-theme。

在组件的模板里面添加一个组件，AppSidebarItemTheme。 然后在组件的模板里，用一下 AppSidebarItemTheme 这个组件。现在页面上会显示这个组件里的内容。

回来继续再编辑一下这个组件，在组件里先从 vuex 里面导入 mapGetters 还有 mapMutations 。在这个组件里还需要使用小图标，可以导入 AppIcon 这个组件，位置是 @/app/components/app-icon

在组件的 components 选项里面添加一个 AppIcon 。 然后再修改一下组件的模板，一组 div 上面加上 app-sidebar-item 这个类，再加上一个 theme，还有一下 bottom 。

里面包装的东西就是 AppIcon 这个组件， 绑定 name 属性的值，设置成 themeIcon， 再绑定一下 click 事件，事件处理器设置成 onClickThemeIcon 。

找到组件的 computed 选项，把执行 mapGetters 返回的东西放进来，一个对象，本地组件里面叫 theme，对应的就是 layout 下面的 theme 这个 getter 方法。

下面再添加一个计算属性，名字叫 themeIcon ，这个属性可以返回要使用的小图标的名字，这个小图标的名字可以根据当前主题来决定。

判断一下 theme 的值是不是等于 dark ，如果是，就返回 wb_sunny ，如果不是就返回一个 wb_incandescent [ˌɪnkænˈdesnt]

在组件的 methods 里面，把执行 mapMutations 返回的值放进来， 本地组件里叫 setTheme ，对应的是 layout 模块里的 setTheme 这个 mutation 方法。

然后可以再添加点击事件的处理器，名字是 onClickThemeIcon ，在这个方法里可以设置 layout 模块里的 theme 这个数据的值。

声明一个 theme ，它的值可以判断一下当前主题是不是等于 dark，如果是就让这个 theme 的值是 light，如果不是，就让它的值等于 dark。

执行一下组件里的 setTheme 这个方法，把 theme 交给它。

样式

打开 app-sidebar.css ，这里要设计一下 .app-sidebar-item.bottom 的样式，也就是同时包含这两个类的样式， flex-grow 设置成 2，再把 display 设置成 flex，然后把 align-items 设置成 flex-end 。

测试

回到浏览器，点击这个小图标可以切换页面的主题，这个小图标也会随着主题的改变而发生变化。 鼠标放在小图标上面的时候可以把指针设置成手型。 在这个图标组件的上面添加一个 class 属性，添加一个叫 pointer 的类。

然后打开 app.css 这个样式表，去掉里面的东西，设计一下 .pointer 这个类的样式，把 cursor 设置成 pointer 。

再到浏览器上试一下，现在把鼠标放在这个小图标的上面，鼠标指针就会变成手型。