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#0c0f1b
  • activityBar.border#0D3A58
  • activityBar.dropBackground#0d3a58
  • activityBar.foreground#fff
  • activityBar.inactiveForeground#6f7683
  • activityBarBadge.background#fef467
  • activityBarBadge.foreground#000
  • badge.background#ffc600
  • badge.foreground#000
  • button.background#0088ff
  • button.foreground#fff
  • button.hoverBackground#ff9d00
  • contrastBorder#ffffff00
  • debugExceptionWidget.background#193549
  • debugExceptionWidget.border#aaa
  • debugToolBar.background#193549
  • descriptionForeground#aaa
  • diffEditor.insertedTextBackground#3ad90033
  • diffEditor.insertedTextBorder#3ad90055
  • diffEditor.removedTextBackground#ee3a4333
  • diffEditor.removedTextBorder#ee3a4355
  • dropdown.background#193549
  • dropdown.border#15232d
  • dropdown.foreground#fff
  • editor.background#0c0f1b
  • editor.findMatchBackground#eebd9d
  • editor.findMatchBorder#0D3A58
  • editor.findMatchHighlightBackground#0f64e471
  • editor.findMatchHighlightBorder#eebd9d
  • editor.foreground#eeffff
  • editor.inactiveSelectionBackground#193549
  • editor.lineHighlightBackground#000000
  • editor.lineHighlightBorder#0D3A58
  • editor.selectionBackground#ffb3de
  • editor.selectionHighlightBackground#3f51b588
  • editor.wordHighlightBackground#7ce1ee33
  • editorBracketMatch.background#0d3a58
  • editorBracketMatch.border#ffc60080
  • editorCodeLens.foreground#aaa
  • editorCursor.foreground#ffc600
  • editorError.border#fe6772
  • editorError.foreground#ff0000
  • editorGroup.border#122738
  • editorGroup.dropBackground#12273899
  • editorGutter.addedBackground#99ffee8a
  • editorGutter.background#0c0f1b
  • editorGutter.deletedBackground#fe6772
  • editorGutter.modifiedBackground#568beed2
  • editorHoverWidget.background#15232d
  • editorHoverWidget.border#0d3a58
  • editorIndentGuide.activeBackground#929000
  • editorIndentGuide.background#3B5364
  • editorLineNumber.activeForeground#ffc600
  • editorLineNumber.foreground#aaa
  • editorLink.activeForeground#aaa
  • editorMarkerNavigation.background#3B536433
  • editorMarkerNavigationError.background#A22929
  • editorMarkerNavigationWarning.background#ffc600
  • editorOverviewRuler.border#0d3a58
  • editorOverviewRuler.commonContentForeground#ffc60055
  • editorOverviewRuler.currentContentForeground#ee3a4355
  • editorOverviewRuler.findMatchForeground#ff00f2
  • editorOverviewRuler.incomingContentForeground#3ad90055
  • editorRuler.foreground#1F4662
  • editorSuggestWidget.background#01132e
  • editorSuggestWidget.border#15232d
  • editorSuggestWidget.foreground#aaa
  • editorSuggestWidget.highlightForeground#ffc600
  • editorSuggestWidget.selectedBackground#193549
  • editorWarning.border#ffffff00
  • editorWarning.foreground#ffc600
  • editorWhitespace.foreground#ffffff1a
  • editorWidget.background#15232d
  • editorWidget.border#0d3a58
  • errorForeground#A22929
  • extensionButton.prominentBackground#0088ff
  • extensionButton.prominentForeground#fff
  • extensionButton.prominentHoverBackground#ff9d00
  • focusBorder#0d3a58
  • foreground#aaa
  • gitDecoration.conflictingResourceForeground#ffb3de
  • gitDecoration.deletedResourceForeground#ffb3de
  • gitDecoration.ignoredResourceForeground#ffb3de
  • gitDecoration.modifiedResourceForeground#fef467
  • gitDecoration.untrackedResourceForeground#bdfe67
  • input.background#0c0f1b
  • input.border#0D3A58
  • input.foreground#fef467
  • input.placeholderForeground#aaa
  • inputOption.activeBorder#bdfe67
  • inputValidation.errorBackground#193549
  • inputValidation.errorBorder#0D3A58
  • inputValidation.infoBackground#193549
  • inputValidation.infoBorder#0D3A58
  • inputValidation.warningBackground#193549
  • inputValidation.warningBorder#ffc600
  • list.activeSelectionBackground#193549
  • list.activeSelectionForeground#fff
  • list.dropBackground#0d3a58
  • list.focusBackground#0d3a58
  • list.focusForeground#fef467
  • list.highlightForeground#ffb3de
  • list.hoverBackground#193549
  • list.hoverForeground#aaa
  • list.inactiveSelectionBackground#0d3a58
  • list.inactiveSelectionForeground#aaa
  • merge.border#ffffff00
  • merge.commonContentBackground#c97d0c
  • merge.commonHeaderBackground#c97d0c
  • merge.currentContentBackground#2F7366
  • merge.currentHeaderBackground#2F7366
  • merge.incomingContentBackground#185294
  • merge.incomingHeaderBackground#185294
  • panel.background#0c0f1b
  • panel.border#0D3A58
  • panelTitle.activeBorder#fef467
  • panelTitle.activeForeground#0D3A58
  • panelTitle.inactiveForeground#6d8996
  • peekView.border#0D3A58
  • peekViewEditor.background#193549
  • peekViewEditor.matchHighlightBackground#19354900
  • peekViewEditor.matchHighlightBorder#ff0000
  • peekViewEditorGutter.background#122738
  • peekViewResult.background#15232d
  • peekViewResult.fileForeground#aaa
  • peekViewResult.lineForeground#fff
  • peekViewResult.matchHighlightBackground#0d3a58
  • peekViewResult.selectionBackground#0d3a58
  • peekViewResult.selectionForeground#fff
  • peekViewTitle.background#15232d
  • peekViewTitleDescription.foreground#aaa
  • peekViewTitleLabel.foreground#ffc600
  • pickerGroup.border#ffe033
  • pickerGroup.foreground#9deee6
  • progressBar.background#ffc600
  • quickInput.background#0c0f1b
  • quickInput.foreground#eeffff
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#ff1313cc
  • scrollbarSlider.background#8ef8cc7a
  • scrollbarSlider.hoverBackground#406179cc
  • selection.background#b4004e
  • sideBar.background#0c0f1b
  • sideBar.border#0d3a58
  • sideBar.dropBackground#bdfe67
  • sideBar.foreground#aaa
  • sideBarSectionHeader.background#010135
  • sideBarSectionHeader.border#0D3A58
  • sideBarSectionHeader.foreground#aaaaaa
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#15232d
  • statusBar.border#fff0a6
  • statusBar.debuggingBackground#ffc600
  • statusBar.debuggingForeground#15232d
  • statusBar.foreground#aaa
  • statusBar.noFolderBackground#15232d
  • statusBar.noFolderForeground#aaa
  • statusBarItem.activeBackground#0088ff
  • statusBarItem.prominentBackground#15232d
  • statusBarItem.prominentHoverBackground#0d3a58
  • tab.activeBackground#0c0f1b
  • tab.activeBorder#bdfe67
  • tab.activeForeground#bdfe67
  • tab.border#0c0f1b
  • tab.inactiveBackground#193549
  • tab.inactiveForeground#aaa
  • tab.unfocusedActiveForeground#aaa
  • tab.unfocusedInactiveForeground#aaa
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0088ff
  • terminal.ansiBrightBlack#0050A4
  • terminal.ansiBrightBlue#0088ff
  • terminal.ansiBrightCyan#80fcff
  • terminal.ansiBrightGreen#3ad900
  • terminal.ansiBrightMagenta#fb94ff
  • terminal.ansiBrightRed#ff628c
  • terminal.ansiBrightWhite#193549
  • terminal.ansiBrightYellow#ffc600
  • terminal.ansiCyan#80fcff
  • terminal.ansiGreen#3ad900
  • terminal.ansiMagenta#fb94ff
  • terminal.ansiRed#ff628c
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffc600
  • terminal.background#000000
  • terminal.foreground#ffffff
  • terminal.selectionBackground#006164a4
  • terminalCursor.background#ffc600
  • terminalCursor.foreground#ffc600
  • textBlockQuote.background#193549
  • textBlockQuote.border#0088ff
  • textCodeBlock.background#193549
  • textLink.activeForeground#0088ff
  • textLink.foreground#0088ff
  • textPreformat.foreground#ffc600
  • textSeparator.foreground#0d3a58
  • titleBar.activeBackground#15232D
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#193549
  • titleBar.inactiveForeground#ffffff33
  • walkThrough.embeddedEditorBackground#0d3a58
  • welcomePage.buttonBackground#193549
  • welcomePage.buttonHoverBackground#0d3a58
  • widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.operator.type, keyword.operator.logical#e86830
