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.background#080808
  • activityBar.dropBackground#6C6F9380
  • activityBar.foreground#D5D8DAB3
  • activityBarBadge.background#E95378
  • activityBarBadge.foreground#06060C
  • badge.background#2E303E
  • badge.foreground#D5D8DA
  • breadcrumbPicker.background#232530
  • button.background#2E303E
  • debugToolBar.background#1C1E26
  • diffEditor.insertedTextBackground#09F7A01A
  • diffEditor.removedTextBackground#F43E5C1A
  • dropdown.background#232530
  • dropdown.listBackground#2E303E
  • editor.background#0e0e0e
  • editor.findMatchBackground#000000
  • editor.findMatchHighlightBackground#1b1b1b
  • editor.findRangeHighlightBackground#6C6F931A
  • editor.hoverHighlightBackground#6C6F934D
  • editor.inactiveSelectionBackground#352a3b
  • editor.lineHighlightBackground#080808
  • editor.rangeHighlightBackground#2E303E80
  • editor.selectionBackground#a42aeb3d
  • editor.selectionHighlightBackground#1b1b1b
  • editor.wordHighlightBackground#a42aeb3d
  • editor.wordHighlightStrongBackground#a42aeb3d
  • editorBracketMatch.background#6C6F9380
  • editorBracketMatch.border#6C6F9300
  • editorCodeLens.foreground#6C6F9380
  • editorCursor.background#1C1E26
  • editorCursor.foreground#FB8B24
  • editorError.foreground#F43E5C
  • editorGroup.border#1A1C23
  • editorGroup.dropBackground#6C6F934D
  • editorGroupHeader.tabsBackground#0e0e0e
  • editorGutter.addedBackground#09F7A0B3
  • editorGutter.deletedBackground#F43E5CB3
  • editorGutter.modifiedBackground#21BFC2B3
  • editorIndentGuide.activeBackground#2E303E
  • editorIndentGuide.background#1f1f1f57
  • editorLineNumber.activeForeground#D5D8DA80
  • editorLineNumber.foreground#D5D8DA1A
  • editorOverviewRuler.addedForeground#09F7A080
  • editorOverviewRuler.border#2E303EB3
  • editorOverviewRuler.bracketMatchForeground#D5D8DA80
  • editorOverviewRuler.deletedForeground#F43E5C80
  • editorOverviewRuler.errorForeground#F43E5CE6
  • editorOverviewRuler.findMatchForeground#6C6F93
  • editorOverviewRuler.modifiedForeground#21BFC280
  • editorOverviewRuler.warningForeground#27D79780
  • editorRuler.foreground#6C6F934D
  • editorSuggestWidget.highlightForeground#E95378
  • editorWarning.foreground#27D797B3
  • editorWhitespace.foreground#1f1f1f
  • editorWidget.background#141414
  • editorWidget.border#232530
  • errorForeground#F43E5C
  • extensionButton.prominentBackground#E95378
  • extensionButton.prominentHoverBackground#E9436D
  • focusBorder#1A1C23
  • foreground#D5D8DA
  • gitDecoration.addedResourceForeground#27D797B3
  • gitDecoration.deletedResourceForeground#F43E5C
  • gitDecoration.ignoredResourceForeground#D5D8DA4D
  • gitDecoration.modifiedResourceForeground#FAB38E
  • gitDecoration.untrackedResourceForeground#27D797
  • input.background#141414
  • inputOption.activeBorder#E9436D80
  • inputValidation.errorBackground#F43E5C80
  • inputValidation.errorBorder#F43E5C00
  • list.activeSelectionBackground#2E303E80
  • list.activeSelectionForeground#D5D8DA
  • list.dropBackground#6C6F9380
  • list.errorForeground#F43E5CE6
  • list.focusBackground#2E303E80
  • list.focusForeground#D5D8DA
  • list.highlightForeground#E95378
  • list.hoverBackground#2E303E80
  • list.hoverForeground#D5D8DA
  • list.inactiveFocusBackground#2E303E80
  • list.inactiveSelectionBackground#2E303E4D
  • list.inactiveSelectionForeground#D5D8DA
  • list.warningForeground#27D797B3
  • panelTitle.activeBorder#E95378
  • peekView.border#1A1C23
  • peekViewEditor.background#232530
  • peekViewEditor.matchHighlightBackground#6C6F9380
  • peekViewResult.background#232530
  • peekViewResult.matchHighlightBackground#6C6F9380
  • peekViewResult.selectionBackground#2E303E80
  • peekViewTitle.background#232530
  • pickerGroup.foreground#E95378E6
  • progressBar.background#E95378
  • scrollbar.shadow#16161C
  • scrollbarSlider.activeBackground#6C6F9380
  • scrollbarSlider.background#6C6F931A
  • scrollbarSlider.hoverBackground#6C6F934D
  • selection.background#6C6F9380
  • sideBar.background#0e0e0e
  • sideBar.dropBackground#6C6F934D
  • sideBar.foreground#D5D8DA80
  • sideBarSectionHeader.background#0e0e0e
  • sideBarSectionHeader.foreground#D5D8DAB3
  • statusBar.background#0e0e0e
  • statusBar.debuggingBackground#FAB38E
  • statusBar.debuggingForeground#06060C
  • statusBar.foreground#D5D8DA80
  • statusBar.noFolderBackground#1C1E26
  • statusBarItem.hoverBackground#2E303E
  • statusBarItem.prominentBackground#2E303E
  • statusBarItem.prominentHoverBackground#6C6F93
  • tab.activeBackground#0e0e0e
  • tab.activeBorder#E95378
  • tab.border#1C1E2600
  • tab.inactiveBackground#0e0e0e
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3333ff
  • terminal.ansiBrightBlack#7f7f7f
  • terminal.ansiBrightBlue#6666ff
  • terminal.ansiBrightCyan#66ffff
  • terminal.ansiBrightGreen#66ff66
  • terminal.ansiBrightMagenta#ff66ff
  • terminal.ansiBrightRed#ff6666
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff66
  • terminal.ansiCyan#33ffff
  • terminal.ansiGreen#33ff33
  • terminal.ansiMagenta#ff33ff
  • terminal.ansiRed#ff3333
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffff33
  • terminal.background#00000000
  • terminal.foreground#ff1b6e
  • terminal.selectionBackground#6C6F934D
  • terminalCursor.background#ffcc00
  • terminalCursor.foreground#069fff
  • textLink.activeForeground#E9436D
  • textLink.foreground#E95378
  • titleBar.activeBackground#0e0e0e
  • titleBar.inactiveBackground#1C1E26
  • walkThrough.embeddedEditorBackground#232530
  • widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#BBBBBB4Ditalic
