美文网首页
教你如何创建一款属于自己的VSCode主题

教你如何创建一款属于自己的VSCode主题

作者: 编程范儿 | 来源:发表于2021-01-31 11:13 被阅读0次

    你有没有想过创建一款属于自己的VSCode主题?没有你想像的那么难,但是真正实现起来也不是那么轻松,需要你对将要去改变的主题的一些属性要有所了解和准备。

    如果你要想让你的主题适用于多种编程语言,并且看起来还很漂亮的话,需要对很多的颜色进行重新定义。

    下面就简单的介绍实现一款主题的过程,一些原理进行讲解。

    生成主题文件

    我们将使用VSCode拓展生成器生成我们的主题文件,该工具是由微软官方为插件和主题而打造。

    你可以通过以下命令:

    npm install -g yo generator-code
    

    然后生成主题文件

    yo code
    

    下面进入互动式安装过程,一步一步引导你完成一个主题模板的创建。

    最后生成了一个以主题命名的目录,接着用VSCode打开该目录,进行主题的编辑。

    cd my-theme
    code .
    

    新生成的主题项目已经为你初始化好了所有的东西。在主题目录里面你可以找到一个以主题命名的JSON文件,这个JSON文件包含一些默认颜色的定义,可以直接去修改它。

    开发主题

    在主题的开发调试阶段,我们最好是进入debug模式(按F5),会打开一个新的VSCode窗口,这个窗口就已经是使用你创建的主题了。

    当你编辑主题文件themes/my-theme.json,你将会看到调试的窗口会立刻响应,期间可能会遇到不立马生效的情况,很好解决,在菜单栏点击Run > Restart Debugging

    调试的过程是很繁琐的,还需要有一定的审美才行,有一定的颜色搭配能力。

    为主题修改UI样式

    以下是我为这款主题定义的一些颜色示例

    编辑区域

    编辑区域就是你日常编辑代码的地方

        "editor.background": "#1B1929",
        "editor.lineHighlightBackground": "#8076C222",
        "editorCursor.foreground": "#988de4",
    

    对于编辑区我定义了backgroundlineHighlightBackgroundeditorCursor.foreground的值,分别代表了编辑区背景颜色,鼠标所在行高亮颜色和光标颜色。

    活动栏

    VSCode窗口左侧即为活动栏,用来切换不同功能视图的。

       "activityBar.background": "#13111d",
       "activityBar.inactiveForeground": "#323b50",
       "activityBar.foreground": "#5c6e92",
       "activityBarBadge.background": "#8076C2",
    

    活动栏我们为它定义了backgroundinactiveForeground、和activityBarBadge.background的值。foreground的值表示的是图标的颜色,而activityBarBadge则是图标所在角标的颜色。

    侧边栏

    侧边栏即为打开的项目文件列表区域,或者调试工具等等,这个取决于你当前选择的功能。

        "sideBar.background": "#1B1929",
        "sideBarTitle.foreground": "#bbbbbb",
        "sideBarSectionHeader.background": "#242c3f",
    

    这些定义侧边栏一些基础的颜色。另外的内容部分需要单独定义,包含:

        "list.activeSelectionBackground": "#2a273f",
        "list.activeSelectionForeground": "#8076C2",
        "list.inactiveSelectionBackground": "#2a273f",
        "list.inactiveSelectionForeground": "#8076C2",
        "list.highlightForeground": "#8076C2",
        "list.hoverBackground": "#1f2636",
    

    以上这些定义了当前打开的文件列表所在不同状态下的颜色值,这里的 active 不取决于VSCode窗口是否处于活动状态。相同的list颜色也适用于其他地方的列表。

    按钮

    VSCode上面按钮不多,我们也给它定义一下颜色,保证主题视觉上的一致性。

        "button.background": "#8076C2",
        "button.hoverBackground": "#8076C299",
    

    以上定义了按钮的两种状态下的颜色,正常状态和鼠标悬浮状态


    状态栏

    状态栏处于VSCode窗口的底部,由于你所安装的拓展和配置不同,显示的内容也有所不同,包括git所在分支,文件的编码等等。


        "statusBar.border": "#1B1929",
        "statusBar.background": "#13111d",
        "statusBar.debuggingBackground": "#bb0000",
    

    状态栏我选择了和活动栏一致的颜色,我希望状态栏有一个比较特别的颜色,当我们调试的时候不会错过它上面的信息。

    标题栏

    同样,标题栏的颜色和状态栏、活动栏保持一致。

        "titleBar.activeBackground": "#13111d",
        "titleBar.inactiveBackground": "#13111d",
        "titleBar.inactiveForeground": "#5c6e92",
    

    语法高亮

    受到我最喜欢的一款主题Night Owl的影响,我开始不怎么关注语法高亮部分的颜色。高亮在主题JSON文件中tokenColor部分有所定义,tokenColor是一个数组,分别定义了一定范围内的代码scopefontStyleforeground部分样式

    {
        "name": "Comment",
        "scope": ["comment", "punctuation.definition.comment"],
        "settings": {
            "fontStyle": "italic",
            "foreground": "#637777"
        }
    }
    

    范围指定可以由VSCode内部工具Inspect Editor Tokens and Scopes来发现,你可以通过组合键Cmd+Shift+P打开它或者搜索"inspect editor"

    调色板

    为了达到对JavaScript和TypeScript代码一定程度的满意效果,我参考了其它的一些主题。

    毕竟这部分的工作是很要耐心的,你可以通过debug模式来查看当前代码区域不同地方的颜色值然后来编辑替换它。

    最后我为调色板选了11种颜色以及React项目中JavaScript和TypeScript代码的高亮。


    下面是更改了部分颜色的效果

    如果你想创建一个自己满意的主题,可以参考以上的步骤,但是最终的效果依照你自己的爱好而定,另外下面的资源也可以供参考:
    Sarah Drasner article Creating a VS Code Theme
    VS Code documentation on Theme Colors

    获取更多作者文章,关注公众号太空编程

    相关文章

      网友评论

          本文标题:教你如何创建一款属于自己的VSCode主题

          本文链接:https://www.haomeiwen.com/subject/xzqktltx.html