vscode 自定义代码主题颜色

已于 2023-03-30 13:37:08 修改
阅读量3.4k 收藏 11
点赞数 3
文章标签： vscode ide 编辑器
于 2023-03-30 13:35:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dg_xdg/article/details/129855488
版权

VS Code自定义主题色

基本结构

F1 搜索Open User Settings (JSON)打开用户设置JSON文件（以下称作UserJSON）

UserJSON配置格式

//https://www.jetbrains.com/zh-cn/lp/mono/#how-to-install
//安装常规字体JetBrainsMonoNL-Regular.ttf 和粗体 JetBrainsMonoNL-Bold.ttf 即可
{
  "workbench.colorCustomizations":{},//工作台颜色定制，下方有现成的代码块，粘贴到此对象中自行修改
  "editor.guides.bracketPairs": "active",//当前括号对突出显示
  "editor.suggestSelection": "recentlyUsed",//建议优先级(把最近使用过的排到前面)
  "editor.snippetSuggestions": "top",// 自定义的代码片段建议置顶
  "editor.fontSize": 13,//编辑区字体大小
  "editor.fontFamily": "'JetBrains Mono NL'",//该字体非常适合阅读代码，下载地址在上方
  //自定义某主题的代码颜色==========================colorTheme
  "workbench.colorTheme":"Visual Studio Dark",//当前使用的主题名(VSCode自带)
  "editor.tokenColorCustomizations":{
    "[Visual Studio Dark]":{
      //基础色彩，此处按ctrl+i会出现提示，就不一一详写了
      //示例
      "comments": {//注释
        "foreground": "#e389f7",
        "fontStyle": "underline"
      },
      //编辑区文本色彩，下方有现成的代码块，参考自GitHub作者Derek Sifford
      "textMateRules":[
        //示例
        {
          "scope": ["entity.name.tag"], //控制区域：html标签
          "settings": { //样式设置
            "foreground": "#b6adad",
            "fontStyle": "italic"
          }
        },
      
      ]
    }
  }
}

工作台颜色配置

