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.activeBackground#00000000
  • activityBar.activeBorder#6741ca
  • activityBar.background#fff
  • activityBar.border#9edca8
  • activityBar.foreground#6741ca
  • activityBar.inactiveForeground#003c02
  • activityBarBadge.background#6741ca
  • activityBarBadge.foreground#fff
  • activityBarTop.activeBorder#6741ca
  • activityBarTop.background#fff
  • activityBarTop.dropBorder#6741ca
  • activityBarTop.foreground#6741ca
  • activityBarTop.inactiveForeground#003c02
  • badge.background#6741ca
  • badge.foreground#fff
  • breadcrumb.background#fff
  • button.background#6741ca
  • button.border#6741ca
  • button.foreground#fff
  • button.hoverBackground#6741cacc
  • button.secondaryBackground#fff
  • button.secondaryForeground#6741ca
  • button.secondaryHoverBackground#fffc
  • button.separator#ffffff4d
  • commandCenter.activeBackground#daf3dd
  • commandCenter.activeBorder#9edca8
  • commandCenter.background#daf3dd
  • commandCenter.border#9edca8
  • commandCenter.foreground#003c02
  • commandCenter.inactiveBorder#9edca8
  • commandCenter.inactiveForeground#003c02
  • debugToolBar.background#daf3dd
  • descriptionForeground#005b10
  • diffEditor.border#9edca8
  • diffEditor.diagonalFill#1616161a
  • diffEditor.insertedLineBackground#9cd3ff40
  • diffEditor.insertedTextBackground#9cd3ff40
  • diffEditor.removedLineBackground#ff769440
  • diffEditor.removedTextBackground#ff769440
  • diffEditorGutter.insertedLineBackground#9cd3ff40
  • diffEditorGutter.removedLineBackground#ff769440
  • diffEditorOverview.insertedForeground#70f
  • diffEditorOverview.removedForeground#d2004f
  • disabledForeground#003c024d
  • dropdown.background#fff
  • dropdown.border#00882b
  • dropdown.foreground#003c02
  • dropdown.listBackground#fff
  • editor.background#fff
  • editor.findMatchBackground#ff9a8880
  • editor.findMatchHighlightBackground#ff9a8880
  • editor.findRangeHighlightBackground#dabe0080
  • editor.foldBackground#00000000
  • editor.foreground#161616
  • editor.inactiveSelectionBackground#6fdb554d
  • editor.lineHighlightBackground#6741ca0d
  • editor.rangeHighlightBackground#dabe0040
  • editor.selectionBackground#6fdb554d
  • editor.wordHighlightBackground#6fdb5580
  • editor.wordHighlightStrongBackground#ff88e380
  • editorBracketHighlight.foreground1#007a28
  • editorBracketHighlight.foreground2#0064b9
  • editorBracketHighlight.foreground3#9b357f
  • editorBracketHighlight.foreground4#007a28
  • editorBracketHighlight.foreground5#0064b9
  • editorBracketHighlight.foreground6#9b357f
  • editorBracketHighlight.unexpectedBracket.foreground#bb005e
  • editorBracketMatch.background#ff88e380
  • editorBracketMatch.border#00000000
  • editorCursor.foreground#b0008c
  • editorGroup.border#9edca8
  • editorGroup.dropBackground#6fdb554d
  • editorGroupHeader.border#9edca8
  • editorGroupHeader.noTabsBackground#fff
  • editorGroupHeader.tabsBackground#fff
  • editorGroupHeader.tabsBorder#9edca8
  • editorGutter.addedBackground#70f
  • editorGutter.deletedBackground#d2004f
  • editorGutter.modifiedBackground#c3009b
  • editorHoverWidget.background#fff7db
  • editorHoverWidget.border#8c7e65
  • editorIndentGuide.activeBackground1#003c0280
  • editorIndentGuide.background1#003c021a
  • editorLightBulb.foreground#ff9a88
  • editorLightBulbAutoFix.foreground#dabe00
  • editorLineNumber.activeForeground#003c02
  • editorLineNumber.foreground#00882b
  • editorLink.activeForeground#0009fb
  • editorOverviewRuler.border#9edca840
  • editorRuler.foreground#9edca880
  • editorStickyScroll.border#9edca8
  • editorSuggestWidget.background#fff7db
  • editorSuggestWidget.border#8c7e65
  • editorWidget.background#fff
  • editorWidget.border#00882b
  • editorWidget.foreground#003c02
  • editorWidget.resizeBorder#fff
  • errorForeground#d2004f
  • focusBorder#6741ca
  • foreground#003c02
  • gitDecoration.conflictingResourceForeground#00718f
  • gitDecoration.deletedResourceForeground#d2004f
  • gitDecoration.ignoredResourceForeground#003c024d
  • gitDecoration.modifiedResourceForeground#70f
  • gitDecoration.untrackedResourceForeground#c3009b
  • icon.foreground#003c02
  • input.background#fff
  • input.border#00882b
  • input.placeholderForeground#00882b
  • inputOption.activeBorder#003c02
  • keybindingLabel.background#00000000
  • keybindingLabel.border#9edca8
  • keybindingLabel.bottomBorder#9edca8
  • keybindingLabel.foreground#003c02
  • list.activeSelectionBackground#6741ca
  • list.activeSelectionForeground#fff
  • list.activeSelectionIconForeground#fff
  • list.dropBackground#6fdb554d
  • list.errorForeground#d2004f
  • list.focusForeground#003c02
  • list.focusHighlightForeground#fff
  • list.highlightForeground#6741ca
  • list.hoverBackground#9edca81a
  • list.inactiveSelectionBackground#9edca826
  • list.inactiveSelectionForeground#003c02
  • list.inactiveSelectionIconForeground#003c02
  • list.warningForeground#845b00
  • menu.background#fff
  • menu.border#9edca8
  • menu.foreground#003c02
  • menu.separatorBackground#9edca8
  • merge.currentContentBackground#9cd3ff40
  • merge.currentHeaderBackground#9cd3ffa6
  • merge.incomingContentBackground#ff769440
  • merge.incomingHeaderBackground#ff7694a6
  • notificationCenterHeader.background#fff
  • notificationCenterHeader.foreground#003c02
  • notificationLink.foreground#0009fb
  • notifications.background#fff
  • notifications.foreground#003c02
  • notificationToast.border#00882b
  • panel.background#fff
  • panel.border#9edca8
  • panelSection.border#9edca8
  • panelSectionHeader.border#9edca8
  • panelTitle.activeBorder#6741ca
  • panelTitle.activeForeground#6741ca
  • panelTitle.inactiveForeground#003c02
  • peekView.border#8c7e65
  • peekViewEditor.background#fff7db
  • peekViewResult.background#fff7db
  • peekViewResult.fileForeground#003c02
  • peekViewResult.lineForeground#003c02
  • peekViewTitle.background#fff7db
  • peekViewTitleDescription.foreground#003c02
  • peekViewTitleLabel.foreground#003c02
  • pickerGroup.border#9edca8
  • progressBar.background#003c02
  • quickInput.background#fff
  • quickInputList.focusBackground#6741ca
  • quickInputList.focusForeground#fff
  • quickInputList.focusIconForeground#fff
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#9edca899
  • scrollbarSlider.background#9edca866
  • scrollbarSlider.hoverBackground#9edca880
  • settings.checkboxBackground#fff
  • settings.dropdownBackground#fff
  • settings.headerForeground#003c02
  • settings.modifiedItemIndicator#6741ca
  • settings.numberInputBackground#fff
  • settings.rowHoverBackground#daf3dd40
  • settings.textInputBackground#fff
  • sideBar.background#fff
  • sideBar.border#9edca8
  • sideBar.dropBackground#6fdb554d
  • sideBarSectionHeader.background#fff
  • sideBarSectionHeader.border#9edca8
  • statusBar.background#daf3dd
  • statusBar.border#9edca8
  • statusBar.debuggingBackground#daf3dd
  • statusBar.foreground#003c02
  • statusBar.noFolderBackground#daf3dd
  • statusBarItem.errorBackground#bb005e
  • statusBarItem.errorForeground#fff
  • statusBarItem.errorHoverBackground#bb005e
  • statusBarItem.errorHoverForeground#fff
  • statusBarItem.remoteBackground#daf3dd
  • statusBarItem.remoteForeground#003c02
  • tab.activeBackground#6741ca1a
  • tab.activeBorder#6741ca
  • tab.activeBorderTop#00000000
  • tab.activeForeground#6741ca
  • tab.border#fff
  • tab.inactiveBackground#fff
  • tab.inactiveForeground#003c02
  • tab.unfocusedActiveBorder#6741ca
  • tab.unfocusedActiveBorderTop#00000000
  • terminal.ansiBlack#2e2e2e
  • terminal.ansiBlue#70f
  • terminal.ansiBrightBlack#2e2e2e
  • terminal.ansiBrightBlue#70f
  • terminal.ansiBrightCyan#00718f
  • terminal.ansiBrightGreen#007c1f
  • terminal.ansiBrightMagenta#c3009b
  • terminal.ansiBrightRed#d2004f
  • terminal.ansiBrightWhite#fff
  • terminal.ansiBrightYellow#845b00
  • terminal.ansiCyan#00718f
  • terminal.ansiGreen#007c1f
  • terminal.ansiMagenta#c3009b
  • terminal.ansiRed#d2004f
  • terminal.ansiWhite#fff
  • terminal.ansiYellow#845b00
  • terminal.background#fff
  • terminal.foreground#161616
  • terminal.tab.activeBorder#6741ca
  • textBlockQuote.background#00000000
  • textBlockQuote.border#161616
  • textLink.activeForeground#0009fb
  • textLink.foreground#0009fb
  • textPreformat.foreground#008323
  • titleBar.activeBackground#daf3dd
  • titleBar.activeForeground#003c02
  • titleBar.border#9edca8
  • titleBar.inactiveBackground#daf3dd
  • titleBar.inactiveForeground#003c02
  • toolbar.activeBackground#9edca84d
  • toolbar.hoverBackground#9edca833
  • tree.indentGuidesStroke#003c0240
  • widget.border#9edca8
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#161616
emphasisitalic
strongbold
header#ba0094bold
comment, punctuation.definition.comment#696969italic
constant.language#008323bold
constant.regexp#008323
entity.name.tag support.class.component, entity.name.tag#0069ccbold
entity.name.tag.css#161616
entity.other.attribute-name#b80093
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#b80093
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#0069ccbold
invalid#bb005e
markup.underline#0009fbunderline
markup.bold#ba0094bold
markup.heading#ba0094bold
markup.italic#ba0094italic
markup.strikethroughstrikethrough
markup.inserted#70f
markup.deleted#d2004f
markup.changed#845b00
punctuation.definition.quote.begin.markdown#a34a3d
punctuation.definition.list.begin.markdown#a34a3d
markup.inline.raw#008323
punctuation.definition.tag#a34a3d
meta.preprocessor, entity.name.function.preprocessor#0069cc
meta.preprocessor.string#008323
constant.numeric, meta.preprocessor.numeric, entity.other.keyframe-offset.percentage.css#008323
meta.structure.dictionary.key.python#ba0094bold
source.diff#a34a3d
meta.diff.header#fff
storage#161616
source.java storage.type, source.go storage.type#0069ccbold
storage.type#ba0094bold
storage.modifier, keyword.operator.noexcept#ba0094bold
string, meta.embedded.assembly, constant.other.symbol#008323
string.tag#ba0094bold
string.value#008323
string.regexp#008323
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#a34a3d
meta.template.expression, meta.interpolation#161616
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#7038e5
keyword#ba0094bold
keyword.control#ba0094bold
keyword.operator.type.annotation#a34a3d
keyword.operator#a34a3d
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#ba0094bold
keyword.other.unit#008323bold
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#a34a3d
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#161616
variable.language#008323bold
meta.attribute, variable.other.property, variable.other.object.property#7038e5
entity.name.function, meta.function-call.generic, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#0069cc
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class#0069ccbold
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#0069ccbold
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#ba0094bold
variable, meta.definition.variable.name, support.variable, entity.name.variable#161616
variable.parameter#7038e5
meta.object-literal.key, variable.object.property, source.json support.type.property-name#b80093
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#008323bold
constant.other.placeholder#ba0094bold
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#7038e5
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#7038e5
keyword.operator.or.regexp, keyword.control.anchor.regexp#7038e5
keyword.operator.quantifier.regexp#7038e5
constant.character, constant.other.option#7038e5
constant.character.escape#7038e5
entity.name.label#161616
punctuation, meta.brace#a34a3d