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.activeBorder#ff617c
  • activityBar.activeFocusBorder#ff617c
  • activityBar.background#16181e
  • activityBar.border#6C6F934D
  • activityBar.foreground#b5ff8a
  • activityBar.inactiveForeground#D5D8DA90
  • activityBarBadge.background#ff617c
  • activityBarBadge.foreground#16181e
  • activityBarTop.activeBorder#ff617c
  • badge.background#2E303E
  • badge.foreground#D5D8DA
  • breadcrumbPicker.background#232530
  • button.background#2E303E
  • commandCenter.background#16181e
  • commandCenter.border#6C6F934D
  • debugToolBar.background#16181e
  • diffEditor.insertedTextBackground#09F7A01A
  • diffEditor.removedTextBackground#F43E5C1A
  • dropdown.background#2E303E
  • dropdown.listBackground#2E303E
  • editor.background#16181e
  • editor.findMatchBackground#6C6F9380
  • editor.findMatchHighlightBackground#6C6F934D
  • editor.findRangeHighlightBackground#6C6F931A
  • editor.hoverHighlightBackground#6C6F934D
  • editor.lineHighlightBackground#2E303E4D
  • editor.rangeHighlightBackground#2E303E80
  • editor.selectionBackground#7d81a342
  • editor.selectionHighlightBackground#8f93bd4d
  • editor.wordHighlightBackground#6C6F9380
  • editor.wordHighlightStrongBackground#6C6F9380
  • editorBracketMatch.background#6C6F9380
  • editorBracketMatch.border#6C6F9300
  • editorCodeLens.foreground#6C6F9380
  • editorCursor.background#16181e
  • editorCursor.foreground#ff617c
  • editorError.foreground#ff617c
  • editorGroup.border#6C6F934D
  • editorGroup.dropBackground#6C6F934D
  • editorGroupHeader.border#6C6F934D
  • editorGroupHeader.tabsBackground#16181e
  • editorGroupHeader.tabsBorder#6C6F934D
  • editorGutter.addedBackground#b5ff8add
  • editorGutter.deletedBackground#ff617cdd
  • editorGutter.modifiedBackground#f8ed4cdd
  • editorIndentGuide.activeBackground1#2E303E
  • editorIndentGuide.background1#2E303E80
  • editorLineNumber.activeForeground#D5D8DA80
  • editorLineNumber.foreground#D5D8DA1A
  • editorOverviewRuler.addedForeground#b5ff8add
  • editorOverviewRuler.border#2E303EB3
  • editorOverviewRuler.bracketMatchForeground#D5D8DA80
  • editorOverviewRuler.deletedForeground#ff617cdd
  • editorOverviewRuler.errorForeground#ff617cdd
  • editorOverviewRuler.findMatchForeground#6c6f932b
  • editorOverviewRuler.modifiedForeground#f8ed4cdd
  • editorOverviewRuler.warningForeground#f88e7cdd
  • editorRuler.foreground#6C6F934D
  • editorSuggestWidget.highlightForeground#ff617c
  • editorWarning.foreground#f8ed4c
  • editorWidget.background#232530
  • editorWidget.border#232530
  • errorForeground#ff617c
  • extensionButton.prominentBackground#ff617c
  • extensionButton.prominentHoverBackground#ff617c
  • focusBorder#ff617c
  • foreground#D5D8DA
  • gitDecoration.addedResourceForeground#b5ff8a
  • gitDecoration.deletedResourceForeground#ff617c
  • gitDecoration.ignoredResourceForeground#D5D8DA4D
  • gitDecoration.modifiedResourceForeground#f8ed4c
  • gitDecoration.untrackedResourceForeground#b5ff8a
  • input.background#16181e
  • input.border#6C6F934D
  • input.foreground#D5D8DA
  • input.placeholderForeground#d5d8dae1
  • inputOption.activeBorder#E9436D80
  • inputValidation.errorBackground#F43E5C80
  • inputValidation.errorBorder#F43E5C00
  • list.activeSelectionBackground#2E303E80
  • list.activeSelectionForeground#b5ff8a
  • list.dropBackground#6C6F9380
  • list.errorForeground#ff617cE6
  • list.focusBackground#2E303E80
  • list.focusForeground#f8ed4c
  • list.focusOutline#ff617c80
  • list.highlightForeground#ff617c
  • list.hoverBackground#2E303E80
  • list.hoverForeground#D5D8DA
  • list.inactiveFocusBackground#2E303E80
  • list.inactiveSelectionBackground#2E303E4D
  • list.inactiveSelectionForeground#D5D8DA
  • list.warningForeground#f8ed4cd8
  • menu.selectionBackground#6C6F9380
  • menu.selectionBorder#6C6F9380
  • minimap.errorHighlight#ff617c
  • minimap.warningHighlight#f8ed4c
  • panel.background#1a1c24
  • panel.border#6C6F934D
  • panelTitle.activeBorder#ff617c
  • panelTitle.activeForeground#b5ff8a
  • panelTitle.inactiveForeground#D5D8DA80
  • panelTitleBadge.background#ff617c
  • panelTitleBadge.foreground#16181e
  • peekView.border#6C6F934D
  • peekViewEditor.background#232530
  • peekViewEditor.matchHighlightBackground#6C6F9380
  • peekViewResult.background#232530
  • peekViewResult.matchHighlightBackground#6C6F9380
  • peekViewResult.selectionBackground#2E303E80
  • peekViewTitle.background#232530
  • progressBar.background#ff617c
  • scrollbar.shadow#16161C
  • scrollbarSlider.activeBackground#6C6F9380
  • scrollbarSlider.background#6C6F931A
  • scrollbarSlider.hoverBackground#6C6F934D
  • selection.background#6C6F9380
  • settings.checkboxBackground#16181e
  • settings.checkboxBorder#6C6F934D
  • settings.dropdownBackground#16181e
  • settings.dropdownBorder#6C6F934D
  • settings.modifiedItemIndicator#f8ed4c
  • settings.numberInputBackground#16181e
  • settings.numberInputBorder#6C6F934D
  • settings.textInputBackground#16181e
  • settings.textInputBorder#6C6F934D
  • sideBar.background#1a1c24
  • sideBar.border#6C6F934D
  • sideBar.dropBackground#6C6F934D
  • sideBar.foreground#D5D8DA
  • sideBarActivityBarTop.border#6C6F934D
  • sideBarSectionHeader.background#16181e
  • sideBarSectionHeader.border#6C6F934D
  • sideBarSectionHeader.foreground#B877DB
  • sideBarTitle.background#16181e
  • sideBarTitle.border#6C6F934D
  • sideBarTitle.foreground#ff617c
  • statusBar.background#1a1c24
  • statusBar.border#6C6F934D
  • statusBar.debuggingBackground#ff617c
  • statusBar.debuggingForeground#06060C
  • statusBar.foreground#D5D8DA80
  • statusBar.noFolderBackground#191b22
  • statusBarItem.hoverBackground#2E303E
  • statusBarItem.prominentBackground#2E303E
  • statusBarItem.prominentHoverBackground#6C6F93
  • tab.activeBackground#1a1c24
  • tab.activeBorder#ff617c
  • tab.activeForeground#b5ff8a
  • tab.border#6C6F934D
  • tab.inactiveBackground#16181e
  • tab.inactiveForeground#D5D8DA90
  • terminal.ansiBlack#565c75
  • terminal.ansiBlue#389ea8
  • terminal.ansiBrightBlack#414557
  • terminal.ansiBrightBlue#21b1be
  • terminal.ansiBrightCyan#f9c199
  • terminal.ansiBrightGreen#99d279
  • terminal.ansiBrightMagenta#b774dc
  • terminal.ansiBrightRed#f6637c
  • terminal.ansiBrightWhite#f88e7c
  • terminal.ansiBrightYellow#f8d28a
  • terminal.ansiCyan#e9c4a9
  • terminal.ansiGreen#9ec08a
  • terminal.ansiMagenta#b08ec2
  • terminal.ansiRed#d68492
  • terminal.ansiWhite#e39d90
  • terminal.ansiYellow#e0caa3
  • terminal.background#16181e
  • terminal.foreground#D5D8DA
  • terminal.selectionBackground#6C6F934D
  • terminalCursor.background#D5D8DA
  • terminalCursor.foreground#6C6F9380
  • textLink.activeForeground#ff617c
  • textLink.foreground#ff617c
  • titleBar.activeBackground#1a1c24
  • titleBar.border#6C6F9380
  • titleBar.inactiveBackground#1a1c24
  • walkThrough.embeddedEditorBackground#232530
  • widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#BBBBBB4Ditalic