把下面对象中的属性粘贴进UserJSON的"workbench.colorCustomizations"//工作台颜色定制对象即可，这部分代码鼠标悬浮后都有中文提示，就不详写了


    "editor.lineHighlightBackground": "#d7f8d72f"//当前行
    // "editor.selectionBackground": "#d7f8d7cf",//选中内容
    // "editorCursor.foreground": "#000", //光标
      "terminal.background": "#282A36",
      "terminal.foreground": "#f6f6f4",
      "terminal.ansiBrightBlack": "#7b7f8b",
      "terminal.ansiBrightRed": "#f07c7c",
      "terminal.ansiBrightGreen": "#78f09a",
      "terminal.ansiBrightYellow": "#f6f6ae",
      "terminal.ansiBrightBlue": "#d6b4f7",
      "terminal.ansiBrightMagenta": "#f49dda",
      "terminal.ansiBrightCyan": "#adf6f6",
      "terminal.ansiBrightWhite": "#ffffff",
      "terminal.ansiBlack": "#262626",
      "terminal.ansiRed": "#ee6666",
      "terminal.ansiGreen": "#62e884",
      "terminal.ansiYellow": "#e7ee98",
      "terminal.ansiBlue": "#bf9eee",
      "terminal.ansiMagenta": "#f286c4",
      "terminal.ansiCyan": "#97e1f1",
      "terminal.ansiWhite": "#f6f6f4",
      "focusBorder": "#7b7f8b",
      "foreground": "#f6f6f4",
      "selection.background": "#bf9eee",
      "errorForeground": "#ee6666",
      "button.background": "#44475A",
      "button.foreground": "#f6f6f4",
      "button.secondaryBackground": "#282A36",
      "button.secondaryForeground": "#f6f6f4",
      "button.secondaryHoverBackground": "#343746",
      "dropdown.background": "#343746",
      "dropdown.border": "#191A21",
      "dropdown.foreground": "#f6f6f4",
      "input.background": "#282A36",
      "input.foreground": "#f6f6f4",
      "input.border": "#191A21",
      "input.placeholderForeground": "#7b7f8b",
      "inputOption.activeBorder": "#bf9eee",
      "inputValidation.infoBorder": "#f286c4",
      "inputValidation.warningBorder": "#FFB86C",
      "inputValidation.errorBorder": "#ee6666",
      "badge.foreground": "#f6f6f4",
      "badge.background": "#44475A",
      "progressBar.background": "#f286c4",
      "list.activeSelectionBackground": "#44475A",
      "list.activeSelectionForeground": "#f6f6f4",
      "list.dropBackground": "#44475A",
      "list.focusBackground": "#44475A75",
      "list.highlightForeground": "#97e1f1",
      "list.hoverBackground": "#44475A75",
      "list.inactiveSelectionBackground": "#44475A75",
      "list.warningForeground": "#FFB86C",
      "list.errorForeground": "#ee6666",
      "activityBar.background": "#343746",
      "activityBar.inactiveForeground": "#7b7f8b",
      "activityBar.foreground": "#f6f6f4",
      "activityBar.activeBorder": "#FF79C680",
      "activityBar.activeBackground": "#BD93F910",
      "activityBarBadge.background": "#f286c4",
      "activityBarBadge.foreground": "#f6f6f4",
      "sideBar.background": "#262626",
      "sideBarTitle.foreground": "#f6f6f4",
      "sideBarSectionHeader.background": "#282A36",
      "sideBarSectionHeader.border": "#191A21",
      "editorGroup.border": "#bf9eee",
      "editorGroup.dropBackground": "#44475A70",
      "editorGroupHeader.tabsBackground": "#191A21",
      "tab.activeBackground": "#282A36",
      "tab.activeForeground": "#f6f6f4",
      "tab.border": "#191A21",
      "tab.activeBorderTop": "#FF79C680",
      "tab.inactiveBackground": "#262626",
      "tab.inactiveForeground": "#7b7f8b",
      "editor.foreground": "#f6f6f4",
      "editor.background": "#282A36",
      "editorLineNumber.foreground": "#7b7f8b",
      "editor.selectionBackground": "#44475A",
      "editor.selectionHighlightBackground": "#424450",
      "editor.foldBackground": "#21222C80",
      "editor.wordHighlightBackground": "#8BE9FD50",
      "editor.wordHighlightStrongBackground": "#50FA7B50",
      "editor.findMatchBackground": "#FFB86C80",
      "editor.findMatchHighlightBackground": "#FFFFFF40",
      "editor.findRangeHighlightBackground": "#44475A75",
      "editor.hoverHighlightBackground": "#8BE9FD50",
      "editor.lineHighlightBorder": "#44475A",
      "editorLink.activeForeground": "#97e1f1",
      "editor.rangeHighlightBackground": "#BD93F915",
      "editor.snippetTabstopHighlightBackground": "#282A36",
      "editor.snippetTabstopHighlightBorder": "#7b7f8b",
      "editor.snippetFinalTabstopHighlightBackground": "#282A36",
      "editor.snippetFinalTabstopHighlightBorder": "#62e884",
      "editorWhitespace.foreground": "#FFFFFF1A",
      "editorIndentGuide.background": "#FFFFFF1A",
      "editorIndentGuide.activeBackground": "#FFFFFF45",
      "editorRuler.foreground": "#FFFFFF1A",
      "editorCodeLens.foreground": "#7b7f8b",
      "editorBracketHighlight.foreground1": "#f6f6f4",
      "editorBracketHighlight.foreground2": "#f286c4",
      "editorBracketHighlight.foreground3": "#97e1f1",
      "editorBracketHighlight.foreground4": "#62e884",
      "editorBracketHighlight.foreground5": "#bf9eee",
      "editorBracketHighlight.foreground6": "#FFB86C",
      "editorBracketHighlight.unexpectedBracket.foreground": "#ee6666",
      "editorOverviewRuler.border": "#191A21",
      "editorOverviewRuler.selectionHighlightForeground": "#FFB86C",
      "editorOverviewRuler.wordHighlightForeground": "#97e1f1",
      "editorOverviewRuler.wordHighlightStrongForeground": "#62e884",
      "editorOverviewRuler.modifiedForeground": "#8BE9FD80",
      "editorOverviewRuler.addedForeground": "#50FA7B80",
      "editorOverviewRuler.deletedForeground": "#FF555580",
      "editorOverviewRuler.errorForeground": "#FF555580",
      "editorOverviewRuler.warningForeground": "#FFB86C80",
      "editorOverviewRuler.infoForeground": "#8BE9FD80",
      "editorError.foreground": "#ee6666",
      "editorWarning.foreground": "#97e1f1",
      "editorGutter.modifiedBackground": "#8BE9FD80",
      "editorGutter.addedBackground": "#50FA7B80",
      "editorGutter.deletedBackground": "#FF555580",
      "gitDecoration.modifiedResourceForeground": "#97e1f1",
      "gitDecoration.deletedResourceForeground": "#ee6666",
      "gitDecoration.untrackedResourceForeground": "#62e884",
      "gitDecoration.ignoredResourceForeground": "#7b7f8b",
      "gitDecoration.conflictingResourceForeground": "#FFB86C",
      "diffEditor.insertedTextBackground": "#50FA7B20",
      "diffEditor.removedTextBackground": "#FF555550",
      "editorWidget.background": "#262626",
      "editorSuggestWidget.background": "#262626",
      "editorSuggestWidget.foreground": "#f6f6f4",
      "editorSuggestWidget.selectedBackground": "#44475A",
      "editorHoverWidget.background": "#282A36",
      "editorHoverWidget.border": "#7b7f8b",
      "editorMarkerNavigation.background": "#262626",
      "peekView.border": "#44475A",
      "peekViewEditor.background": "#282A36",
      "peekViewEditor.matchHighlightBackground": "#F1FA8C80",
      "peekViewResult.background": "#262626",
      "peekViewResult.fileForeground": "#f6f6f4",
      "peekViewResult.lineForeground": "#f6f6f4",
      "peekViewResult.matchHighlightBackground": "#F1FA8C80",
      "peekViewResult.selectionBackground": "#44475A",
      "peekViewResult.selectionForeground": "#f6f6f4",
      "peekViewTitle.background": "#191A21",
      "peekViewTitleDescription.foreground": "#7b7f8b",
      "peekViewTitleLabel.foreground": "#f6f6f4",
      "merge.currentHeaderBackground": "#50FA7B90",
      "merge.incomingHeaderBackground": "#BD93F990",
      "editorOverviewRuler.currentContentForeground": "#62e884",
      "editorOverviewRuler.incomingContentForeground": "#bf9eee",
      "panel.background": "#282A36",
      "panel.border": "#bf9eee",
      "panelTitle.activeBorder": "#f286c4",
      "panelTitle.activeForeground": "#f6f6f4",
      "panelTitle.inactiveForeground": "#7b7f8b",
      "statusBar.background": "#191A21",
      "statusBar.foreground": "#f6f6f4",
      "statusBar.debuggingBackground": "#ee6666",
      "statusBar.debuggingForeground": "#191A21",
      "statusBar.noFolderBackground": "#191A21",
      "statusBar.noFolderForeground": "#f6f6f4",
      "statusBarItem.prominentBackground": "#ee6666",
      "statusBarItem.prominentHoverBackground": "#FFB86C",
      "statusBarItem.remoteForeground": "#282A36",
      "statusBarItem.remoteBackground": "#bf9eee",
      "titleBar.activeBackground": "#262626",
      "titleBar.activeForeground": "#f6f6f4",
      "titleBar.inactiveBackground": "#191A21",
      "titleBar.inactiveForeground": "#7b7f8b",
      "extensionButton.prominentForeground": "#f6f6f4",
      "extensionButton.prominentBackground": "#50FA7B90",
      "extensionButton.prominentHoverBackground": "#50FA7B60",
      "pickerGroup.border": "#bf9eee",
      "pickerGroup.foreground": "#97e1f1",
      "debugToolBar.background": "#262626",
      "walkThrough.embeddedEditorBackground": "#262626",
      "settings.headerForeground": "#f6f6f4",
      "settings.modifiedItemIndicator": "#FFB86C",
      "settings.dropdownBackground": "#262626",
      "settings.dropdownForeground": "#f6f6f4",
      "settings.dropdownBorder": "#191A21",
      "settings.checkboxBackground": "#262626",
      "settings.checkboxForeground": "#f6f6f4",
      "settings.checkboxBorder": "#191A21",
      "settings.textInputBackground": "#262626",
      "settings.textInputForeground": "#f6f6f4",
      "settings.textInputBorder": "#191A21",
      "settings.numberInputBackground": "#262626",
      "settings.numberInputForeground": "#f6f6f4",
      "settings.numberInputBorder": "#191A21",
      "breadcrumb.foreground": "#7b7f8b",
      "breadcrumb.background": "#282A36",
      "breadcrumb.focusForeground": "#f6f6f4",
      "breadcrumb.activeSelectionForeground": "#f6f6f4",
      "breadcrumbPicker.background": "#191A21",
      "listFilterWidget.background": "#343746",
      "listFilterWidget.outline": "#424450",
      "listFilterWidget.noMatchesOutline": "#ee6666",

