Skip to main content
Coding Theme

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.background#222223
  • activityBar.border#222223
  • activityBar.foreground#E6E6E6
  • activityBarBadge.background#19F9D8
  • activityBarBadge.foreground#242526
  • badge.background#6fc1ff
  • badge.foreground#242526
  • button.background#45a9f9
  • button.foreground#ffffff
  • button.hoverBackground#676b79
  • diffEditor.insertedTextBackground#19f9d866
  • diffEditor.removedTextBackground#ff4b8266
  • editor.background#242526
  • editor.findMatchBackground#b084eb90
  • editor.findMatchHighlightBackground#ffb86c40
  • editor.foreground#E6E6E6
  • editor.inactiveSelectionBackground#ffb86c40
  • editor.lineHighlightBackground#2C2D30
  • editor.selectionBackground#373B41
  • editor.selectionHighlightBackground#ffb86c40
  • editor.wordHighlightBackground#ffcc9560
  • editor.wordHighlightStrongBackground#ff9ac170
  • editorBracketHighlight.foreground1#FF75B5
  • editorBracketHighlight.foreground2#6FC1FF
  • editorBracketHighlight.foreground3#FFCC95
  • editorBracketHighlight.foreground4#19F9D8
  • editorBracketHighlight.foreground5#B084EB
  • editorBracketHighlight.foreground6#FFB86C
  • editorBracketMatch.border#19f9d8
  • editorCodeLens.foreground#ffb86c40
  • editorCursor.foreground#19F9D8
  • editorError.border#ff4b82
  • editorError.foreground#ff4b82
  • editorGroupHeader.tabsBackground#222223
  • editorGutter.addedBackground#19f9d8
  • editorGutter.deletedBackground#ff4b82
  • editorGutter.modifiedBackground#ffcc95
  • editorHoverWidget.background#464748
  • editorLineNumber.activeForeground#E6E6E6
  • editorLineNumber.foreground#4F535D
  • editorOverviewRuler.addedForeground#19f9d8
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.deletedForeground#ff4b82
  • editorOverviewRuler.errorForeground#ff4b82
  • editorOverviewRuler.infoForeground#6fc1ff
  • editorOverviewRuler.modifiedForeground#ffcc95
  • editorOverviewRuler.warningForeground#ffcc95
  • editorRuler.foreground#b084eb60
  • editorSuggestWidget.selectedBackground#19f9d899
  • editorWarning.border#ffcc95
  • editorWarning.foreground#ffcc95
  • editorWhitespace.foreground#4e5260
  • editorWidget.background#2a2c2d
  • editorWidget.border#373b41
  • errorForeground#ff4b82
  • extensionButton.prominentBackground#45a9f9
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#676b79
  • foreground#e6e6e6
  • gitDecoration.ignoredResourceForeground#757575
  • list.activeSelectionBackground#464748
  • list.activeSelectionForeground#19f9d8
  • list.focusBackground#464748
  • list.focusForeground#19f9d8
  • list.highlightForeground#6fc1ff
  • list.hoverBackground#464748
  • list.hoverForeground#cdcdcd
  • list.inactiveSelectionBackground#464748
  • list.inactiveSelectionForeground#19f9d8
  • merge.currentContentBackground#b084eb40
  • merge.currentHeaderBackground#b084eb90
  • merge.incomingContentBackground#ffb86c40
  • merge.incomingHeaderBackground#45a9f990
  • progressBar.background#b084eb
  • scrollbar.shadow#222223
  • scrollbarSlider.activeBackground#757575
  • scrollbarSlider.background#373b4199
  • scrollbarSlider.hoverBackground#757575
  • sideBar.background#242526
  • sideBar.border#222223
  • sideBar.foreground#E6E6E6
  • sideBarSectionHeader.background#222223
  • statusBar.background#222223
  • statusBar.debuggingBackground#b084eb
  • statusBar.debuggingForeground#e6e6e6
  • statusBar.foreground#E6E6E6
  • statusBar.noFolderBackground#242526
  • statusBar.noFolderForeground#e6e6e6
  • tab.activeBackground#242526
  • tab.activeBorder#19f9d8
  • tab.activeForeground#19F9D8
  • tab.inactiveBackground#202122
  • tab.inactiveForeground#8A919E
  • terminal.ansiBlue#45a9f9
  • terminal.ansiBrightBlack#757575
  • terminal.ansiBrightBlue#6fc1ff
  • terminal.ansiBrightCyan#bcaafe
  • terminal.ansiBrightGreen#19f9d8
  • terminal.ansiBrightMagenta#ff9ac1
  • terminal.ansiBrightRed#ff2c6d
  • terminal.ansiBrightWhite#e6e6e6
  • terminal.ansiBrightYellow#ffcc95
  • terminal.ansiCyan#b084eb
  • terminal.ansiGreen#19f9d8
  • terminal.ansiMagenta#ff75b5
  • terminal.ansiRed#ff2c6d
  • terminal.ansiWhite#cdcdcd
  • terminal.ansiYellow#ffb86c
  • terminalCursor.background#e6e6e6
  • terminalCursor.foreground#ff4b82
  • titleBar.activeBackground#242526
  • titleBar.activeForeground#e6e6e6
  • titleBar.inactiveBackground#242526
  • titleBar.inactiveForeground#e6e6e6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.import.python variable.other.readwrite, meta.import.python variable.other, meta.import variable.other, meta.import entity.name.type, meta.use.rust variable.other#9CDCFE