variable#28edff
constant#ffab57
entity.name.function#28edff
constant.character.escape#28edff
entity.name#ffab57
entity.name.function#28edff
entity.name.tag#ff617c
entity.name.type, storage.type.cs#ffab57
entity.other.attribute-name#ffab57italic
entity.other.inherited-class#ffab57
entity.other.attribute-name.id#28edff
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#b5ff8a
entity.name.variable, variable#ff617c
entity.name.constant, variable.other.constant#f8ed4c
keyword#B877DBitalic
keyword.operator#D5D8DA
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete#b877db
storage#b877dbitalic
punctuation#D5D8DA
meta.attribute#ffab57
meta.attribute.value#28edff
entity.name.class, entity.name.type#ffab57
storage.type, support.type#ff617c
support.type#28edff
entity.other.alias, entity.name.alias#28edff
keyword.other.unit#ffab57
entity.name.function.member, entity.name.method#28edff
markup.list#28edff
markup.quote#f8ed4citalic
markup.heading, entity.name.section#ff617c
markup.bold#b877dbbold
markup.italic#28edffitalic
markup.inline.raw, markup.fenced_code.block#ffab57
markup.underline.link#fab795
storage#b877dbitalic
string.quoted, string.template, string.unquoted#b5ff8a
string.regexp#ffab57
string.other.link#ffab57
support#b5ff8a
support.function#28edff
support.variable#b5ff8a
support.type.property-name, meta.object-literal.key#ff617c
support.type.property-name.css#BBBBBB
variable.language#f8ed4citalic
variable.parameter#b5ff8aitalic
entity.name.property, variable.other.property, entity.name.value#ff617c
constant.language, support.constant.language#ffab57italic
string.template meta.embedded#BBBBBB
punctuation.definition.tag#ff617c
punctuation.separator#BBBBBB
punctuation.definition.template-expression#b877db
punctuation.section.embedded#b877db
punctuation.definition.list#ffab57
meta.function-call.generic.python#28edff