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#272624
  • activityBar.foreground#dbac6d
  • badge.background#f0b800
  • badge.foreground#FFFFFF
  • breadcrumb.focusForeground#ffcc00
  • breadcrumb.foreground#000000
  • contrastActiveBorder#000000
  • contrastBorder#000000
  • editor.background#c9c3ba
  • editor.findMatchBackground#FFFF00
  • editor.findMatchHighlightBackground#F0F0B0
  • editor.findRangeHighlightBackground#f0ead0
  • editor.foldBackground#c0bbb0
  • editor.foreground#000000
  • editor.lineHighlightBackground#d9d6d0
  • editor.selectionBackground#dbcea6
  • editor.selectionHighlightBackground#f0e4d0
  • editorBracketMatch.background#d0a300
  • editorGroup.border#000000
  • editorGutter.background#B4B2B0
  • editorIndentGuide.background#606060
  • editorLineNumber.activeForeground#b87536
  • editorLineNumber.foreground#8a3700
  • editorOverviewRuler.bracketMatchForeground#a07300
  • editorOverviewRuler.findMatchForeground#FFFF00
  • editorSuggestWidget.background#FFFFFF
  • editorSuggestWidget.foreground#000000
  • editorSuggestWidget.selectedBackground#f0b240
  • editorWhitespace.foreground#808080
  • focusBorder#000000
  • list.hoverBackground#B0B0B0
  • menu.foreground#000000
  • minimap.background#b4aea7
  • minimap.findMatchHighlight#FFFF00
  • panel.border#000000
  • sideBar.background#c9c2ba
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#b2aea8
  • tab.activeForeground#000000
  • tab.border#000000
  • tab.inactiveBackground#dddad5
  • tab.unfocusedActiveBackground#e0e0e0
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0000C0
  • terminal.ansiBrightBlack#505050
  • terminal.ansiBrightBlue#2080F0
  • terminal.ansiBrightCyan#80F0F0
  • terminal.ansiBrightGreen#80F080
  • terminal.ansiBrightMagenta#F060F0
  • terminal.ansiBrightRed#F04040
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F0F060
  • terminal.ansiCyan#00B0B0
  • terminal.ansiGreen#008000
  • terminal.ansiMagenta#B000B0
  • terminal.ansiRed#C00000
  • terminal.ansiWhite#FFFFE0
  • terminal.ansiYellow#808000
  • titleBar.activeBackground#272624
  • titleBar.activeForeground#dbac6d
  • titleBar.border#000000
  • titleBar.inactiveBackground#272624
  • titleBar.inactiveForeground#dbac6d
  • tree.indentGuidesStroke#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name, entity.other.inherited-class, storage.type.built-in#a03d00
storage.type.built-inbold
entity.name.function, entity.name.label, entity.name.section, entity.name.tag#a06000
entity.name.function.operator#000000
variable, variable.parameter, variable.function, variable.language#000000
variable.languagebold
constant, constant.numeric, constant.language, keyword.other.unit#802f00
constant.language, constant.character.escapebold
storage.type#b04900bold
storage.modifier, storage.control, entity.other.attribute-name#804600bold
entity.other.attribute-name
support#000000
keyword, keyword.control, keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.logical, keyword.operator.new, keyword.operator.delete, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.noexcept, keyword.operator.wordlike, keyword.operator.word, keyword.declaration, markup.heading, punctuation.definition.markdown#b82005bold
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.logical
punctuation.definition.bracket, punctuation.definition.begin.bracket.square, punctuation.definition.end.bracket.square, punctuation.section.angle-brackets, punctuation.section.block.begin.bracket.curly, punctuation.section.block.end.bracket.curly, punctuation.section.parens.begin.bracket.round, punctuation.section.parens.end.bracket.round, punctuation.section.parameters.begin.bracket.round, punctuation.section.parameters.end.bracket.round, punctuation.section.arguments.begin.bracket.round, punctuation.section.arguments.end.bracket.round, storage.modifier.array.bracket.square, keyword.operator.delete.array.bracket, keyword.operator.comparison, punctuation.definition.tag#000000bold
punctuation.separator, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, punctuation.separator.annotation, punctuation.separator.delimiter#000000bold
string, fenced_code.block.language, markup.fenced_code.block, markup.inline.raw#af8f00
comment, markup.quote#806f00italic
markup.list#a08800
markup.boldbold
markup.italicitalic
markup.underline.link, meta.link, punctuation.definition.link, string.other.link#ffcc00underline
invalid, invalid.deprecated#000000
Brigitte Helm by Tristan Muller - VS Code Theme