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.

  • actionBar.toggledBackground#dddddd
  • activityBar.activeBorder#0000
  • activityBar.background#f2f2f4
  • activityBar.border#c8c8cc
  • activityBar.foreground#363636
  • activityBar.inactiveForeground#36363699
  • activityBarBadge.background#1a1a1e
  • activityBarBadge.foreground#ffffff
  • badge.background#1a1a1e
  • badge.foreground#ffffff
  • button.background#1a1a1e
  • button.border#c8c8cc
  • button.foreground#ffffff
  • button.secondaryBackground#e9e9ec
  • button.secondaryForeground#363636
  • chat.slashCommandBackground#d2ecff
  • chat.slashCommandForeground#306ca2
  • checkbox.background#e3e3e7
  • checkbox.border#c8c8cc
  • commandCenter.background#dadbe1
  • commandCenter.border#c8c8cc
  • debugToolBar.background#f2f2f4
  • descriptionForeground#3b3b3b
  • diffEditor.insertedLineBackground#9bb95533
  • diffEditor.insertedTextBackground#9ccc2c40
  • diffEditor.removedLineBackground#ff000033
  • diffEditor.removedTextBackground#ff000033
  • diffEditor.unchangedRegionBackground#f2f2f4
  • diffEditor.unchangedRegionShadow#0000
  • dropdown.background#e3e3e7
  • dropdown.border#c8c8cc
  • dropdown.foreground#363636
  • dropdown.listBackground#f2f2f4
  • editor.background#fcfcfc
  • editor.findMatchBackground#b8860b4d
  • editor.findMatchHighlightBackground#b8860b33
  • editor.findRangeHighlightBackground#b8860b1a
  • editor.foreground#383840
  • editor.inactiveSelectionBackground#5a4eca20
  • editor.lineHighlightBackground#1a1a1e0d
  • editor.selectionBackground#5a4eca33
  • editor.selectionHighlightBackground#5a4eca18
  • editor.wordHighlightBackground#2648a820
  • editor.wordHighlightStrongBackground#00804020
  • editor.wordHighlightTextBackground#5a4eca14
  • editorBracketHighlight.foreground1#3a5bc7
  • editorBracketHighlight.foreground2#2f8f6b
  • editorBracketHighlight.foreground3#7b5bd6
  • editorBracketHighlight.foreground4#c05a9a
  • editorBracketHighlight.foreground5#b37a3c
  • editorBracketHighlight.foreground6#4a7a99
  • editorBracketHighlight.unexpectedBracket.foreground#d03434
  • editorBracketMatch.background#2648a840
  • editorBracketMatch.border#0000
  • editorCursor.foreground#383840
  • editorError.foreground#c12a2a
  • editorGhostText.background#0000
  • editorGhostText.border#0000
  • editorGhostText.foreground#70758a99
  • editorGroup.border#c8c8cc
  • editorGroupHeader.tabsBackground#f2f2f4
  • editorGroupHeader.tabsBorder#c8c8cc
  • editorGutter.addedBackground#349f55
  • editorGutter.addedSecondaryBackground#349f5573
  • editorGutter.deletedBackground#b43c3c
  • editorGutter.deletedSecondaryBackground#b43c3c73
  • editorGutter.modifiedBackground#c07a4a
  • editorGutter.modifiedSecondaryBackground#c07a4a73
  • editorIndentGuide.activeBackground1#70758ab3
  • editorIndentGuide.background1#70758a4d
  • editorInfo.foreground#2f62c8
  • editorLineNumber.activeForeground#363636
  • editorLineNumber.foreground#70758a99
  • editorLink.activeForeground#9b6cff
  • editorOverviewRuler.border#c8c8cc
  • editorRuler.foreground#c8c8cc80
  • editorSuggestWidget.background#f2f2f4
  • editorSuggestWidget.focusHighlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#1a1a1e
  • editorSuggestWidget.selectedForeground#ffffff
  • editorSuggestWidget.selectedIconForeground#ffffff
  • editorWarning.foreground#9f5f2e
  • editorWhitespace.foreground#38384033
  • editorWidget.background#f2f2f4
  • editorWidget.border#c8c8cc
  • errorForeground#f85149
  • focusBorder#1a1a1e99
  • foreground#363636
  • git.blame.editorDecorationForeground#9ea3b5
  • gitDecoration.addedResourceForeground#349f55
  • gitDecoration.deletedResourceForeground#b43c3c
  • gitDecoration.ignoredResourceForeground#8f8f96
  • gitDecoration.modifiedResourceForeground#c07a4a
  • gitDecoration.untrackedResourceForeground#007100
  • icon.foreground#363636
  • input.background#e3e3e7
  • input.border#c8c8cc
  • input.foreground#363636
  • input.placeholderForeground#36363699
  • inputOption.activeBackground#1a1a1e33
  • inputOption.activeBorder#1a1a1e4d
  • keybindingLabel.foreground#363636
  • list.activeSelectionBackground#1a1a1e1a
  • list.activeSelectionForeground#000000
  • list.activeSelectionIconForeground#383840
  • list.dropBackground#1a1a1e1a
  • list.errorForeground#b01011
  • list.focusHighlightForeground#ffffff
  • list.highlightForeground#1a1a1e
  • list.hoverBackground#1a1a1e1a
  • list.inactiveSelectionBackground#1a1a1e0d
  • list.warningForeground#9f5f2e
  • menu.background#f2f2f4
  • menu.border#c8c8cc
  • menu.foreground#363636
  • menu.selectionBackground#1a1a1e
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#c8c8cc99
  • multiDiffEditor.headerBackground#f2f2f4
  • notificationCenterHeader.background#f2f2f4
  • notificationCenterHeader.foreground#363636
  • notifications.background#f2f2f4
  • notifications.border#c8c8cc
  • notifications.foreground#363636
  • panel.background#fcfcfc
  • panel.border#c8c8cc
  • panelInput.border#c8c8cc
  • panelTitle.activeBorder#1a1a1e
  • panelTitle.activeForeground#363636
  • panelTitle.inactiveForeground#36363699
  • peekView.border#c8c8cc
  • peekViewEditor.background#fcfcfc
  • peekViewEditor.matchHighlightBackground#5a4eca33
  • peekViewResult.background#fcfcfc
  • peekViewResult.matchHighlightBackground#5a4eca4d
  • peekViewResult.selectionBackground#5a4eca1a
  • peekViewTitle.background#f2f2f4
  • pickerGroup.border#c8c8cc
  • pickerGroup.foreground#2648a8
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#1a1a1e
  • quickInput.background#f2f2f4
  • quickInput.foreground#363636
  • quickInputList.focusBackground#1a1a1e
  • quickInputList.focusForeground#ffffff
  • quickInputList.focusIconForeground#ffffff
  • scmGraph.foreground1#2648a8
  • scmGraph.foreground2#d040a0
  • scmGraph.foreground3#a05c22
  • scmGraph.foreground4#407a0f
  • scmGraph.foreground5#b72840
  • scmGraph.historyItemBaseRefColor#008040
  • scmGraph.historyItemHoverDefaultLabelBackground#a8a8a8
  • scmGraph.historyItemHoverDefaultLabelForeground#ffffff
  • scmGraph.historyItemHoverLabelForeground#ffffff
  • scmGraph.historyItemRefColor#5a4eca
  • scmGraph.historyItemRemoteRefColor#146a89
  • scrollbar.shadow#0000
  • selection.background#5a4eca80
  • settings.dropdownBackground#e3e3e7
  • settings.dropdownBorder#c8c8cc
  • settings.headerForeground#383840
  • settings.modifiedItemIndicator#b8860b
  • sideBar.background#f2f2f4
  • sideBar.border#c8c8cc
  • sideBar.foreground#363636
  • sideBarSectionHeader.background#f2f2f4
  • sideBarSectionHeader.border#c8c8cc
  • sideBarSectionHeader.foreground#363636
  • sideBarTitle.foreground#363636
  • statusBar.background#e9e9ec
  • statusBar.border#c8c8cc
  • statusBar.debuggingBackground#e9e9ec
  • statusBar.debuggingForeground#363636
  • statusBar.focusBorder#1a1a1e99
  • statusBar.foreground#363636
  • statusBar.noFolderBackground#e9e9ec
  • statusBarItem.compactHoverBackground#1a1a1e26
  • statusBarItem.focusBorder#1a1a1e99
  • statusBarItem.hoverBackground#1a1a1e1a
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#0000
  • statusBarItem.remoteForeground#363636
  • symbolIcon.arrayForeground#70758acc
  • symbolIcon.booleanForeground#5a4ecacc
  • symbolIcon.classForeground#008040cc
  • symbolIcon.colorForeground#407a0fcc
  • symbolIcon.constantForeground#5a4ecacc
  • symbolIcon.constructorForeground#146a89cc
  • symbolIcon.enumeratorForeground#9b6cffcc
  • symbolIcon.enumeratorMemberForeground#9b6cffcc
  • symbolIcon.eventForeground#a05c22cc
  • symbolIcon.fieldForeground#2648a8cc
  • symbolIcon.fileForeground#70758acc
  • symbolIcon.folderForeground#70758acc
  • symbolIcon.functionForeground#a05c22cc
  • symbolIcon.interfaceForeground#008040cc
  • symbolIcon.keyForeground#2648a8cc
  • symbolIcon.keywordForeground#2648a8cc
  • symbolIcon.methodForeground#a05c22cc
  • symbolIcon.moduleForeground#5a4ecacc
  • symbolIcon.namespaceForeground#146a89cc
  • symbolIcon.nullForeground#70758acc
  • symbolIcon.numberForeground#5a4ecacc
  • symbolIcon.objectForeground#70758acc
  • symbolIcon.operatorForeground#146a89cc
  • symbolIcon.packageForeground#70758acc
  • symbolIcon.propertyForeground#2648a8cc
  • symbolIcon.referenceForeground#2648a8cc
  • symbolIcon.snippetForeground#b8860bcc
  • symbolIcon.stringForeground#407a0fcc
  • symbolIcon.structForeground#a05c22cc
  • symbolIcon.textForeground#d040a0cc
  • symbolIcon.typeParameterForeground#008040cc
  • symbolIcon.unitForeground#146a89cc
  • symbolIcon.variableForeground#2648a8cc
  • tab.activeBackground#fcfcfc
  • tab.activeBorder#fcfcfc
  • tab.activeBorderTop#0000
  • tab.activeForeground#383840
  • tab.border#c8c8cc
  • tab.hoverBackground#fcfcfcb3
  • tab.inactiveBackground#f2f2f4
  • tab.inactiveForeground#38384099
  • tab.lastPinnedBorder#c8c8cc
  • tab.selectedBackground#ffffffa5
  • tab.selectedBorderTop#68a3da
  • tab.selectedForeground#333333b3
  • tab.unfocusedActiveBorder#fcfcfc
  • tab.unfocusedActiveBorderTop#0000
  • tab.unfocusedHoverBackground#fcfcfcb3
  • terminal.ansiBlack#70758a
  • terminal.ansiBlue#2648a8
  • terminal.ansiBrightBlack#70758a
  • terminal.ansiBrightBlue#2648a8
  • terminal.ansiBrightCyan#146a89
  • terminal.ansiBrightGreen#407a0f
  • terminal.ansiBrightMagenta#5a4eca
  • terminal.ansiBrightRed#b72840
  • terminal.ansiBrightWhite#383840
  • terminal.ansiBrightYellow#a05c22
  • terminal.ansiCyan#146a89
  • terminal.ansiGreen#407a0f
  • terminal.ansiMagenta#5a4eca
  • terminal.ansiRed#b72840
  • terminal.ansiWhite#383840
  • terminal.ansiYellow#a05c22
  • terminal.foreground#363636
  • terminal.inactiveSelectionBackground#e5ebf1
  • terminal.tab.activeBorder#1a1a1e
  • textBlockQuote.background#c8c8cc
  • textBlockQuote.border#e5e5e5
  • textCodeBlock.background#c8c8cc
  • textLink.activeForeground#d040a0
  • textLink.foreground#d040a0
  • textPreformat.background#0000001f
  • textPreformat.foreground#3b3b3b
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#e9e9ec
  • titleBar.activeForeground#363636
  • titleBar.border#c8c8cc
  • titleBar.inactiveBackground#e9e9ec
  • titleBar.inactiveForeground#36363699
  • welcomePage.progress.foreground#1a1a1e
  • welcomePage.tileBackground#c8c8cc
  • widget.border#c8c8cc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#000000
