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#383a49
  • activityBar.activeBorder#0000
  • activityBar.background#14141a
  • activityBar.border#3a3a3e
  • activityBar.foreground#bbbbbb
  • activityBar.inactiveForeground#bbbbbb99
  • activityBarBadge.background#e2e2e2
  • activityBarBadge.foreground#18181b
  • badge.background#e2e2e2
  • badge.foreground#18181b
  • button.background#e2e2e2
  • button.border#43434a
  • button.foreground#18181b
  • button.secondaryBackground#23232c
  • button.secondaryForeground#bbbbbb
  • chat.slashCommandBackground#34414b
  • chat.slashCommandForeground#40a6ff
  • checkbox.background#1f1f26
  • checkbox.border#3a3a3e
  • commandCenter.background#303038
  • commandCenter.border#43434a
  • debugToolBar.background#14141a
  • descriptionForeground#9d9d9d
  • diffEditor.insertedLineBackground#9bb95533
  • diffEditor.insertedTextBackground#9ccc2c26
  • diffEditor.removedLineBackground#ff000033
  • diffEditor.removedTextBackground#ff000033
  • diffEditor.unchangedRegionBackground#14141a
  • diffEditor.unchangedRegionShadow#0000
  • dropdown.background#1f1f26
  • dropdown.border#3a3a3e
  • dropdown.foreground#bbbbbb
  • dropdown.listBackground#14141a
  • editor.background#1a1a1f
  • editor.findMatchBackground#efbb6e4d
  • editor.findMatchHighlightBackground#efbb6e33
  • editor.findRangeHighlightBackground#efbb6e1a
  • editor.foreground#cccecb
  • editor.inactiveSelectionBackground#9f98ee20
  • editor.lineHighlightBackground#e2e2e20d
  • editor.selectionBackground#9f98ee33
  • editor.selectionHighlightBackground#9f98ee18
  • editor.wordHighlightBackground#9fbdf020
  • editor.wordHighlightStrongBackground#63d98a20
  • editor.wordHighlightTextBackground#9f98ee14
  • editorBracketHighlight.foreground1#8fa8ff
  • editorBracketHighlight.foreground2#62d9ae
  • editorBracketHighlight.foreground3#b89fff
  • editorBracketHighlight.foreground4#ff93cb
  • editorBracketHighlight.foreground5#e8b96f
  • editorBracketHighlight.foreground6#74bedc
  • editorBracketHighlight.unexpectedBracket.foreground#ff6161
  • editorBracketMatch.background#9fbdf040
  • editorBracketMatch.border#0000
  • editorCursor.foreground#cccecb
  • editorError.foreground#f06b6b
  • editorGhostText.background#0000
  • editorGhostText.border#0000
  • editorGhostText.foreground#767c9099
  • editorGroup.border#3a3a3e
  • editorGroupHeader.tabsBackground#14141a
  • editorGroupHeader.tabsBorder#3a3a3e
  • editorGutter.addedBackground#8fcf6a
  • editorGutter.addedSecondaryBackground#8fcf6a59
  • editorGutter.deletedBackground#dd6a50
  • editorGutter.deletedSecondaryBackground#dd6a5059
  • editorGutter.modifiedBackground#ffd07a
  • editorGutter.modifiedSecondaryBackground#ffd07a59
  • editorIndentGuide.activeBackground1#767c90b3
  • editorIndentGuide.background1#767c904d
  • editorInfo.foreground#5a8ff0
  • editorLineNumber.activeForeground#bbbbbb
  • editorLineNumber.foreground#767c9099
  • editorLink.activeForeground#cfa8f8
  • editorOverviewRuler.border#3a3a3e
  • editorRuler.foreground#3a3a3e80
  • editorSuggestWidget.background#14141a
  • editorSuggestWidget.focusHighlightForeground#18181b
  • editorSuggestWidget.selectedBackground#e2e2e2
  • editorSuggestWidget.selectedForeground#18181b
  • editorSuggestWidget.selectedIconForeground#18181b
  • editorWarning.foreground#e3ad3b
  • editorWhitespace.foreground#cccecb2e
  • editorWidget.background#14141a
  • editorWidget.border#3a3a3e
  • errorForeground#f85149
  • focusBorder#e2e2e299
  • foreground#bbbbbb
  • git.blame.editorDecorationForeground#9aa0b3
  • gitDecoration.addedResourceForeground#8fcf6a
  • gitDecoration.deletedResourceForeground#dd6a50
  • gitDecoration.ignoredResourceForeground#787885
  • gitDecoration.modifiedResourceForeground#ffd07a
  • gitDecoration.untrackedResourceForeground#73c991
  • icon.foreground#bbbbbb
  • input.background#1f1f26
  • input.border#3a3a3e
  • input.foreground#bbbbbb
  • input.placeholderForeground#bbbbbb99
  • inputOption.activeBackground#e2e2e233
  • inputOption.activeBorder#e2e2e24d
  • keybindingLabel.foreground#bbbbbb
  • list.activeSelectionBackground#e2e2e21a
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#cccecb
  • list.dropBackground#e2e2e21a
  • list.errorForeground#f88070
  • list.focusHighlightForeground#18181b
  • list.highlightForeground#e2e2e2
  • list.hoverBackground#e2e2e21a
  • list.inactiveSelectionBackground#e2e2e20d
  • list.warningForeground#e3ad3b
  • menu.background#14141a
  • menu.border#3a3a3e
  • menu.foreground#bbbbbb
  • menu.selectionBackground#e2e2e2
  • menu.selectionForeground#18181b
  • menu.separatorBackground#3a3a3e99
  • multiDiffEditor.headerBackground#14141a
  • notificationCenterHeader.background#14141a
  • notificationCenterHeader.foreground#bbbbbb
  • notifications.background#14141a
  • notifications.border#3a3a3e
  • notifications.foreground#bbbbbb
  • panel.background#1a1a1f
  • panel.border#3a3a3e
  • panelInput.border#3a3a3e
  • panelTitle.activeBorder#e2e2e2
  • panelTitle.activeForeground#bbbbbb
  • panelTitle.inactiveForeground#bbbbbb99
  • peekView.border#43434a
  • peekViewEditor.background#1a1a1f
  • peekViewEditor.matchHighlightBackground#9f98ee33
  • peekViewResult.background#1a1a1f
  • peekViewResult.matchHighlightBackground#9f98ee4d
  • peekViewResult.selectionBackground#9f98ee1a
  • peekViewTitle.background#14141a
  • pickerGroup.border#3a3a3e
  • pickerGroup.foreground#9fbdf0
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#e2e2e2
  • quickInput.background#14141a
  • quickInput.foreground#bbbbbb
  • quickInputList.focusBackground#e2e2e2
  • quickInputList.focusForeground#18181b
  • quickInputList.focusIconForeground#18181b
  • scmGraph.foreground1#9fbdf0
  • scmGraph.foreground2#ff9edc
  • scmGraph.foreground3#eddc8b
  • scmGraph.foreground4#bce87c
  • scmGraph.foreground5#e16975
  • scmGraph.historyItemBaseRefColor#63d98a
  • scmGraph.historyItemHoverDefaultLabelBackground#6c7176
  • scmGraph.historyItemHoverDefaultLabelForeground#18181b
  • scmGraph.historyItemHoverLabelForeground#18181b
  • scmGraph.historyItemRefColor#9f98ee
  • scmGraph.historyItemRemoteRefColor#93e9d0
  • scrollbar.shadow#0000
  • selection.background#9f98ee80
  • settings.dropdownBackground#1f1f26
  • settings.dropdownBorder#3a3a3e
  • settings.headerForeground#cccecb
  • settings.modifiedItemIndicator#efbb6e
  • sideBar.background#14141a
  • sideBar.border#3a3a3e
  • sideBar.foreground#bbbbbb
  • sideBarSectionHeader.background#14141a
  • sideBarSectionHeader.border#3a3a3e
  • sideBarSectionHeader.foreground#bbbbbb
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#23232c
  • statusBar.border#43434a
  • statusBar.debuggingBackground#23232c
  • statusBar.debuggingForeground#bbbbbb
  • statusBar.focusBorder#e2e2e299
  • statusBar.foreground#bbbbbb
  • statusBar.noFolderBackground#23232c
  • statusBarItem.compactHoverBackground#e2e2e226
  • statusBarItem.focusBorder#e2e2e299
  • statusBarItem.hoverBackground#e2e2e21a
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#0000
  • statusBarItem.remoteForeground#bbbbbb
  • symbolIcon.arrayForeground#767c90cc
  • symbolIcon.booleanForeground#9f98eecc
  • symbolIcon.classForeground#63d98acc
  • symbolIcon.colorForeground#bce87ccc
  • symbolIcon.constantForeground#9f98eecc
  • symbolIcon.constructorForeground#93e9d0cc
  • symbolIcon.enumeratorForeground#cfa8f8cc
  • symbolIcon.enumeratorMemberForeground#cfa8f8cc
  • symbolIcon.eventForeground#eddc8bcc
  • symbolIcon.fieldForeground#9fbdf0cc
  • symbolIcon.fileForeground#767c90cc
  • symbolIcon.folderForeground#767c90cc
  • symbolIcon.functionForeground#eddc8bcc
  • symbolIcon.interfaceForeground#63d98acc
  • symbolIcon.keyForeground#9fbdf0cc
  • symbolIcon.keywordForeground#9fbdf0cc
  • symbolIcon.methodForeground#eddc8bcc
  • symbolIcon.moduleForeground#9f98eecc
  • symbolIcon.namespaceForeground#93e9d0cc
  • symbolIcon.nullForeground#767c90cc
  • symbolIcon.numberForeground#9f98eecc
  • symbolIcon.objectForeground#767c90cc
  • symbolIcon.operatorForeground#93e9d0cc
  • symbolIcon.packageForeground#767c90cc
  • symbolIcon.propertyForeground#9fbdf0cc
  • symbolIcon.referenceForeground#9fbdf0cc
  • symbolIcon.snippetForeground#efbb6ecc
  • symbolIcon.stringForeground#bce87ccc
  • symbolIcon.structForeground#eddc8bcc
  • symbolIcon.textForeground#ff9edccc
  • symbolIcon.typeParameterForeground#63d98acc
  • symbolIcon.unitForeground#93e9d0cc
  • symbolIcon.variableForeground#9fbdf0cc
  • tab.activeBackground#1a1a1f
  • tab.activeBorder#1a1a1f
  • tab.activeBorderTop#0000
  • tab.activeForeground#cccecb
  • tab.border#3a3a3e
  • tab.hoverBackground#1a1a1fb3
  • tab.inactiveBackground#14141a
  • tab.inactiveForeground#cccecb99
  • tab.lastPinnedBorder#3a3a3e
  • tab.selectedBackground#222222
  • tab.selectedBorderTop#6caddf
  • tab.selectedForeground#ffffffa0
  • tab.unfocusedActiveBorder#1a1a1f
  • tab.unfocusedActiveBorderTop#0000
  • tab.unfocusedHoverBackground#1a1a1fb3
  • terminal.ansiBlack#767c90
  • terminal.ansiBlue#9fbdf0
  • terminal.ansiBrightBlack#858ba3
  • terminal.ansiBrightBlue#9fbdf0
  • terminal.ansiBrightCyan#93e9d0
  • terminal.ansiBrightGreen#bce87c
  • terminal.ansiBrightMagenta#9f98ee
  • terminal.ansiBrightRed#e16975
  • terminal.ansiBrightWhite#cccecb
  • terminal.ansiBrightYellow#eddc8b
  • terminal.ansiCyan#93e9d0
  • terminal.ansiGreen#bce87c
  • terminal.ansiMagenta#9f98ee
  • terminal.ansiRed#e16975
  • terminal.ansiWhite#cccecb
  • terminal.ansiYellow#eddc8b
  • terminal.foreground#bbbbbb
  • terminal.inactiveSelectionBackground#3a3d41
  • terminal.tab.activeBorder#e2e2e2
  • textBlockQuote.background#3a3a3e
  • textBlockQuote.border#616161
  • textCodeBlock.background#3a3a3e
  • textLink.activeForeground#ff9edc
  • textLink.foreground#ff9edc
  • textPreformat.background#3c3c3c
  • textPreformat.foreground#d0d0d0
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#23232c
  • titleBar.activeForeground#bbbbbb
  • titleBar.border#43434a
  • titleBar.inactiveBackground#23232c
  • titleBar.inactiveForeground#bbbbbb99
  • welcomePage.progress.foreground#e2e2e2
  • welcomePage.tileBackground#3a3a3e
  • widget.border#3a3a3e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#D4D4D4