编辑区文本颜色

这个是修改特定主题的，放入"textMateRules"//编辑区文本色彩数组中即可，ctrl+F 搜索目录中的关键词就可找到对应板块修改

目录

  1. 常见区域

    1. Separators 分隔符如:=之类的
    2. HTML tags HTML标签名
    3. HTML/CSS attribute names 行内样式属性名
    4. User-defined class names 用户定义的类名
    5. Brackets, braces, parens, etc. 括号符
    6. Strings 字符串

  2. 各类标记

    1. markup.inserted 插入标记
    2. markup.deleted 删除标记
    3. markup.changed 交换标记
    4. markup.error 错误标记
    5. Underlined markup 下划线标记
    6. Bold markup 粗体标记

  3. JS逻辑等

    1. Function names 函数名
    2. Function parameters 函数参数
    3. Constants 常量
    4. Keywords 关键词
    5. Built-in functions / properties 内置函数/属性
    6. Dates / timestamps (serializable languages) 时间戳
    7. Storage 存储类如let const
    8. Types 类型
    9. RegExp string 正则字符
    10. RegExp start and end characters 正则起始
    11. Variables and object properties 变量和对象属性
    12. Non-capture operators 捕获操作符
    13. SCSS attibute selector strings SCSS属性选择器字符串
    14. SCSS attibute selector brackets SCSS属性选择器括号
    15. Log file error log文件错误
    16. Log file warning log文件告警
    <br/>

