Skip to main content
CodingTheme

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#221f2e
  • activityBar.dropBackground#6C6F9380
  • activityBar.foreground#D5D8DAB3
  • activityBarBadge.background#ff6767
  • 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#1e1b27
  • editor.findMatchBackground#000000
  • editor.findMatchHighlightBackground#1b1b1b
  • editor.findRangeHighlightBackground#6C6F931A
  • editor.hoverHighlightBackground#6C6F934D
  • editor.inactiveSelectionBackground#352a3b
  • editor.lineHighlightBackground#514f5265
  • editor.rangeHighlightBackground#2E303E80
  • editor.selectionBackground#ffffff41
  • editor.selectionHighlightBackground#1b1b1b
  • editor.wordHighlightBackground#a42aeb3d
  • editor.wordHighlightStrongBackground#a42aeb3d
  • 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#ffffff
  • 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#35333f
  • 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#ffffff
  • 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#6ec4fd
  • list.hoverBackground#2E303E80
  • list.hoverForeground#D5D8DA
  • list.inactiveFocusBackground#2E303E80
  • list.inactiveSelectionBackground#2E303E4D
  • list.inactiveSelectionForeground#D5D8DA
  • list.warningForeground#F43E5C80
  • 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#14121d
  • sideBar.dropBackground#6C6F934D
  • sideBar.foreground#D5D8DA80
  • sideBarSectionHeader.background#221f2e
  • sideBarSectionHeader.foreground#D5D8DAB3
  • statusBar.background#35333f
  • statusBar.debuggingBackground#FAB38E
  • statusBar.debuggingForeground#06060C
  • statusBar.foreground#D5D8DA80
  • statusBar.noFolderBackground#1C1E26
  • statusBarItem.hoverBackground#2E303E
  • statusBarItem.prominentBackground#2E303E
  • statusBarItem.prominentHoverBackground#6C6F93
  • tab.activeBackground#1f1f1f
  • tab.activeBorder#E95378
  • tab.border#1C1E2600
  • tab.inactiveBackground#2a263b
  • terminal.ansiBlue#7bcddd
  • terminal.ansiBrightBlue#3FC4DE
  • terminal.ansiBrightCyan#6BE4E6
  • terminal.ansiBrightGreen#3fdba4
  • terminal.ansiBrightMagenta#F075B5
  • terminal.ansiBrightRed#EC6A88
  • terminal.ansiBrightYellow#FBC3A7
  • terminal.ansiCyan#59E1E3
  • terminal.ansiGreen#29D398
  • terminal.ansiMagenta#EE64AC
  • terminal.ansiRed#E95678
  • terminal.ansiYellow#FAB795
  • terminal.foreground#D5D8DA
  • terminal.selectionBackground#6C6F934D
  • terminalCursor.background#D5D8DA
  • terminalCursor.foreground#6C6F9380
  • textLink.activeForeground#aa8bff
  • textLink.foreground#aa8bff
  • titleBar.activeBackground#0e0e0e
  • titleBar.inactiveBackground#1C1E26
  • walkThrough.embeddedEditorBackground#232530
  • widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#cfcfcf50italic
constant.character.escape#69cdd6e6
entity.name#FAC29AE6
entity.name.function#3dff6e
entity.name.tag#fa59b7
entity.name.type, storage.type.cs#5cfafa
entity.other.attribute-name#5eff6b
entity.other.inherited-class#FAB795E6
entity.other.attribute-name.id#25B0BCE6
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#FAB795E6
entity.name.variable, variable#f7f7f7
entity.name.type.class.ts, entity.name.type.interface.ts#E0AAFF
variable.other.constant.property.ts, variable.other.constant.object.property.ts#e2dddd
keyword.other.unit#fc63db
markup.quote#FAB795B3italic
markup.heading, entity.name.section#E95678E6
markup.bold#B877DBE6bold
markup.italic#bc25bce6italic
markup.inline.raw, markup.fenced_code.block#F09483E6
markup.underline.link#FAB795E6
storage, keyword, keyword.operator, keyword.operator.new, keyword.operator.logical, keyword.operator.expression, keyword.operator.delete, variable.language#ff75ff
text.html.derivative#ced4da
string.quoted, string.template, string.quoted.double, string.quoted.single, string.quoted.double.ts, constant.language.null#f1f38c
string.regexp#F09483E6
string.other.link#F09483E6
support#fd93ef
constant.language.boolean, constant.numeric.decimal#70dafa
support.function#00d9ff
support.variable#E95678E6
support.type.property-name, meta.object-literal.key#81e9fc
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

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...