开发主题扩展

2020-08-11 11:14:48
孙浩
1167
最后编辑:孙浩 于 2020-08-11 11:31:24
分享链接

主题扩展用于为喧喧提供额外的外观选项。一个主题扩展中可以提供多款主题供用户选择使用。主题扩展所提供的主题在package.json文件中通过themes字段进行声明。themes字段为一个对象数组,数组中的每个对象为一个主题配置。

主题的 css 文件载入方式包括两种:

  • append:将 css 文件作为默认样式表的补充,即挂在在默认主题样式的后面;
  • override:将 css 文件替换原来的默认样式表。

下面以官方暗黑主题扩展为例,此扩展目录结构如下:

dark-theme-example/
 ├─ themes/
 │   └─ dark.css         # 主题样式表文件
 └─ package.json         # 扩展包描述文件

扩展包内源码文件内容如下:

package.json
{
    "name": "dark-theme-example",
    "displayName": "暗黑主题",
    "version": "1.0.0",
    "description": "提供 1 款暗黑主题外观。快让黑暗降临吧!",
    "type": "theme",
    "icon": "mdi-lightbulb",
    "accentColor": "#333",
    "themes": [
        {
            // 主题的名称,同一个扩展中的主题名称不能相同
            "name": "dark",

            // 主题在界面上显示的名称
            "displayName": "暗黑",

            // 主题的主色调
            "color": "#333",

            // 主题对应的 css 文件
            "style": "themes/dark.css",

            // 主题的载入方式
            "inject": "append"
        }
    ],
    // 其他配置
themes/dark.css
body {
	--color-primary: #f1f1f1;
}

.page,
select,
option,
body {
	color: #f1f1f1;
	background-color: #333;
}

/* 其他样式定义...*/

最终效果如下图:

喧喧暗黑主题

此扩展实例可以在 dark-theme-example.zip 获取,更多主题例子:

发表评论
评论通过审核后显示。
咨询电话

公司电话:400-8320-078

客服电话:17685869372