strongbold
header#000080
comment#858ba3
storage.type.class, storage.type.class.jsdoc, entity.name.type.instance.jsdoc, variable.other.jsdoc
constant.language#9f98ee
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#9f98ee
constant.regexp#646695
entity.name.tag#e16975
entity.name.tag.css, entity.name.tag.less#efbb6e
entity.other.attribute-name#efbb6e
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#efbb6e
invalid#f25c5c
markup.underlineunderline
markup.bold#93e9d0bold
markup.heading#93e9d0bold
markup.strikethroughstrikethrough
markup.inserted#93e9d0
markup.deleted#bce87c
markup.changed#93e9d0
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796E6
markup.inline.raw#bce87c
meta.preprocessor, entity.name.function.preprocessor#93e9d0
meta.preprocessor.string#bce87c
meta.preprocessor.numeric#93e9d0
meta.structure.dictionary.key.python#9fbdf0
meta.diff.header#93e9d0
storage#e16975
storage.type#93e9d0
storage.modifier, keyword.operator.noexcept#93e9d0
string, meta.embedded.assembly#bce87c
string.tag#bce87c
string.value#bce87c
string.regexp#e16975
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#93e9d0
meta.template.expression#D4D4D4
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#9fbdf0
keyword#93e9d0
keyword.control#93e9d0
keyword.operator#D4D4D4
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#93e9d0
keyword.other.unit#93e9d0
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#93e9d0
support.function.git-rebase#9fbdf0
constant.sha.git-rebase#93e9d0
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#D4D4D4
variable.language#93e9d0
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#eddc8b
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#63d98a
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#63d98a
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#ff9edc
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#9fbdf0
variable.other.constant, variable.other.enummember#9f98ee
meta.object-literal.key#9fbdf0
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#bce87c
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#bce87c
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#e16975
keyword.operator.or.regexp, keyword.control.anchor.regexp#63d98a
keyword.operator.quantifier.regexp#efbb6e
constant.character, constant.other.option#9f98ee
constant.character.escape#efbb6e
entity.name.label#C8C8C8
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#f25c5c
token.debug-token#B267E6