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.parameter—italic
string.template meta.embedded#BBBBBB—
punctuation.definition.tag, punctuation.separator#ffffff9f—
punctuation.definition.template-expression#B877DBE6—
punctuation.section.embedded#B877DBE6—
punctuation.definition.list#F09483E6—
ThemeDatabase All Themes by enes ozturk - VS Code Theme