constant.character.escape#25B0BCE6
entity.name#FAC29AE6
entity.name.function#FDB849
entity.name.tag#E95678E6bold
entity.name.type, storage.type.cs#FAC29AE6italic
entity.other.attribute-name#46ACADitalic
entity.other.inherited-class#FAB795E6italic
entity.other.attribute-name.id#25B0BCE6italic
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#FAB795E6italic
entity.name.variable, variable#E95678E6italic
entity.name.type.class.ts, entity.name.type.interface.ts#E0AAFFitalic
variable.other.constant.property.ts, variable.other.constant.object.property.ts#FFFFFFitalic
keyword.other.unit#F09483E6
markup.quote#FAB795B3italic
markup.heading, entity.name.section#E95678E6
markup.bold#B877DBE6bold
markup.italic#25B0BCE6italic
markup.inline.raw, markup.fenced_code.block#F09483E6
markup.underline.link#FAB795E6italic
storage, keyword, keyword.operator, keyword.operator.new, keyword.operator.logical, keyword.operator.expression, keyword.operator.delete, variable.language#46ACADitalic
text.html.derivative#ced4da
string.quoted, string.template, constant, string.quoted.double, string.quoted.single, string.quoted.double.ts, constant.numeric.decimal, constant.language.null#eaac8b
string.regexp#F09483E6
string.other.link#F09483E6
support#FF4797italic
support.function#25B0BCE6italic
support.variable#E95678E6italic
support.type.property-name, meta.object-literal.key#E95678E6italic
support.type.property-name.css#d9d9d9
variable.parameteritalic
string.template meta.embedded#BBBBBB
punctuation.definition.tag, punctuation.separator#ffffff9f
punctuation.definition.template-expression#B877DBE6
punctuation.section.embedded#B877DBE6
punctuation.definition.list#F09483E6