配置

      "textMateRules": [
        {
            "scope": [
                "emphasis"
            ],
            "settings": {
                "fontStyle": "italic"
            }
        },
        {
            "scope": [
                "strong"
            ],
            "settings": {
                "fontStyle": "bold"
            }
        },
        {
            "scope": [
                "header"
            ],
            "settings": {
                "foreground": "#bf9eee"
            }
        },
        {
            "scope": [
                "meta.diff",
                "meta.diff.header"
            ],
            "settings": {
                "foreground": "#7b7f8b"
            }
        },
        {
            "scope": [
                "markup.inserted"
            ],
            "settings": {
                "foreground": "#62e884"
            }
        },
        {
            "scope": [
                "markup.deleted"
            ],
            "settings": {
                "foreground": "#ee6666"
            }
        },
        {
            "scope": [
                "markup.changed"
            ],
            "settings": {
                "foreground": "#FFB86C"
            }
        },
        {
            "scope": [
                "invalid"
            ],
            "settings": {
                "foreground": "#ee6666",
                "fontStyle": "underline italic"
            }
        },
        {
            "scope": [
                "invalid.deprecated"
            ],
            "settings": {
                "foreground": "#f6f6f4",
                "fontStyle": "underline italic"
            }
        },
        {
            "scope": [
                "entity.name.filename"
            ],
            "settings": {
                "foreground": "#e7ee98"
            }
        },
        {
            "scope": [
                "markup.error"
            ],
            "settings": {
                "foreground": "#ee6666"
            }
        },
        {
            "name": "Underlined markup",
            "scope": [
                "markup.underline"
            ],
            "settings": {
                "fontStyle": "underline"
            }
        },
        {
            "name": "Bold markup",
            "scope": [
                "markup.bold"
            ],
            "settings": {
                "fontStyle": "bold",
                "foreground": "#FFB86C"
            }
        },
        {
            "name": "Markup headings",
            "scope": [
                "markup.heading"
            ],
            "settings": {
                "fontStyle": "bold",
                "foreground": "#bf9eee"
            }
        },
        {
            "name": "Markup italic",
            "scope": [
                "markup.italic"
            ],
            "settings": {
                "foreground": "#e7ee98",
                "fontStyle": "italic"
            }
        },
        {
            "name": "Bullets, lists (prose)",
            "scope": [
                "beginning.punctuation.definition.list.markdown",
                "beginning.punctuation.definition.quote.markdown",
                "punctuation.definition.link.restructuredtext"
            ],
            "settings": {
                "foreground": "#97e1f1"
            }
        },
        {
            "name": "Inline code (prose)",
            "scope": [
                "markup.inline.raw",
                "markup.raw.restructuredtext"
            ],
            "settings": {
                "foreground": "#62e884"
            }
        },
        {
            "name": "Links (prose)",
            "scope": [
                "markup.underline.link",
                "markup.underline.link.image"
            ],
            "settings": {
                "foreground": "#97e1f1"
            }
        },
        {
            "name": "Link text, image alt text (prose)",
            "scope": [
                "meta.link.reference.def.restructuredtext",
                "punctuation.definition.directive.restructuredtext",
                "string.other.link.description",
                "string.other.link.title"
            ],
            "settings": {
                "foreground": "#f286c4"
            }
        },
        {
            "name": "Blockquotes (prose)",
            "scope": [
                "entity.name.directive.restructuredtext",
                "markup.quote"
            ],
            "settings": {
                "foreground": "#e7ee98",
                "fontStyle": "italic"
            }
        },
        {
            "name": "Horizontal rule (prose)",
            "scope": [
                "meta.separator.markdown"
            ],
            "settings": {
                "foreground": "#7b7f8b"
            }
        },
        {
            "name": "Code blocks",
            "scope": [
                "fenced_code.block.language",
                "markup.raw.inner.restructuredtext",
                "markup.fenced_code.block.markdown punctuation.definition.markdown"
            ],
            "settings": {
                "foreground": "#62e884"
            }
        },
        {
            "name": "Prose constants",
            "scope": [
                "punctuation.definition.constant.restructuredtext"
            ],
            "settings": {
                "foreground": "#bf9eee"
            }
        },
        {
            "name": "Braces in markdown headings",
            "scope": [
                "markup.heading.markdown punctuation.definition.string.begin",
                "markup.heading.markdown punctuation.definition.string.end"
            ],
            "settings": {
                "foreground": "#bf9eee"
            }
        },
        {
            "name": "Braces in markdown paragraphs",
            "scope": [
                "meta.paragraph.markdown punctuation.definition.string.begin",
                "meta.paragraph.markdown punctuation.definition.string.end"
            ],
            "settings": {
                "foreground": "#f6f6f4"
            }
        },
        {
            "name": "Braces in markdown blockquotes",
            "scope": [
                "markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin",
                "markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end"
            ],
            "settings": {
                "foreground": "#e7ee98"
            }
        },
        {
            "name": "User-defined class names",
            "scope": [
                "entity.name.type.class",
                "entity.name.class"
            ],
            "settings": {
                "foreground": "#97e1f1",
                "fontStyle": "normal"
            }
        },
        {
            "name": "this, super, self, etc.",
            "scope": [
                "keyword.expressions-and-types.swift",
                "keyword.other.this",
                "variable.language",
                "variable.language punctuation.definition.variable.php",
                "variable.other.readwrite.instance.ruby",
                "variable.parameter.function.language.special"
            ],
            "settings": {
                "foreground": "#bf9eee",
                "fontStyle": "italic"
            }
        },
        {
            "name": "Inherited classes",
            "scope": [
                "entity.other.inherited-class"
            ],
            "settings": {
                "fontStyle": "italic",
                "foreground": "#97e1f1"
            }
        },
        {
            "name": "Comments",
            "scope": [
                "comment",
                "punctuation.definition.comment",
                "unused.comment",
                "wildcard.comment"
            ],
            "settings": {
                "foreground": "#7b7f8b"
            }
        },
        {
            "name": "JSDoc-style keywords",
            "scope": [
                "comment keyword.codetag.notation",
                "comment.block.documentation keyword",
                "comment.block.documentation storage.type.class"
            ],
            "settings": {
                "foreground": "#f286c4"
            }
        },
        {
            "name": "JSDoc-style types",
            "scope": [
                "comment.block.documentation entity.name.type"
            ],
            "settings": {
                "foreground": "#97e1f1",
                "fontStyle": "italic"
            }
        },
        {
            "name": "JSDoc-style type brackets",
            "scope": [
                "comment.block.documentation entity.name.type punctuation.definition.bracket"
            ],
            "settings": {
                "foreground": "#97e1f1"
            }
        },
        {
            "name": "JSDoc-style comment parameters",
            "scope": [
                "comment.block.documentation variable"
            ],
            "settings": {
                "foreground": "#FFB86C",
                "fontStyle": "italic"
            }
        },
        {
            "name": "Constants",
            "scope": [
                "constant",
                "variable.other.constant"
            ],
            "settings": {
                "foreground": "#bf9eee"
            }
        },
        {
            "name": "Constant escape sequences",
            "scope": [
                "constant.character.escape",
                "constant.character.string.escape",
                "constant.regexp"
            ],
            "settings": {
                "foreground": "#f286c4"
            }
        },
        {
            "name": "HTML tags",
            "scope": [
                "entity.name.tag"
            ],
            "settings": {
                "foreground": "#808080"
            }
        },
        {
            "name": "CSS attribute parent selectors ('&')",
            "scope": [
                "entity.other.attribute-name.parent-selector"
            ],
            "settings": {
                "foreground": "#f286c4"
            }
        },
        {
            "name": "HTML/CSS attribute names",
            "scope": [
                "entity.other.attribute-name"
            ],
            "settings": {
                "foreground": "#97e1f1",
                "fontStyle": "italic"
            }
        },
        {
            "name": "Function names",
            "scope": [
                "entity.name.function",
                "meta.function-call.object",
                "meta.function-call.php",
                "meta.function-call.static",
                "meta.method-call.java meta.method",
                "meta.method.groovy",
                "support.function.any-method.lua",
                "keyword.operator.function.infix"
            ],
            "settings": {
                "foreground": "#62e884"
            }
        },
        {
            "name": "Function parameters",
            "scope": [
                "entity.name.variable.parameter",
                "meta.at-rule.function variable",
                "meta.at-rule.mixin variable",
                "meta.function.arguments variable.other.php",
                "meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql",
                "variable.parameter"
            ],
            "settings": {
                "fontStyle": "italic",
                "foreground": "#FFB86C"
            }
        },
        {
            "name": "Decorators",
            "scope": [
                "meta.decorator variable.other.readwrite",
                "meta.decorator variable.other.property"
            ],
            "settings": {
                "foreground": "#62e884",
                "fontStyle": "italic"
            }
        },
        {
            "name": "Decorator Objects",
            "scope": [
                "meta.decorator variable.other.object"
            ],
            "settings": {
                "foreground": "#62e884"
            }
        },
        {
            "name": "Keywords",
            "scope": [
                "keyword",
                "punctuation.definition.keyword"
            ],
            "settings": {
                "foreground": "#f286c4"
            }
        },
        {
            "name": "Keyword \"new\"",
            "scope": [
                "keyword.control.new",
                "keyword.operator.new"
            ],
            "settings": {
                "fontStyle": "bold"
            }
        },
        {
            "name": "Generic selectors (CSS/SCSS/Less/Stylus)",
            "scope": [
                "meta.selector"
            ],
            "settings": {
                "foreground": "#f286c4"
            }
        },
        {
            "name": "Language Built-ins",
            "scope": [
                "support"
            ],
            "settings": {
                "fontStyle": "italic",
                "foreground": "#97e1f1"
            }
        },
        {
            "name": "Built-in magic functions and constants",
            "scope": [
                "support.function.magic",
                "support.variable",
                "variable.other.predefined"
            ],
            "settings": {
                "fontStyle": "regular",
                "foreground": "#bf9eee"
            }
        },
        {
            "name": "Built-in functions / properties",
            "scope": [
                "support.function",
                "support.type.property-name"
            ],
            "settings": {
                "fontStyle": "regular"
            }
        },
        {
            "name": "Separators (key/value, namespace, inheritance, pointer, hash, slice, etc)",
            "scope": [
                "constant.other.symbol.hashkey punctuation.definition.constant.ruby",
                "entity.other.attribute-name.placeholder punctuation",
                "entity.other.attribute-name.pseudo-class punctuation",
                "entity.other.attribute-name.pseudo-element punctuation",
                "meta.group.double.toml",
                "meta.group.toml",
                "meta.object-binding-pattern-variable punctuation.destructuring",
                "punctuation.colon.graphql",
                "punctuation.definition.block.scalar.folded.yaml",
                "punctuation.definition.block.scalar.literal.yaml",
                "punctuation.definition.block.sequence.item.yaml",
                "punctuation.definition.entity.other.inherited-class",
                "punctuation.function.swift",
                "punctuation.separator.dictionary.key-value",
                "punctuation.separator.hash",
                "punctuation.separator.inheritance",
                "punctuation.separator.key-value",
                "punctuation.separator.key-value.mapping.yaml",
                "punctuation.separator.namespace",
                "punctuation.separator.pointer-access",
                "punctuation.separator.slice",
                "string.unquoted.heredoc punctuation.definition.string",
                "support.other.chomping-indicator.yaml",
                "punctuation.separator.annotation"
            ],
            "settings": {
                "foreground": "#f286c4"
            }
        },
        {
            "name": "Brackets, braces, parens, etc.",
            "scope": [
                "keyword.operator.other.powershell",
                "keyword.other.statement-separator.powershell",
                "meta.brace.round",
                "meta.function-call punctuation",
                "punctuation.definition.arguments.begin",
                "punctuation.definition.arguments.end",
                "punctuation.definition.entity.begin",
                "punctuation.definition.entity.end",
                "punctuation.definition.tag.cs",
                "punctuation.definition.type.begin",
                "punctuation.definition.type.end",
                "punctuation.section.scope.begin",
                "punctuation.section.scope.end",
                "punctuation.terminator.expression.php",
                "storage.type.generic.java",
                "string.template meta.brace",
                "string.template punctuation.accessor"
            ],
            "settings": {
                "foreground": "#f6f6f4"
            }
        },
        {
            "name": "Variable interpolation operators",
            "scope": [
                "meta.string-contents.quoted.double punctuation.definition.variable",
                "punctuation.definition.interpolation.begin",
                "punctuation.definition.interpolation.end",
                "punctuation.definition.template-expression.begin",
                "punctuation.definition.template-expression.end",
                "punctuation.section.embedded.begin",
                "punctuation.section.embedded.coffee",
                "punctuation.section.embedded.end",
                "punctuation.section.embedded.end source.php",
                "punctuation.section.embedded.end source.ruby",
                "punctuation.definition.variable.makefile"
            ],
            "settings": {
                "foreground": "#f286c4"
            }
        },
        {
            "name": "Keys (serializable languages)",
            "scope": [
                "entity.name.function.target.makefile",
                "entity.name.section.toml",
                "entity.name.tag.yaml",
                "variable.other.key.toml"
            ],
            "settings": {
                "foreground": "#97e1f1"
            }
        },
        {
            "name": "Dates / timestamps (serializable languages)",
            "scope": [
                "constant.other.date",
                "constant.other.timestamp"
            ],
            "settings": {
                "foreground": "#FFB86C"
            }
        },
        {
            "name": "YAML aliases",
            "scope": [
                "variable.other.alias.yaml"
            ],
            "settings": {
                "fontStyle": "italic underline",
                "foreground": "#62e884"
            }
        },
        {
            "name": "Storage",
            "scope": [
                "storage",
                "meta.implementation storage.type.objc",
                "meta.interface-or-protocol storage.type.objc",
                "source.groovy storage.type.def"
            ],
            "settings": {
                "fontStyle": "regular",
                "foreground": "#f286c4"
            }
        },
        {
            "name": "Types",
            "scope": [
                "entity.name.type",
                "keyword.primitive-datatypes.swift",
                "keyword.type.cs",
                "meta.protocol-list.objc",
                "meta.return-type.objc",
                "source.go storage.type",
                "source.groovy storage.type",
                "source.java storage.type",
                "source.powershell entity.other.attribute-name",
                "storage.class.std.rust",
                "storage.type.attribute.swift",
                "storage.type.c",
                "storage.type.core.rust",
                "storage.type.cs",
                "storage.type.groovy",
                "storage.type.objc",
                "storage.type.php",
                "storage.type.haskell",
                "storage.type.ocaml"
            ],
            "settings": {
                "fontStyle": "italic",
                "foreground": "#97e1f1"
            }
        },
        {
            "name": "Generics, templates, and mapped type declarations",
            "scope": [
                "entity.name.type.type-parameter",
                "meta.indexer.mappedtype.declaration entity.name.type",
                "meta.type.parameters entity.name.type"
            ],
            "settings": {
                "foreground": "#FFB86C"
            }
        },
        {
            "name": "Modifiers",
            "scope": [
                "storage.modifier"
            ],
            "settings": {
                "foreground": "#f286c4"
            }
        },
        {
            "name": "RegExp string",
            "scope": [
                "string.regexp",
                "constant.other.character-class.set.regexp",
                "constant.character.escape.backslash.regexp"
            ],
            "settings": {
                "foreground": "#e7ee98"
            }
        },
        {
            "name": "Non-capture operators",
            "scope": [
                "punctuation.definition.group.capture.regexp"
            ],
            "settings": {
                "foreground": "#f286c4"
            }
        },
        {
            "name": "RegExp start and end characters",
            "scope": [
                "string.regexp punctuation.definition.string.begin",
                "string.regexp punctuation.definition.string.end"
            ],
            "settings": {
                "foreground": "#ee6666"
            }
        },
        {
            "name": "Character group",
            "scope": [
                "punctuation.definition.character-class.regexp"
            ],
            "settings": {
                "foreground": "#97e1f1"
            }
        },
        {
            "name": "Capture groups",
            "scope": [
                "punctuation.definition.group.regexp"
            ],
            "settings": {
                "foreground": "#FFB86C"
            }
        },
        {
            "name": "Assertion operators",
            "scope": [
                "punctuation.definition.group.assertion.regexp",
                "keyword.operator.negation.regexp"
            ],
            "settings": {
                "foreground": "#ee6666"
            }
        },
        {
            "name": "Positive lookaheads",
            "scope": [
                "meta.assertion.look-ahead.regexp"
            ],
            "settings": {
                "foreground": "#62e884"
            }
        },
        {
            "name": "Strings",
            "scope": [
                "string"
            ],
            "settings": {
                "foreground": "#e7ee98"
            }
        },
        {
            "name": "String quotes (temporary vscode fix)",
            "scope": [
                "punctuation.definition.string.begin",
                "punctuation.definition.string.end"
            ],
            "settings": {
                "foreground": "#dee492"
            }
        },
        {
            "name": "Property quotes (temporary vscode fix)",
            "scope": [
                "punctuation.support.type.property-name.begin",
                "punctuation.support.type.property-name.end"
            ],
            "settings": {
                "foreground": "#97e2f2"
            }
        },
        {
            "name": "Docstrings",
            "scope": [
                "string.quoted.docstring.multi",
                "string.quoted.docstring.multi.python punctuation.definition.string.begin",
                "string.quoted.docstring.multi.python punctuation.definition.string.end",
                "string.quoted.docstring.multi.python constant.character.escape"
            ],
            "settings": {
                "foreground": "#7b7f8b"
            }
        },
        {
            "name": "Variables and object properties",
            "scope": [
                "variable",
                "constant.other.key.perl",
                "support.variable.property",
                "variable.other.constant.js",
                "variable.other.constant.ts",
                "variable.other.constant.tsx"
            ],
            "settings": {
                "foreground": "#f6f6f4"
            }
        },
        {
            "name": "Destructuring / aliasing reference name (LHS)",
            "scope": [
                "meta.import variable.other.readwrite",
                "meta.variable.assignment.destructured.object.coffee variable"
            ],
            "settings": {
                "fontStyle": "italic",
                "foreground": "#FFB86C"
            }
        },
        {
            "name": "Destructuring / aliasing variable name (RHS)",
            "scope": [
                "meta.import variable.other.readwrite.alias",
                "meta.export variable.other.readwrite.alias",
                "meta.variable.assignment.destructured.object.coffee variable variable"
            ],
            "settings": {
                "fontStyle": "normal",
                "foreground": "#f6f6f4"
            }
        },
        {
            "name": "GraphQL keys",
            "scope": [
                "meta.selectionset.graphql variable"
            ],
            "settings": {
                "foreground": "#e7ee98"
            }
        },
        {
            "name": "GraphQL function arguments",
            "scope": [
                "meta.selectionset.graphql meta.arguments variable"
            ],
            "settings": {
                "foreground": "#f6f6f4"
            }
        },
        {
            "name": "GraphQL fragment name (definition)",
            "scope": [
                "entity.name.fragment.graphql",
                "variable.fragment.graphql"
            ],
            "settings": {
                "foreground": "#97e1f1"
            }
        },
        {
            "name": "Edge cases (foreground color resets)",
            "scope": [
                "constant.other.symbol.hashkey.ruby",
                "keyword.operator.dereference.java",
                "keyword.operator.navigation.groovy",
                "meta.scope.for-loop.shell punctuation.definition.string.begin",
                "meta.scope.for-loop.shell punctuation.definition.string.end",
                "meta.scope.for-loop.shell string",
                "storage.modifier.import",
                "punctuation.section.embedded.begin.tsx",
                "punctuation.section.embedded.end.tsx",
                "punctuation.section.embedded.begin.jsx",
                "punctuation.section.embedded.end.jsx",
                "punctuation.separator.list.comma.css",
                "constant.language.empty-list.haskell"
            ],
            "settings": {
                "foreground": "#f6f6f4"
            }
        },
        {
            "name": "Shell variables prefixed with \"$\" (edge case)",
            "scope": [
                "source.shell variable.other"
            ],
            "settings": {
                "foreground": "#bf9eee"
            }
        },
        {
            "name": "Powershell constants mistakenly scoped to `support`, rather than `constant` (edge)",
            "scope": [
                "support.constant"
            ],
            "settings": {
                "fontStyle": "normal",
                "foreground": "#bf9eee"
            }
        },
        {
            "name": "Makefile prerequisite names",
            "scope": [
                "meta.scope.prerequisites.makefile"
            ],
            "settings": {
                "foreground": "#e7ee98"
            }
        },
        {
            "name": "SCSS attibute selector strings",
            "scope": [
                "meta.attribute-selector.scss"
            ],
            "settings": {
                "foreground": "#e7ee98"
            }
        },
        {
            "name": "SCSS attribute selector brackets",
            "scope": [
                "punctuation.definition.attribute-selector.end.bracket.square.scss",
                "punctuation.definition.attribute-selector.begin.bracket.square.scss"
            ],
            "settings": {
                "foreground": "#f6f6f4"
            }
        },
        {
            "name": "Haskell Pragmas",
            "scope": [
                "meta.preprocessor.haskell"
            ],
            "settings": {
                "foreground": "#7b7f8b"
            }
        },
        {
            "name": "Log file error",
            "scope": [
                "log.error"
            ],
            "settings": {
                "foreground": "#ee6666",
                "fontStyle": "bold"
            }
        },
        {
            "name": "Log file warning",
            "scope": [
                "log.warning"
            ],
            "settings": {
                "foreground": "#e7ee98",
                "fontStyle": "bold"
            }
        }
    ]

