Skip to main content
Coding Theme

Color themes

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#24212B
  • activityBar.border#24212B
  • activityBar.dropBackground#5f7e97
  • activityBar.foreground#5f7e97
  • activityBarBadge.background#44596b
  • activityBarBadge.foreground#ffffff
  • button.background#2E303E
  • dropdown.background#232530
  • dropdown.listBackground#2E303E
  • editor.background#24212B
  • editor.findMatchBackground#6C6F9399
  • editor.findMatchHighlightBackground#6C6F9333
  • editor.findRangeHighlightBackground#6C6F931A
  • editor.foreground#d4d4d4
  • editor.hoverHighlightBackground#6C6F934D
  • editor.inactiveSelectionBackground#7e57c25a
  • editor.lineHighlightBackground#2E303E33
  • editor.rangeHighlightBackground#2E303E99
  • editor.selectionBackground#1d3b53
  • editor.selectionHighlightBackground#5f7e9779
  • editor.wordHighlightBackground#6C6F9373
  • editor.wordHighlightStrongBackground#6C6F9373
  • editorBracketMatch.background#6C6F9366
  • editorBracketMatch.border#6C6F9300
  • editorCodeLens.foreground#6C6F9399
  • editorHoverWidget.background#011627
  • editorHoverWidget.border#5f7e97
  • editorIndentGuide.activeBackground#2E303E
  • editorIndentGuide.background#2E303E99
  • editorLineNumber.activeForeground#D5D8DA73
  • editorLineNumber.foreground#D5D8DA1F
  • editorOverviewRuler.addedForeground#09f7a099
  • editorOverviewRuler.border#2E303EB3
  • editorOverviewRuler.bracketMatchForeground#D5D8DA66
  • editorOverviewRuler.deletedForeground#F43E5C99
  • editorOverviewRuler.errorForeground#F43E5CE6
  • editorOverviewRuler.findMatchForeground#6C6F93
  • editorOverviewRuler.modifiedForeground#21BFC299
  • editorOverviewRuler.warningForeground#27D79773
  • editorRuler.foreground#6C6F9333
  • editorSuggestWidget.background#2C3043
  • editorSuggestWidget.border#2B2F40
  • editorSuggestWidget.foreground#d6deeb
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#5f7e97
  • editorWidget.background#31364a
  • editorWidget.border#262A39
  • errorForeground#F43E5C
  • focusBorder#1A1C23
  • foreground#D5D8DA
  • input.background#2E303E
  • inputOption.activeBorder#E9436D99
  • inputValidation.errorBackground#F43E5C80
  • inputValidation.errorBorder#F43E5C00
  • list.activeSelectionBackground#5f7e97
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#011627
  • list.focusBackground#010d18
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#5f7e97
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#5f7e97
  • list.inactiveSelectionForeground#ffffff
  • list.invalidItemForeground#975f94
  • scrollbar.shadow#010b14
  • scrollbarSlider.activeBackground#87d1aa86
  • scrollbarSlider.background#87d1aa86
  • scrollbarSlider.hoverBackground#87d1aa86
  • selection.background#b0f3cf
  • sideBar.background#1f1d25
  • sideBar.border#24212B
  • sideBar.foreground#d4d4d4
  • sideBarSectionHeader.background#24212B
  • sideBarSectionHeader.foreground#EBF2EE
  • sideBarTitle.foreground#EBF2EE
  • statusBar.background#77AF9C
  • statusBar.border#262A39
  • statusBar.debuggingBackground#AAFCB8
  • statusBar.debuggingBorder#1F2330
  • statusBar.foreground#24212B
  • statusBar.noFolderBackground#AAFCB8
  • statusBar.noFolderBorder#25293A
  • statusBarItem.activeBackground#AAFCB8
  • statusBarItem.hoverBackground#AAFCB8
  • statusBarItem.prominentBackground#AAFCB8
  • statusBarItem.prominentHoverBackground#AAFCB8
  • tab.activeBorder#E95378
  • tab.border#1C1E2600
  • tab.inactiveBackground#1C1E26
  • terminal.ansiBlue#30AAD7
  • terminal.ansiBrightBlue#56C2EA
  • terminal.ansiBrightCyan#3CE8E6
  • terminal.ansiBrightGreen#0AF29D
  • terminal.ansiBrightMagenta#F360C4
  • terminal.ansiBrightRed#E06783
  • terminal.ansiBrightYellow#FAC39A
  • terminal.ansiCyan#1FDAD9
  • terminal.ansiGreen#14D386
  • terminal.ansiMagenta#E54EAF
  • terminal.ansiRed#E95478
  • terminal.ansiYellow#FAB795
  • terminal.foreground#D5D8DA
  • terminal.selectionBackground#6C6F934D
  • terminalCursor.background#D5D8DA
  • terminalCursor.foreground#6C6F9399
  • textLink.activeForeground#E9436D
  • textLink.foreground#E95378
  • widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#eeffffff