comment, comment.line, comment.block, punctuation.definition.comment#757B8Ditalic
storage.type.class.jsdoc, comment.block.documentation variable.other, comment.block.documentation storage.type, comment.block storage.custom#FFCC95bold
string.quoted.docstring, string.quoted.triple, string.quoted.docstring.multi.python, string.quoted.docstring.multi#7BE6A9italic
keyword, keyword.control, keyword.control.import, keyword.control.from, keyword.control.flow, keyword.operator.logical, keyword.operator.word, keyword.operator.new, keyword.control.at-rule, keyword.control.export#FF75B5
storage.type.function, storage.type.class, storage.type.def, storage.type.interface, storage.type.enum, storage.type.struct#FFB86C
storage.modifier, storage.type#FF9AC1
entity.name.namespace, support.type.object.module, support.module, meta.import.python, meta.import variable.other, meta.use.rust, entity.name.package#B084EB
entity.name.type, entity.name.type.class, entity.name.class, support.class, support.type, entity.other.inherited-class, entity.name.type.interface, entity.name.type.enum, entity.name.type.struct, entity.name.type.alias#FFCC95
entity.name.type.parameter, support.type.type-parameter, meta.type.parameters entity.name.type#FFE3B0
entity.name.function, support.function, meta.function-call.generic, meta.function-call.python, meta.function-call, variable.function#6FC1FF
entity.name.function.member, support.function.method, meta.function-call.method, meta.method-call, variable.function.member#45A9F9
support.function.builtin, support.function.builtin.python, support.function.core#45A9F9italic
support.function.magic.python, entity.name.function.magic.python, variable.language.constructor#B084EB
variable.parameter, variable.parameter.function, variable.parameter.named.python, meta.function.parameters variable.parameter, entity.expression variable.parameter.name#FFB86C
variable, variable.other.readwrite, variable.other, variable.other.python, variable.other.readwrite.python, entity.name.variable, meta.import variable, meta.import.python variable, meta.function-call.arguments variable, meta.function-call.arguments variable.other, meta.function-call variable.other#9CDCFE
variable.other.property, variable.other.member, variable.other.object.property, support.type.property-name#FF9AC1
variable.other.constant, variable.other.enummember, constant.other, meta.enum variable.other.readwrite#FFB86C
variable.language.this, variable.language.special.self.python, variable.language.special.cls.python, variable.language.super, variable.language#FF75B5italic
meta.decorator entity.name.function, meta.decorator variable.other, entity.name.function.decorator, meta.decorator#6FC1FF
punctuation.definition.decorator, meta.decorator punctuation.decorator#FFB86C
string, string.quoted.single, string.quoted.double, string.template#19F9D8
punctuation.definition.template-expression, variable.interpolation, punctuation.section.embedded#FF75B5
constant.character.escape, constant.other.placeholder#FF4B82
string.regexp, constant.regexp#45A9F9
constant.numeric#FFB86C
constant.language.boolean, constant.language.null, constant.language.python, constant.language#FFB86C
keyword.operator.assignment, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.bitwise#E6E6E6
keyword.operator.arrow, punctuation.separator.annotation.result.python#FF75B5
punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.section#8A919E
entity.name.tag, punctuation.definition.tag, support.class.component#FF2C6D
entity.other.attribute-name, entity.other.attribute-name.html#FFB86C
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css#FFCC95
support.type.property-name.css#E6E6E6
support.constant.property-value.css, keyword.other.unit.css, keyword.other.unit#FFB86C
support.type.property-name.json#6FC1FF
entity.name.tag.yaml#FFCC95
markup.heading, punctuation.definition.heading.markdown#19F9D8bold
markup.bold, punctuation.definition.bold.markdown#FFB86Cbold
markup.italic, punctuation.definition.italic.markdown#FF9AC1italic
markup.inline.raw, markup.fenced_code.block.markdown#7BE6A9
markup.underline.link, string.other.link.title.markdown#45A9F9
markup.quote, beginning.punctuation.definition.list.markdown#FF75B5
markup.inserted#19F9D8
markup.deleted#FF2C6D
markup.changed#FFB86C