代码scope检查

F1搜索Inspect Editor Tokens and Scopes检查编辑器和作用域，鼠标光标点击想要检测的代码，如下是检测HTML标签的结果。
把这里的作用域仿照格式写入到配置文件中即可修改颜色
在这里插入图片描述

独孤小冬瓜
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vscode-custom-theme:用于Visual Studio Code的自定义颜色主题
03-14
自述文件 这是我个人用于Visual Studio代码的主题。 从安装 查看演示文件，查看每个扩展的外观。 享受！
VSCode自定义配色文件
11-08
VSCode自定义配色方案 目前在使用的一种配色方案，只要将该文件复制到VSCode的主体文件目录中（$RELEASE/resources/app/extensions），以theme-开头的目录即为颜色主题配置 打开vscode，按键选择ctrl+k，ctrl+t，选择Monokai-My即可切换主题
程序员必备！14款VSCode主题，让你的代码更精彩！
最新发布
前端开发博客
03-25 4040
大家好，我是宝哥！推荐 Github 上 Star 数目排名靠前的VSCode主题，涵盖了各种风格和类型，总有一款适合你！喜欢记得点赞告诉我。1. night-owl-vscode-theme作者：sdras，star数：2.8k介绍：夜间编程的深色主题，以及适合日间的浅色主题。Night OwlLight Owl链接：https://github.com/sdras/night-owl-vsco...
css input,textarea 输入框光标颜色修改
weixin_44609842的博客
12-27 522
input, textarea { caret-color:#FFA800; }
aurora-borealis-vscode:代表北极光的自定义VS Code主题，也称为北极光
03-27
北极光主题。 代表北极光。 通过VS Code安装 在VS Code中打开“扩展”侧边栏面板。 View → Extensions或Ctrl + Shift + X 搜索Aurora Borealis 单击安装进行安装 单击重新加载以重新加载编辑器 代码>首选项>颜色主题>北极光 通过VS Code Marketplace安装 打开VS Code Marketplace 点击安装
vscode养眼visual studio样式，综合了vs和dark+
10-07
纯黑样式，护眼，另外对java的做了单独优化，放在安装目录C:\Program Files\Microsoft VS Code\resources\app\extensions\theme-defaults\themes下面，覆盖即可
VS Code的自定义代码颜色
lanlinQWQ的博客
03-13 3333
VS Code自定义代码颜色
VSCode设置代码颜色
qq_38149488的博客
04-21 1596
【代码】VSCode设置代码颜色。
vscode修改代码颜色
weixin_43657954的博客
04-12 4348
3、我从别的地方看的操作步骤没找到，所以我还是ctrl+shift+p，输入setting.json，我选中打开后是空白的，要自己配置颜色。1、ctrl+shift+p ,输入inspect。我换成水蜜桃色的主题后，想要修改一下代码颜色。2、可以查看代码样式。
自定义 vscode代码颜色
Ersan_Yi的博客
11-02 3325
VSCode自定义配色方案 - garvenc - 博客园
VSCode代码颜色设置与常用插件
热门推荐
小绿的博客
10-09 3万+
VSCode代码颜色设置与常用插件
vscode自定义theme，护眼java主题
11-13
绿色活动栏，纯黑代码背景更加护眼，绿色高亮关键字，错误提醒黄色波浪线更加醒目和护眼 加压后，将压缩包内的文件夹拷贝到vscode安装目录-->resources-->app-->extensions内，在vscode中设置-->颜色主题-->Eric Dark
vscode-shader:着色器语言对VS Code的支持
05-10
vscode着色器 描述 着色器语言对VS Code的支持 HLSL高级着色语言 GLSL -OpenGL着色语言 Cg图形C 主要特点 所有语言 着色器语言的语法突出显示 HLSL 显示代码完成建议 帮助功能和方法签名 显示悬停 HLSL文档 单击“悬停”框中的链接将打开HLSL文档（如果有） 查找参考和定义 文档和工作区符号 格式化代码 （实验性）要求安装MS CppTools 配置 hlsl.suggest.basic配置是否启用HLSL语言建议 hlsl.openDocOnSide在编辑器中和侧面（而不是在外部浏览器中）打开HLSL文档链接 安装 安装Visual Studio代码（1.17.0或更高版本） 启动代码 从命令选项板Ctrl-Shift-P （适用于Windows，Linux）或Cmd-Shift-P （适用于OSX） 选择Install Ext
vscode默认黑色主题标签颜色修改
04-30
默认主题,标签之间区别不明显,更改后效果见:https://blog.csdn.net/nice0513/article/details/124513784
详解vscode中vue代码颜色插件
10-17
vscode的确是前端开发中很好的工具，安装颜色插件，从视觉上是美的享受。这篇文章主要介绍了vscode中vue代码颜色插件 ,需要的朋友可以参考下
parksNRec-Theme-VSCode:绿色和棕色VS Code主题
05-05
揭露 玫瑰是红色的， 公园长椅是棕色的主题与演出无关真令人失望。 对不起！ 但是，它是绿色的完美融合-就像公园一样。 屏幕截图 JavaScript CSS HTML 降价促销 正在安装 在VS Code中打开“扩展”侧边栏面板：“ View → Extensions 由TheBeardless搜索Parks n Rec Rec- 单击安装进行安装。 单击重新加载以重新加载您的编辑器 代码>首选项>颜色主题> Parks n Rec 调色板 调色板 十六进制 绿色的 ＃aa5212 浅绿色 ＃a0ddb9 深绿色 ＃0d7c3c 灰色的 ＃939393 棕色的 ＃aa5212 白色的 ＃f1f1f1 黑色的 ＃0c0c0c 建于 vscode -VS代码编辑器 哟代码-扩展生成器 vsce-发布工具参考 在这份中型指南的帮助下 推荐的字体和设置 费拉密码VS
VSCodeHabrLightColorTheme:VSCode的简单颜色主题受到Habr.com的代码片段的启发
04-14
这种颜色主题的灵感来自的代码片段。 我喜欢#F18A2B ， #8757A5和#4370B0颜色，并认为，它们可以作为简单的独立灯光主题很好看。 顺便说一句，我还向Markdown预览版添加了自定义样式，因此所有内容看起来都更加一致...
Vscode文件夹和代码各种颜色（详细汇总）
maxle的博客
04-18 2万+
修改代码颜色（VSCode 设置注释的颜色为绿色）：， git 文件标识，修改vscode代码颜色，vscode文件夹变色，变成绿色 本篇主要写了在vscode里修改代码颜色，vscode文件夹变成绿色，文件夹变色，vscode修改代码颜色（VSCode 设置注释的颜色为绿色），git 文件标识，文件夹后面有个字母，文件的颜色，等等。
VScode 自定义代码颜色
weixin_52654493的博客
12-21 397
打开vacode，点击左侧边栏第五个选项，搜索Vetur，选中第一个安装即可
vscode vue代码颜色自定义
08-25
在 VS Code 中，你可以通过自定义主题来修改 Vue 代码的颜色。以下是一些步骤： 1. 打开 VS Code，点击左侧的扩展按钮（即方形图标）。 2. 在搜索栏中输入 "vue"，找到并安装 "Vetur" 扩展。这个扩展可以提供对 Vue 文件的语法高亮和其他功能支持。 3. 安装完毕后，点击左侧的文件资源管理器按钮（即文件夹图标），找到你的项目文件夹，打开一个 Vue 文件。 4. 点击右下角的选择语言模式按钮，选择 "Vue"。 5. 点击左下角的设置按钮（即齿轮图标），选择 "首选项" -> "颜色主题"。 6. 在主题列表中选择一个你喜欢的主题，如 "Dark+" 或 "Light+"，或者点击 "更多主题..." 浏览更多选项。 7. 如果你想进一步自定义颜色，可以点击 "编辑颜色主题"。这将打开一个 JSON 文件，你可以在其中修改各种不同元素的颜色设置。 8. 在 JSON 文件中，你可以找到类似 "vue" 或 "vue.xxx" 的键，然后修改对应的值来改变颜色。例如，你可以修改 "vue.tag" 来改变标签的颜色。 9. 修改完成后，保存文件并关闭。VS Code 将自动应用你的自定义颜色设置。 希望这些步骤可以帮助你自定义 Vue 代码的颜色！如果有任何问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值