插件市场
/
插件详情
material 主题
material 主题插件
(91 人评分)
评分

CloudStudio material-ui 主题插件

插件包含两部分内容,一是 material-ui 代码高亮颜色主题,另一部分是 material-ui 主题的文件图标

颜色主题

颜色主题被定义在 src/theme.json 文件中,导入文件后需调用 editor.defineTheme 传入主题名和主题配置。

自定义的颜色主题可以是一个对象或者 JSON 文件,声明 typetokenColors、 以及 colors 即可,type 表示该主题继承自某个自带主题,monaco 自带了 vsvs-darkhc-black,分别表示白色、黑色以及高对比度黑色主题,不同的 type 应用于同一个主题会产生不同的编辑器样式。

tokenColors 表示指定的语法比如注释的字体样式(fontStyle)及前/背颜色,它基于 TextMate 主题规则,不同之处在于 CloudStudio 不使用 TextMate 标准规则的 .tmTheme 主题文件,而需要使用 JSON 格式来定义主题样式,CloudStudio 会转换为 monaco 可识别的主题格式。TextMate 编辑器对代码进行解析后,会为每个元素指定一个 scope ,这个 scope 即表明此元素是一个关键字还是一个常量,又或者是一个标点符号,通过 tmTheme 格式的文件来定义相应 scope 的文字样式。可以参考这篇文章了解具体细节。基本的 scope 列表可以在这里找到。

colors 表示指定 monaco 编辑器控件的样式,例如编辑器高亮代码块颜色、背景色、错误提示曲线颜色等,这部分内容与 vscode 文档 editor-colors部分相同。

{
    "type": "dark",
    /* 编辑器控件样式 */
    "colors": {
        "editor.lineHighlightBackground": "#2c313a",   // 编辑器高亮行背景色
        "editor.selectionBackground": "#3e4451",    // 选中区域背景色
        "editorSuggestWidget.background": "#ff004f",    // 自动完成提示框背景色
        "editorSuggestWidget.border": "#fff",   // 自动完成提示框边框颜色
        "input.background": "#ff004f", // 编辑器代码背景色
        /*...*/
    },
    /* 语法样式 */
    "tokenColors": [
        "name": "Comment",
        "scope": ["comment"], // 指定该样式仅作用于代码中的注释
        "settings": {
            "foreground": "#ff004f",    // 注释块的前景色
            "fontStyle": "bold"   // 字体为加粗
        }
    ]
}

图片

图片

文件图标

CloudStudio 界面部分目前仅有文件图标支持自定义,registerFileIconProvider 方法 包含在 file 模块中。 图标文件需要放在 src/icons 目录下,并在 icons/index.js 文件中导出所有 icons,仅支持 svg 文件。

const sources = [
  "folder",
  "folder-android",
  "folder-dist",
  "folder-src",
  "file",
  "java",
  "json",
  "javascript",
  "typescript",
  "css",
  "markdown",
  "babel",
  "yarn",
  "npm",
  "xml",
  "yaml",
  "image",
  "folder-i18n"
];

const iconSources = sources.reduce((pre, cur) => {
  pre[cur] = require(`./${cur}.svg`);
  if (cur.startsWith("folder")) {
    pre[`${cur}-open`] = require(`./${cur}-open.svg`);
  }
  return pre;
}, {});

export default iconSources;

图标文件的命名格式需要区分 文件图标文件夹图标,其中文件图标以图标对应的 图标名 命名,例如用于 TypeScript 编写的 React 组件文件的图标,可以命名为 tsx-reacttypescript-tsx。而文件夹图标文件名需要添加前缀 folder 表示该文件用于文件夹图标,如需区分展开/折叠状态,可以添加后缀 open 表示该文件用于文件夹折叠状态。如果想给某一类特定文件夹添加特殊的文件夹图标,需要以 folder-特定文件夹名-openfolder-特定文件夹名 来命名。CloudStudio 会在该文件或文件夹在左侧文件树以及编辑器标签栏渲染时应用指定的图标。

registerFileIconProvider 方法接受文件图标主题名称,以及一个返回图标配置和映射的函数,其中需要分别指定文件与文件夹图标的匹配规则以及默认图标。例如

file.registerFileIconProvider("material-ui-icons", () => {
  return {
    icons: {
      // icons 文件夹下导出的所有图标文件
    },
    fileicons: {
      defaultIcon: "doc", // 默认文件图标
      icons: [
        {
          name: "javascript",
          fileExtendsions: ["js", "jsx", "mjs"],
          fileNames: ["index.js", "main.js"]
        },
        {
          name: "css",
          fileExtendsions: ["css"]
        }
      ]
    },
    foldericons: {
      defaultIcon: "folder",
      icons: [
        {
          name: "folder-android",
          folderNames: ["android"]
        },
        {
          name: "folder-src",
          folderNames: ["src", "resource"]
        },
        {
          name: "folder-config",
          folderNames: ["config", "configuration"]
        }
      ]
    }
  };
});

其中 fileicons.icons 子项中的 fileExtendsions 表示指定文件扩展名,fileNames 则表示指定文件名。foldericons.icons 子项中的 folderNames 表示特定文件夹的名称。每个子项的 name 属性必须和 icons 中导出的图标名相同。如果没有指定 icons ,则会渲染 defaultIcon,defaultIcon 为必选项。

图片

图片

注册文件图标主题后会在 CloudStudio 设置 -> 样式 -> 文件图标中加入新的图标选项。

参考资料

分类
文件图标主题
更多信息
版本0.0.7
发布时间2018/11/12 21:37
分享给好友
使用微信扫描二维码
然后分享给好友
用户评价
暂无评价
联系我们
电话
400-930-9163
腾讯云开发者平台由腾讯云及 CODING 共同运营,目前由 CODING 团队提供运营服务。