我们的应用支持两种主题，亮色主题还有暗色主题，先去创建一个样式表，放在 src/app/styles 的下面，名字叫 theme.css。 再打开应用的根组件，就是这个 app 组件，在组件里面导入刚才创建的这个样式表，位置是当前目录 styles 下面的 theme.css。

回来继续编辑一下这个 theme 样式表。 设置一下 .page.light 的样式，这个样式选择器的意思是同时包含 page 还有 light 这两个类的元素。

在这里我们可以设置一些要在亮色主题里面使用的一些变量，先添加两个跟背景相关的变量，这些变量的名字可以用两条小横线开头，添加一个 --primary-background，在亮色主题的下面，主要的背景颜色可以是白色。

然后再添加一个 --light-background，颜色可以是 #f8f8f8 。 再添加一个 --page-header-background，在页面头部元素上可以添加这种背景颜色。设置成白色。

页面侧边栏的背景颜色也可以用一个变量，名字是 --page-aside-background ，颜色设置成白色。

文字

下面再设置几个跟文字相关的变量，添加一个 --primary-text-color，颜色是黑色，再添加一个 --secondary-text-color，次要的文字颜色设置成 #585858。 --light-text-color，#adadad。

边框

可以再定义两个跟边框相关的变量，添加一个 --line-color，颜色是 #e1e3e7， 再添加一个高亮的边框颜色，--highlight-line-color， 设置成黑色。

暗色

以后可以在这里继续再添加一些需要的变量，复制一份这块样式，修改一下样式选择器 .page.dark ，设置一下暗色主题下的这些变量的值。

主要的背景颜色是 #222222， --light-background 是 #1f1f1f。 --page-header-background 是 #222222，--page-aside-background 是 #2e2e2e 。

暗色主题下的主要文字的颜色设置成 #b1b1b1，次要的文字颜色是 #585858， light-text-color 是 #656565 。 边框的颜色是 #383838，高亮边框的颜色是 #555555 。

使用

下面可以找个地方用一下这里定义的几个变量，打开 page.css 这个样式表，在 .page 这个类的样式里，用 color 设置一下文字颜色，这里使用一个变量的值，可以先用一个 var() 里面是要使用的变量的名字，比如--primary-text-color。

再修改一下 .page-header 类的样式，用 background 设置一下背景，用 var 使用一个变量，变量的名字是 --page-header-background。

然后修改一下 .page-aside 这个类的样式，同样使用 background 设置一下背景颜色，用 var 使用一个变量，变量是 --page-aside-background 。

最后在 .page-main 的样式里再添加一个 background，使用一个变量，变量是 --primary-background

测试

打开 app-layout 组件，在这个组件的模板里，在这个带 page 类的元素的上面可以再加上一个表示主题的类，比如 light，页面就会使用在亮色主题里面设置的那些变量的值。 把它设置成 dark ，就会使用在暗色主题里设置的变量的值。