1. 后端处理服务器API
1.1  数据库结构
1.2  后端处理服务器HTTP 接口
1.3. 数据包
1.3.1  数据包的基本信息
1.3.2  所有数据包
2. 后端处理服务器应用集成API
2.1  设置应用集成
2.2  API 格式和签名机制
2.3  API 定义
3. 客户端扩展机制
3.1. 扩展定义
3.1.1  扩展类型
3.1.2  扩展包目录结构
3.1.3  扩展描述文件
3.2. 扩展模块
3.2.1  主入口模块
3.2.2. 扩展模块API
3.2.2.1  扩展 API 概览
3.2.2.2  扩展 API 权限
3.2.2.3  扩展 API 定义
3.2.3  扩展实例对象
3.2.4  数据存储机制
3.2.5  自定义上下文菜单
3.2.6  自定义命令
3.2.7  自定义网址解析
3.3. 开发扩展
3.3.1  载入开发中的扩展
3.3.2  开发应用扩展
3.3.3  开发插件扩展
3.3.4  开发主题扩展
3.4  内置扩展
3.5  分发扩展

开发主题扩展

2020-08-11 11:14:48
孙浩
232
最后编辑:孙浩 于 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-6689-739

客服电话: 17663982076