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#1a1a1a
  • activityBar.border#1a1a1a
  • activityBar.dropBackground#a0a0a0
  • activityBar.foreground#6A595A
  • activityBar.inactiveForeground#4c4c4c
  • activityBarBadge.background#6A595A
  • activityBarBadge.foreground#1a1a1a
  • badge.background#ceb188
  • badge.foreground#1a1a1a
  • button.background#6A595A
  • button.foreground#1a1a1a
  • button.hoverBackground#4c4c4c
  • 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#6A595A
  • dropdown.foreground#fff
  • editor.background#1a1a1a
  • editor.findMatchBackground#97a897
  • editor.findMatchBorder#6A595A
  • editor.findMatchHighlightBackground#6A595A71
  • editor.findMatchHighlightBorder#ed64765d
  • editor.foreground#C2C2C2
  • editor.inactiveSelectionBackground#193549
  • editor.lineHighlightBackground#1a1a1a
  • editor.lineHighlightBorder#6A595A80
  • editor.selectionBackground#ed64765d
  • editor.selectionHighlightBackground#3f51b588
  • editor.wordHighlightBackground#7ce1ee33
  • editorBracketMatch.background#0d3a58
  • editorBracketMatch.border#ffc60080
  • editorCodeLens.foreground#aaa
  • editorCursor.foreground#6A595A
  • editorError.border#B9A7B8
  • editorError.foreground#ff0000
  • editorGroup.border#122738
  • editorGroup.dropBackground#12273899
  • editorGutter.addedBackground#9ec49f8a
  • editorGutter.background#1a1a1a
  • editorGutter.deletedBackground#6A595A8a
  • editorGutter.modifiedBackground#ceb1888a
  • editorHoverWidget.background#15232d
  • editorHoverWidget.border#0d3a58
  • editorIndentGuide.activeBackground#929000
  • editorIndentGuide.background#3B5364
  • editorLineNumber.activeForeground#ceb188
  • editorLineNumber.foreground#aaa
  • editorLink.activeForeground#aaa
  • editorMarkerNavigation.background#3B536433
  • editorMarkerNavigationError.background#6A595A
  • editorMarkerNavigationWarning.background#ceb188
  • 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#ceb188
  • editorSuggestWidget.selectedBackground#193549
  • editorWarning.border#ffffff00
  • editorWarning.foreground#ceb188
  • editorWhitespace.foreground#ffffff1a
  • editorWidget.background#15232d
  • editorWidget.border#0d3a58
  • errorForeground#6A595A
  • extensionButton.prominentBackground#0088ff
  • extensionButton.prominentForeground#fff
  • extensionButton.prominentHoverBackground#ff9d00
  • focusBorder#0d3a58
  • foreground#aaa
  • gitDecoration.conflictingResourceForeground#B9A7B8
  • gitDecoration.deletedResourceForeground#6A595A
  • gitDecoration.ignoredResourceForeground#6A595A
  • gitDecoration.modifiedResourceForeground#9ec3c4
  • gitDecoration.untrackedResourceForeground#ceb188
  • input.background#1a1a1a
  • input.border#0D3A58
  • input.foreground#b5ac97
  • input.placeholderForeground#aaa
  • inputOption.activeBorder#b5ac97
  • inputValidation.errorBackground#6A595A
  • inputValidation.errorBorder#0D3A58
  • inputValidation.infoBackground#6A595A
  • inputValidation.infoBorder#0D3A58
  • inputValidation.warningBackground#6A595A
  • inputValidation.warningBorder#ceb188
  • list.activeSelectionBackground#193549
  • list.activeSelectionForeground#fff
  • list.dropBackground#0d3a58
  • list.focusBackground#0d3a58
  • list.focusForeground#b5ac97
  • list.highlightForeground#B9A7B8
  • 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#1a1a1a
  • panel.border#6A595A
  • panelTitle.activeBorder#6A595A
  • panelTitle.activeForeground#6A595A
  • panelTitle.inactiveForeground#C2C2C2
  • 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#ceb188
  • pickerGroup.border#ffe033
  • pickerGroup.foreground#97a897
  • progressBar.background#ceb188
  • quickInput.background#1a1a1a
  • quickInput.foreground#C2C2C2
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#ff0000
  • scrollbarSlider.background#8ef8cc7a
  • scrollbarSlider.hoverBackground#406179cc
  • selection.background#b4004e
  • sideBar.background#1a1a1a
  • sideBar.border#6A595A
  • sideBar.dropBackground#b5ac97
  • sideBar.foreground#C2C2C2
  • sideBarSectionHeader.background#6A595A
  • sideBarSectionHeader.border#1a1a1a
  • sideBarSectionHeader.foreground#1a1a1a
  • sideBarTitle.foreground#C2C2C2
  • statusBar.background#1a1a1a
  • statusBar.border#fff0a6
  • statusBar.debuggingBackground#ceb188
  • statusBar.debuggingForeground#15232d
  • statusBar.foreground#aaa
  • statusBar.noFolderBackground#15232d
  • statusBar.noFolderForeground#aaa
  • statusBarItem.activeBackground#0088ff
  • statusBarItem.prominentBackground#15232d
  • statusBarItem.prominentHoverBackground#0d3a58
  • tab.activeBackground#6A595A
  • tab.activeBorder#6A595A
  • tab.activeForeground#1a1a1a
  • tab.border#1a1a1a
  • tab.inactiveBackground#1a1a1aaa
  • tab.inactiveForeground#C2C2C2
  • tab.unfocusedActiveForeground#C2C2C2
  • tab.unfocusedInactiveForeground#C2C2C2
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#9ec3c4
  • terminal.ansiBrightBlack#0050A4
  • terminal.ansiBrightBlue#0088ff
  • terminal.ansiBrightCyan#80fcff
  • terminal.ansiBrightGreen#3ad900
  • terminal.ansiBrightMagenta#fb94ff
  • terminal.ansiBrightRed#ff628c
  • terminal.ansiBrightWhite#193549
  • terminal.ansiBrightYellow#ceb188
  • terminal.ansiCyan#80fcff
  • terminal.ansiGreen#9ec49f
  • terminal.ansiMagenta#fb94ff
  • terminal.ansiRed#6A595A
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ceb188
  • terminal.background#000000
  • terminal.foreground#ffffff
  • terminal.selectionBackground#006164a4
  • terminalCursor.background#ceb188
  • terminalCursor.foreground#ceb188
  • textBlockQuote.background#193549
  • textBlockQuote.border#0088ff
  • textCodeBlock.background#193549
  • textLink.activeForeground#0088ff
  • textLink.foreground#0088ff
  • textPreformat.foreground#ceb188
  • 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#C0D3B7