strongbold
header#000080
comment#70758a
storage.type.class, storage.type.class.jsdoc, entity.name.type.instance.jsdoc, variable.other.jsdoc
constant.language#5a4eca
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#5a4eca
constant.regexp#811F3F
entity.name.tag#b72840
entity.name.tag.css, entity.name.tag.less#b8860b
entity.other.attribute-name#b8860b
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#b8860b
invalid#c82020
markup.underlineunderline
markup.bold#146a89bold
markup.heading#146a89bold
markup.strikethroughstrikethrough
markup.inserted#146a89
markup.deleted#407a0f
markup.changed#146a89
punctuation.definition.quote.begin.markdown#0451A5
punctuation.definition.list.begin.markdown#0451A5
markup.inline.raw#407a0f
meta.preprocessor, entity.name.function.preprocessor#146a89
meta.preprocessor.string#407a0f
meta.preprocessor.numeric#146a89
meta.structure.dictionary.key.python#2648a8
meta.diff.header#146a89
storage#b72840
storage.type#146a89
storage.modifier, keyword.operator.noexcept#146a89
string, meta.embedded.assembly#407a0f
string.tag#407a0f
string.value#407a0f
string.regexp#b72840
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#146a89
meta.template.expression#000000
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#2648a8
keyword#146a89
keyword.control#146a89
keyword.operator#000000
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#146a89
keyword.other.unit#146a89
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#146a89
support.function.git-rebase#2648a8
constant.sha.git-rebase#146a89
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#000000
variable.language#146a89
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#a05c22
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#008040
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#008040
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#d040a0
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#2648a8
variable.other.constant, variable.other.enummember#5a4eca
meta.object-literal.key#2648a8
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#407a0f
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#407a0f
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#b72840
keyword.operator.or.regexp, keyword.control.anchor.regexp#008040
keyword.operator.quantifier.regexp#b8860b
constant.character, constant.other.option#5a4eca
constant.character.escape#b8860b
entity.name.label#000000
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#c82020
token.debug-token#800080