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#0078d4
  • activityBar.background#18262FFF
  • activityBar.border#2b2b2b
  • activityBar.foreground#d7d7d7
  • activityBar.inactiveForeground#868686
  • activityBarBadge.background#0078d4
  • activityBarBadge.foreground#ffffff
  • badge.background#616161
  • badge.foreground#f8f8f8
  • button.background#0078d4
  • button.border#ffffff1a
  • button.foreground#ffffff
  • button.hoverBackground#026ec1
  • button.secondaryBackground#00000000
  • button.secondaryForeground#BFC9DB
  • button.secondaryHoverBackground#2b2b2b
  • chat.editedFileForeground#e2c08d
  • chat.slashCommandBackground#26477866
  • chat.slashCommandForeground#85b6ff
  • checkbox.background#313131
  • checkbox.border#3c3c3c
  • debugToolBar.background#18262FFF
  • descriptionForeground#9d9d9d
  • dropdown.background#313131
  • dropdown.border#3c3c3c
  • dropdown.foreground#BFC9DB
  • dropdown.listBackground#15212AFF
  • editor.background#15212AFF
  • editor.findMatchBackground#9e6a03
  • editor.foreground#BFC9DB
  • editor.inactiveSelectionBackground#3a3d41
  • editor.selectionHighlightBackground#add6ff26
  • editorBracketHighlight.foreground1#b8d7f9
  • editorBracketHighlight.foreground2#c6b9ca
  • editorBracketHighlight.foreground3#89cdca
  • editorBracketHighlight.foreground4#d9a68c
  • editorGroup.border#ffffff17
  • editorGroupHeader.tabsBackground#18262FFF
  • editorGroupHeader.tabsBorder#2b2b2b
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#0078d4
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorLineNumber.activeForeground#BFC9DB
  • editorLineNumber.foreground#6e7681
  • editorOverviewRuler.addedForeground#00000000
  • editorOverviewRuler.border#010409
  • editorOverviewRuler.errorForeground#00000000
  • editorOverviewRuler.infoForeground#00000000
  • editorOverviewRuler.modifiedForeground#00000000
  • editorWidget.background#202020
  • errorForeground#f85149
  • focusBorder#0078d4
  • foreground#BFC9DB
  • icon.foreground#BFC9DB
  • input.background#313131
  • input.border#3c3c3c
  • input.foreground#BFC9DB
  • input.placeholderForeground#989898
  • inputOption.activeBackground#2489db82
  • inputOption.activeBorder#2488db
  • keybindingLabel.foreground#BFC9DB
  • list.activeSelectionIconForeground#ffffff
  • list.dropBackground#383b3d
  • menu.background#15212AFF
  • menu.border#454545
  • menu.foreground#BFC9DB
  • menu.selectionBackground#0078d4
  • menu.separatorBackground#454545
  • notificationCenterHeader.background#15212AFF
  • notificationCenterHeader.foreground#BFC9DB
  • notifications.background#15212AFF
  • notifications.border#2b2b2b
  • notifications.foreground#BFC9DB
  • panel.background#18262FFF
  • panel.border#2b2b2b
  • panelInput.border#2b2b2b
  • panelTitle.activeBorder#0078d4
  • panelTitle.activeForeground#BFC9DB
  • panelTitle.inactiveForeground#9d9d9d
  • peekViewEditor.background#15212AFF
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#15212AFF
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#3c3c3c
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#0078d4
  • quickInput.background#222222
  • quickInput.foreground#BFC9DB
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#3c3c3c
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#18262FFF
  • sideBar.border#2b2b2b
  • sideBar.foreground#BFC9DB
  • sideBarSectionHeader.background#18262FFF
  • sideBarSectionHeader.border#2b2b2b
  • sideBarSectionHeader.foreground#BFC9DB
  • sideBarTitle.foreground#BFC9DB
  • statusBar.background#18262FFF
  • statusBar.border#2b2b2b
  • statusBar.debuggingBackground#0078d4
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#0078d4
  • statusBar.foreground#BFC9DB
  • statusBar.noFolderBackground#15212AFF
  • statusBarItem.focusBorder#0078d4
  • statusBarItem.hoverBackground#f1f1f133
  • statusBarItem.hoverForeground#ffffff
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#0078d4
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#15212AFF
  • tab.activeBorder#15212AFF
  • tab.activeBorderTop#0078d4
  • tab.activeForeground#ffffff
  • tab.border#2b2b2b
  • tab.hoverBackground#15212AFF
  • tab.inactiveBackground#18262FFF
  • tab.inactiveForeground#9d9d9d
  • tab.lastPinnedBorder#BFC9DB33
  • tab.selectedBackground#222222
  • tab.selectedBorderTop#6caddf
  • tab.selectedForeground#ffffffa0
  • tab.unfocusedActiveBorder#15212AFF
  • tab.unfocusedActiveBorderTop#2b2b2b
  • tab.unfocusedHoverBackground#15212AFF
  • terminal.foreground#BFC9DB
  • terminal.inactiveSelectionBackground#3a3d41
  • terminal.tab.activeBorder#0078d4
  • textBlockQuote.background#2b2b2b
  • textBlockQuote.border#616161
  • textCodeBlock.background#2b2b2b
  • textLink.activeForeground#4daafc
  • textLink.foreground#4daafc
  • textPreformat.background#3c3c3c
  • textPreformat.foreground#d0d0d0
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#18262FFF
  • titleBar.activeForeground#BFC9DB
  • titleBar.border#2b2b2b
  • titleBar.inactiveBackground#15212AFF
  • titleBar.inactiveForeground#9d9d9d
  • welcomePage.progress.foreground#0078d4
  • welcomePage.tileBackground#2b2b2b
  • widget.border#313131

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
emphasisitalic
strongbold
header#000080
comment#999999
constant.language#E67D74FF
constant.numeric, keyword.operator.plus.exponent, keyword.operator.minus.exponent#D699B5FF
constant.regexp#646695
entity.name.tag#E67D74FF
entity.name.tag.css, entity.name.tag.less#D7BA7D
entity.other.attribute-name#BFC9DBFF
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#D7BA7D
invalid#F44747
markup.underlineunderline
markup.bold#E67D74FFbold
markup.heading#E67D74FFbold
markup.italic#E67D74FFitalic
markup.strikethroughstrikethrough
markup.inserted#D4BC7DFF
markup.deleted#D4BC7DFF
markup.changed#E67D74FF
punctuation.definition.quote.begin.markdown#999999
punctuation.definition.list.begin.markdown#6796E6
markup.inline.raw#D4BC7DFF
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#E0AD82FF
meta.preprocessor.string#D4BC7DFF
meta.preprocessor.numeric#D699B5FF
meta.structure.dictionary.key.python#BFC9DBFF
meta.diff.header#E67D74FF
storage#E67D74FF
storage.type#E67D74FF
storage.modifier, keyword.operator.noexcept#E67D74FF
string, meta.embedded.assembly#D4BC7DFF
string.tag#D4BC7DFF
string.value#D4BC7DFF
string.regexp#D16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#E67D74FF
meta.template.expression#D4D4D4
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#BFC9DBFF
keyword#E67D74FF
keyword.control#E67D74FF
keyword.operator#E0AD82FF
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#E67D74FF
keyword.other.unit#D4BC7DFF
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#E67D74FF
support.function.git-rebase#BFC9DBFF
constant.sha.git-rebase#D4BC7DFF
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#D4D4D4
variable.language#E67D74FF
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#D0C5A9FF
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, storage.type.jai, entity.name.enum, entity.name.struct#82AAA3FF
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class, punctuation.separator.namespace.ruby#82AAA3FF
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#E67D74FF
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#BFC9DBFF
property, support.variable.property, variable.other.property, variable.other.member, variable.other.constant.property#BFC9DB
variable.other.constant, variable.other.enummember#BFC9DB
meta.object-literal.key#BFC9DBFF
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#D4BC7DFF
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#D4BC7DFF
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#D16969
keyword.operator.or.regexp, keyword.control.anchor.regexp#E67D74FF
keyword.operator.quantifier.regexp#D7BA7D
constant.character, constant.other.option#E67D74FF
constant.character.escape#D7BA7D
entity.name.label#C8C8C8
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6