entity.name.type.class#bdfe67italic
variable.parameter#bdfe67italic
constant.language.boolean#e86830
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#9deee6
keyword.control.export#e86830italic
support.variable.object, support.variable.property#fffeeeitalic
entity.name.tag.yaml#9deee6italic
comment, punctuation.definition.comment#6d8996italic
variable, string constant.other.placeholder#EEFFFF
constant.other.color#ffffff
invalid, invalid.illegal#fe6772
keyword, storage.type, storage.modifier#67fea8italic
constant.other.color, 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#ffb3deitalic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#eebd9d
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#9deee6
meta.block variable.other#eebd9d
support.other.variable, string.other.link#eebd9d
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#fffeee
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, string.quoted.double.json#fef467
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#fffeee
support.type#B2CCD6
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
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#f8bbd0
variable.language#f8bbd0italic
entity.name.method.js#74dff5italic
meta.class-method.js entity.name.function.js, variable.function.constructor#fffeee
entity.other.attribute-name#a5ee9d
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#fff0a6italic
entity.other.attribute-name.class#fff0a6
source.sass keyword.control#74dff5
markup.inserted#C3E88D
markup.deleted#f8bbd0
markup.changed#a5ee9d
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#74dff5italic
source.js constant.other.object.key.js string.unquoted.label.js#f8bbd0italic
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json#f48fb1
source.json meta.structure.dictionary.json support.type.property-name.json#bdfe67
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9deee6
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#daf381
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#97efff
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#74dff5
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#eebd9d
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#a5ee9d
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#a5ee9d
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#C3E88D
markup.italic#eebd9ditalic
markup.bold, markup.bold string#eebd9dbold
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#eebd9dbold
markup.underline#fffeeeunderline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#74dff5
string.other.link.description.title.markdown#a5ee9d
constant.other.reference.link.markdown#fff0a6
markup.raw.block#a5ee9d
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
constant.other.placeholder.go#fffeee
meta.function-call.arguments.python#fffeee
variable.language.special.self.python#ffccbcitalic
support.type.python#a4eaf8
string.quoted.docstring.multi.python#6d8996italic
entity.name.tag.other.html#ffccbc
support.function.builtin#ccff90
meta.function-call.generic#fffde7
constant.character.set.regexp#fffeee
constant.other.set.regexp#6ff9ff
keyword.operator.quantifier.regexp#ffee58
constant.other.character-class.regexp#c6ff00
punctuation.parenthesis.begin.regexp, punctuation.parenthesis.end.regexp, punctuation.parenthesis.non-capturing.begin.regexp, punctuation.parenthesis.non-capturing.end.regexp, keyword.operator.disjunction.regexp#ff7043
support.other.escape.special.regexp#b2ff59
keyword.operator.negation.regexp, keyword.operator.disjunction.regexp, keyword.control.anchor.regexp#ff6e40
meta.assertion.negative-look-ahead.regexp, meta.assertion.negative-look-behind.regexp, meta.assertion.look-ahead.regexp, meta.assertion.look-behind.regexp#ccff90