添加主题样式表(theme)

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

我们的应用支持两种主题,亮色主题还有暗色主题,先去创建一个样式表,放在 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 ,就会使用在暗色主题里设置的变量的值。

添加主题样式表(theme)《 Vue.js 项目实践:应用主题 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点