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#0C0D11
  • activityBar.activeBorder#385D8400
  • activityBar.background#111319
  • activityBar.border#14223000
  • activityBar.dropBackground#3a404e
  • activityBar.foreground#385D84
  • activityBar.inactiveForeground#36424D
  • activityBarBadge.background#385D84
  • activityBarBadge.foreground#B2D8FE
  • badge.background#385D84
  • badge.foreground#8494A2
  • button.background#193551
  • button.foreground#B2D8FE
  • button.hoverBackground#1F4162
  • commandCenter.activeBackground#111319
  • commandCenter.activeBorder#14223000
  • commandCenter.background#0D161F00
  • commandCenter.border#111319
  • commandCenter.inactiveBorder#14223000
  • debugExceptionWidget.background#FF9F2E60
  • debugExceptionWidget.border#FF9F2E60
  • debugToolBar.background#101B26
  • diffEditor.insertedTextBackground#29BF1220
  • diffEditor.removedTextBackground#F21B3F20
  • disabledForeground#626D7860
  • dropdown.background#0D161F
  • dropdown.border#14223000
  • dropdown.foreground#8494A2
  • editor.background#0C0D11
  • editor.findMatchBackground#61A6EC30
  • editor.findMatchBorder#00000000
  • editor.findMatchHighlightBackground#23476B
  • editor.foreground#8494A2
  • editor.hoverHighlightBackground#373941
  • editor.lineHighlightBorder#122131
  • editor.rangeHighlightBackground#14223090
  • editor.selectionBackground#21466Bdd
  • editor.selectionHighlightBackground#4F435580
  • editor.wordHighlightBackground#2B547C54
  • editor.wordHighlightStrongBackground#db45a240
  • editorBracketMatch.background#101B2680
  • editorBracketMatch.border#8494A2
  • editorCodeLens.foreground#746f77
  • editorCursor.foreground#61A6EC
  • editorError.foreground#FC644D
  • editorGroup.background#0C0D11
  • editorGroup.dropBackground#495061d7
  • editorGroupHeader.tabsBackground#111319
  • editorGutter.addedBackground#9BC53DBB
  • editorGutter.deletedBackground#FC644DBB
  • editorGutter.modifiedBackground#5BC0EBBB
  • editorHoverWidget.background#101B26
  • editorHoverWidget.border#142230
  • editorIndentGuide.activeBackground#23476B
  • editorIndentGuide.background#132435
  • editorLineNumber.activeForeground#8494A2
  • editorLineNumber.foreground#292D3B
  • editorLink.activeForeground#3B79C7
  • editorOverviewRuler.border#142230
  • editorRuler.foreground#4F4355
  • editorSuggestWidget.background#101B26
  • editorSuggestWidget.border#372F3C
  • editorSuggestWidget.selectedBackground#373941
  • editorWarning.foreground#FF9F2E
  • editorWhitespace.foreground#333844
  • editorWidget.background#111319
  • editorWidget.resizeBorder#193551
  • errorForeground#FC644D
  • extensionButton.prominentBackground#07d4b6cc
  • extensionButton.prominentHoverBackground#07d4b5b0
  • focusBorder#17334f
  • foreground#8494A2
  • gitDecoration.ignoredResourceForeground#4D565F
  • gitDecoration.modifiedResourceForeground#A18864
  • icon.foreground#8494A2
  • input.background#14151C
  • input.border#00000000
  • input.foreground#8494A2
  • input.placeholderForeground#4D565F
  • inputOption.activeBorder#2D3E50
  • inputOption.activeForeground#8494A2
  • inputOption.hoverBackground#193551
  • keybindingLabel.background#142230
  • keybindingLabel.border#193551
  • keybindingLabel.bottomBorder#193551
  • keybindingLabel.foreground#8494A2
  • list.activeSelectionBackground#142230
  • list.activeSelectionForeground#A5B9CC
  • list.dropBackground#3a404e
  • list.focusBackground#282b35
  • list.focusForeground#eee
  • list.highlightForeground#A5B9CC
  • list.hoverBackground#111D29
  • list.inactiveSelectionBackground#142230
  • list.inactiveSelectionForeground#A5B9CC
  • menu.background#111319
  • menu.foreground#8494A2
  • menu.selectionForeground#8494A2
  • menu.separatorBackground#181B24
  • menubar.selectionBackground#142230
  • menubar.selectionForeground#8494A2
  • merge.currentContentBackground#F9267240
  • merge.currentHeaderBackground#F92672
  • merge.incomingContentBackground#3B79C740
  • merge.incomingHeaderBackground#3B79C7BB
  • minimapSlider.activeBackground#60698060
  • minimapSlider.background#58607460
  • minimapSlider.hoverBackground#60698060
  • notification.background#2d313b
  • notification.buttonBackground#00e8c5cc
  • notification.buttonHoverBackground#07d4b5b0
  • notification.errorBackground#FC644D
  • notification.infoBackground#00b0ff
  • notification.warningBackground#FF9F2E
  • panel.background#0C0D11
  • panel.border#111319
  • panelTitle.activeBorder#0C0D11
  • panelTitle.activeForeground#385D84
  • panelTitle.inactiveForeground#626D78
  • peekView.border#0C0D11
  • peekViewEditor.background#1A1C22
  • peekViewEditor.matchHighlightBackground#FF9F2E60
  • peekViewResult.background#1A1C22
  • peekViewResult.matchHighlightBackground#FF9F2E60
  • peekViewResult.selectionBackground#0C0D11
  • peekViewTitle.background#1A1C22
  • peekViewTitleDescription.foreground#746f77
  • pickerGroup.border#181B24
  • pickerGroup.foreground#8494A2
  • progressBar.background#C668BA
  • scrollbar.shadow#0C0D11
  • scrollbarSlider.activeBackground#23476B60
  • scrollbarSlider.background#23476B33
  • scrollbarSlider.hoverBackground#23476B55
  • selection.background#193551
  • settings.checkboxBackground#0B121A00
  • settings.checkboxBorder#19355199
  • settings.checkboxForeground#8494A2
  • settings.dropdownBackground#0B121A00
  • settings.dropdownBorder#19355100
  • settings.dropdownForeground#8494A2
  • settings.headerForeground#8494A2
  • settings.numberInputBackground#0B121A00
  • settings.numberInputBorder#19355199
  • settings.textInputBackground#0B121A00
  • settings.textInputBorder#19355199
  • sideBar.background#0C0D11
  • sideBar.border#111319
  • sideBar.foreground#8494A2
  • sideBarSectionHeader.background#0C0D11
  • sideBarTitle.foreground#8494A2
  • statusBar.background#0C0D11
  • statusBar.debuggingBackground#23476B
  • statusBar.debuggingForeground#B2D8FE
  • statusBar.foreground#8494A2
  • statusBar.noFolderBackground#0C0D11
  • statusBarItem.activeBackground#193551
  • statusBarItem.hoverBackground#61A6EC20
  • statusBarItem.hoverForeground#61A6ECff
  • statusBarItem.prominentBackground#07d4b5b0
  • statusBarItem.prominentHoverBackground#00e8c5cc
  • tab.activeBackground#0C0D11
  • tab.activeBorder#385D8400
  • tab.activeForeground#8494A2
  • tab.border#14223000
  • tab.inactiveBackground#111319
  • tab.inactiveForeground#626D78
  • terminal.ansiBlue#42527F
  • terminal.ansiBrightBlue#5994D0
  • terminal.ansiBrightCyan#006E5A
  • terminal.ansiBrightGreen#3B844B
  • terminal.ansiBrightMagenta#95004A
  • terminal.ansiBrightRed#995324
  • terminal.ansiBrightYellow#9E874D
  • terminal.ansiCyan#006E5A
  • terminal.ansiGreen#3B844B
  • terminal.ansiMagenta#95004A
  • terminal.ansiRed#995324
  • terminal.ansiYellow#9E874D
  • terminal.border#111319
  • terminal.foreground#8494A2
  • terminalCursor.background#23262E
  • terminalCursor.foreground#9E874D
  • textLink.activeForeground#4D82BB
  • textLink.foreground#385D84
  • titleBar.activeBackground#111319
  • titleBar.activeForeground#8494A2
  • titleBar.border#11131900
  • titleBar.inactiveBackground#111319
  • toolbar.hoverBackground#142230
  • tree.indentGuidesStroke#193551
  • walkThrough.embeddedEditorBackground#0C0D11
  • widget.shadow#0C0D11

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#8C8C8C—
emphasis—italic
strong—bold
header#00004D—
comment#23476B—
constant.language#2B6AAD—
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#6A8E66—
comment, invalid, keyword, entity.other.attribute-name—italic
constant.regexp#3D3F51—
entity.name.tag#2B6AAD—
entity.name.tag.css, entity.name.tag.less#876E4D—
entity.other.attribute-name#5A7AAE—
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#876E4D—
invalid#D63232—
markup.underline—underline
markup.bold#2B6AADbold
markup.heading#2B6AADbold
markup.italic—italic
markup.strikethrough—strikethrough
markup.inserted#6A8E66—
markup.deleted#A5786F—
markup.changed#2B6AAD—
punctuation.definition.quote.begin.markdown#415D36—
punctuation.definition.list.begin.markdown#3F63A6—
markup.inline.raw#A5786F—
punctuation.definition.tag#525252—
meta.preprocessor, entity.name.function.preprocessor#2B6AAD—
meta.preprocessor.string#A5786F—
meta.preprocessor.numeric#6A8E66—
meta.structure.dictionary.key.python#5A7AAE—
meta.diff.header#2B6AAD—
storage#2B6AAD—
storage.type#2462AA—
storage.modifier, keyword.operator.noexcept#3658B6—
string, meta.embedded.assembly#A5786F—
string.tag#A5786F—
string.value#A5786F—
string.regexp#9A4F4F—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#2B6AAD—
meta.template.expression#8C8C8C—
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#5A7AAE—
keyword#868408—
keyword.control#2B6AAD—
keyword.operator#8C8C8C—
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#2B6AAD—
keyword.other.unit#6A8E66—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#2B6AAD—
support.function.git-rebase#5A7AAE—
constant.sha.git-rebase#6A8E66—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#8C8C8C—
variable.language#2B6AAD—
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#B8B88E—
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#5E73AD—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#7C90A4—
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#AA6FAF—
entity.other.attribute-name, meta.object-literal.key, variable.object.property, variable.other.property, variable.other.object.property, variable.other.constant.property#94A7B8—
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#5A7AAE—
variable.other.constant, variable.other.enummember#337FCF—
meta.object-literal.key#5A7AAE—
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#A5786F—
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#A5786F—
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#9F4F4F—
keyword.operator.or.regexp, keyword.control.anchor.regexp#B8B88E—
keyword.operator.quantifier.regexp#A68C5D—
constant.character, constant.other.option#7C90A4—
constant.character.escape#A68C5D—
entity.name.label#A8A8A8—
ref.matchtext#FFFFFF—
token.info-token#5278BD—
token.warn-token#A68F3F—
token.error-token#D63232—
token.debug-token#885DE6—
Dark Panther by Marcos Gomes Neto - VS Code Theme