keyword.control.conditional#b5ac97
entity.name.type.class#b5ac97italic
variable.parameter#b5ac97italic
constant.language.boolean#C0D3B7
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#97a897
keyword.control.export#C0D3B7italic
support.variable.object, support.variable.property#8aac8bitalic
entity.name.tag.yaml#b5ac97italic
comment, punctuation.definition.comment#6d8996italic
variable.other.assignment, variable, string constant.other.placeholder#C2C2C2
constant.other.color#ffffff
invalid, invalid.illegal#B9A7B8
storage.type, storage.modifier, keyword#97a0b5italic
keyword.operator#B9A7B8
keyword.control#B9A7B8bold
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#ceb188italic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#97a897
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#97a897
meta.block, variable.other#C2C2C2
support.other.variable, string.other.link#97a897
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#C0D3B7
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#b5ac97
support.class.builtin, entity.name.type#b5ac97
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#8aac8b
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#b5ac97
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#8aac8b
support.class.component.html#97a0b5italic
entity.other.attribute-name#b5ac97italic
entity.other.attribute-name.class#fff0a6
source.sass keyword.control#74dff5
markup.inserted#C3E88D
markup.deleted#f8bbd0
markup.changed#97a897
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
constant.other.object.key.js string.unquoted.label.js#f8bbd0italic
source.json meta.structure.dictionary.json support.type.property-name.json#B9A7B8
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#97a897
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#9ec49f
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#6A595A
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#ceb188
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#6A595A
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#97a897
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#97a897
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#9ec49f
text.html.markdown, punctuation.definition.list_item.markdown#C2C2C2
text.html.markdown markup.inline.raw.markdown#97a897
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#97a897italic
markup.bold, markup.bold string#97a897bold
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#97a897bold
markup.underline#8aac8bunderline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#74dff5
string.other.link.description.title.markdown#97a897
constant.other.reference.link.markdown#fff0a6
markup.raw.block#97a897
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#8aac8b
meta.item-access.python#8aac8b
meta.function-call.arguments.python#8aac8b
variable.language.special.self.python#ffccbcitalic
support.type.python#a4eaf8
string.quoted.docstring.multi.python#6d8996italic
entity.name.tag.other.html#ceb188
support.function.builtin#97a897
meta.function-call.generic#fffde7
constant.character.set.regexp#8aac8b
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#97a897
hapsida.securisec by securisec - VS Code Theme