comment, punctuation.definition.comment#d6dcd9a9italic
string.quoted, variable.other.readwrite.js#fdfdfd
constant.language, punctuation.definition.constant, variable.other.constant#7BBE9B
constant.character.escape#F78C6C
variable#FCFCFC
constant.other.color#ffffff
invalid, invalid.illegal#FF5370
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx#c792eaitalic
storage.type#F7567C
storage.type.function.arrow.js#A3D1CB
entity.name.class, meta.class entity.name.type.class#7BBE9B
entity.other.inherited-class#9DD9D2
entity.name.function#568ef7
meta.function punctuation.separator.comma#5f7e97
meta.brace#ded6eb
meta.brace.round.ts, meta.field.declaration.ts#568ef7
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#9DD9D2
variable.other.object.property#AAFCB8italic
variable.other.object.js
entity.name.function#F9849F
variable.function#82AAFF
variable.interpolation#ec5f67
meta.function-call#82AAFF
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#ece911
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#0026ff
string.template, punctuation.definition.string#77AF9C
string.template punctuation.definition.string#FCFCFC
storage.modifier#B877DBE6
italic#c792eaitalic
bold#addb67bold
quote#697098italic
raw#80CBC4
keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx#80CBC4italic
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts#B877DBE6
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control#06f5c9
punctuation.accessor, keyword#9DD9D2italic
constant.language.boolean#ff5874
support.variable.property#02ffd1
punctuation.definition.tag, meta.tag#7fdbca
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#9DD9D2
meta.class entity.name.type.class.js#8CD790
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#F7567C
variable.parameter.function.js#7986E7
meta.object-literal.key, support.type.property-name#F7567C
punctuation.separator.key-value#AAFCB8
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#d6deeb
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#B2CCD6
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#addb67
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#82AAFF
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#bec5d4
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#F78C6C
entity.name.tag.scss, entity.name.tag.sass#7fdbca
keyword.other.unit.scss, keyword.other.unit.sass#FFEB95
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF5370
variable.language#FF5370italic
entity.name.method.js#82AAFFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#A9DDD6
entity.other.attribute-name#C792EA
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCB6Bitalic
support.type.property-name.css#BBBBBB
constant.other.color#F09483E6
support.constant.font-name#F09483E6
entity.other.attribute-name.id#25B0BCE6
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#FAB795E6
support.function.misc.css#FAC29AE6
markup.heading, entity.name.section#E95678E6
markup.quote#BBBBBBCCitalic
beginning.punctuation.definition.list#E95678E6
markup.underline.link#FAB795E6
string.other.link.description#F09483E6
markup.inserted#C3E88D
markup.deleted#FF5370
markup.changed#C792EA
string.regexp#89DDFF
constant.character.escape#89DDFF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#C792EA
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFCB6B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F78C6C
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF5370
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C17E70
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#82AAFF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f07178
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C792EA
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C3E88D
text.html.markdown, punctuation.definition.list_item.markdown#EEFFFF
text.html.markdown markup.inline.raw.markdown#C792EA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#C3E88D
markup.italic#f07178italic
markup.bold, markup.bold string#f07178bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#f07178bold
markup.underline#F78C6Cunderline
markup.strikestrike
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#82AAFF
string.other.link.description.title.markdown#C792EA
constant.other.reference.link.markdown#FFCB6B
markup.raw.block#C792EA
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#EEFFFF
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6