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#14161d
  • activityBar.foreground#FAB28E
  • activityBar.inactiveForeground#333543
  • activityBarBadge.background#FAB28E
  • activityBarBadge.foreground#1A1C23
  • badge.background#FAB28E
  • badge.foreground#1A1C23
  • breadcrumbPicker.background#232530
  • button.background#FAB28E
  • button.foreground#1A1C23
  • debugToolBar.background#14161d
  • diffEditor.insertedTextBackground#09F7A01A
  • diffEditor.removedTextBackground#F43E5C1A
  • dropdown.background#232530
  • dropdown.listBackground#2E303E
  • editor.background#1C1E26
  • editor.findMatchBackground#6C6F9380
  • editor.findMatchHighlightBackground#6C6F934D
  • editor.findRangeHighlightBackground#6C6F931A
  • editor.hoverHighlightBackground#6C6F934D
  • editor.lineHighlightBackground#2E303E4D
  • editor.rangeHighlightBackground#2E303E80
  • editor.selectionBackground#333543B3
  • editor.selectionHighlightBackground#6C6F934D
  • editor.wordHighlightBackground#6C6F9380
  • editor.wordHighlightStrongBackground#6C6F9380
  • editorBracketMatch.background#6C6F9380
  • editorBracketMatch.border#6C6F9300
  • editorCodeLens.foreground#6C6F9380
  • editorCursor.background#1C1E26
  • editorCursor.foreground#FAC29A
  • editorError.foreground#F43E5C
  • editorGroup.border#1A1C23
  • editorGroup.dropBackground#6C6F934D
  • editorGroupHeader.tabsBackground#1C1E26
  • editorGutter.addedBackground#09F7A0B3
  • editorGutter.deletedBackground#F43E5CB3
  • editorGutter.modifiedBackground#21BFC2B3
  • editorIndentGuide.activeBackground#2E303E
  • editorIndentGuide.background#2E303E80
  • editorLineNumber.activeForeground#FAC29A
  • editorLineNumber.foreground#d5d8da2a
  • 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
  • editorWidget.background#232530
  • editorWidget.border#232530
  • errorForeground#F43E5C
  • extensionButton.prominentBackground#FAB28E
  • extensionButton.prominentForeground#1A1C23
  • extensionButton.prominentHoverBackground#FAB28E
  • focusBorder#1A1C23
  • foreground#D5D8DA
  • gitDecoration.addedResourceForeground#27D797B3
  • gitDecoration.deletedResourceForeground#F43E5C
  • gitDecoration.ignoredResourceForeground#D5D8DA4D
  • gitDecoration.modifiedResourceForeground#FAB38E
  • gitDecoration.untrackedResourceForeground#27D797
  • input.background#2E303E
  • 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
  • panel.background#14161d
  • panelTitle.activeBorder#FAB28E
  • 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#14161d
  • sideBar.dropBackground#6C6F934D
  • sideBar.foreground#D5D8DA80
  • sideBarSectionHeader.background#181b24
  • sideBarSectionHeader.foreground#D5D8DAB3
  • statusBar.background#2E303E
  • statusBar.debuggingBackground#FAB38E
  • statusBar.debuggingForeground#06060C
  • statusBar.foreground#FDF0ED
  • statusBar.noFolderBackground#1C1E26
  • statusBarItem.hoverBackground#333543
  • statusBarItem.prominentBackground#2E303E
  • statusBarItem.prominentHoverBackground#6C6F93
  • tab.activeBackground#1C1E26
  • tab.activeBorder#FAB28E
  • tab.border#1C1E2600
  • tab.hoverBackground#333543
  • tab.inactiveBackground#14161d
  • terminal.ansiBlue#26BBD9
  • terminal.ansiBrightBlue#3FC4DE
  • terminal.ansiBrightCyan#6BE4E6
  • terminal.ansiBrightGreen#3FDAA4
  • 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.background#14161d
  • terminal.foreground#D5D8DA
  • terminal.selectionBackground#6C6F934D
  • terminalCursor.background#D5D8DA
  • terminalCursor.foreground#D5D8DA
  • textLink.activeForeground#ffffff
  • textLink.foreground#FAB28E
  • titleBar.activeBackground#14161d
  • titleBar.inactiveBackground#1C1E26
  • walkThrough.embeddedEditorBackground#232530
  • widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.quoted.docstring.single.python, string.quoted.docstring.double.python, string.quoted.docstring.multi.python#BBBBBB4D
constant, entity.name.type.parameter, entity.name.type.cpp, support.type.primitive, entity.name.function.preprocessor#B877DBE6
constant.character.escape#B877DBE6
entity.name, meta.function-call.arguments.python#FAC29AE6
entity.name.function, meta.function-call.python#F09483E6
entity.name.tag#E95678E6
entity.name.type, storage.type.cs#FAC29AE6
entity.other.attribute-name#F09483E6
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#ffffffcb
keyword#E95678E6
keyword.operator#E95678E6
keyword.operator.new, keyword.operator.expression, keyword.operator.delete, variable.language.special.self.python#B877DBE6
keyword.operator.logical, keyword.operator.comparison, punctuation.separator, punctuation.separator.pointer-access.cpp#E95678E6
keyword.other.unit#B877DBE6
markup.quote#FAB795B3
markup.heading, entity.name.section#E95678E6
markup.bold#B877DBE6bold
markup.#25B0BCE6
markup.inline.raw, markup.fenced_code.block#F09483E6
markup.underline.link#FAB795E6
storage#E95678E6
string.quoted.double.cpp, string.quoted.single.python, string.quoted.multi.python, string.quoted.double.python#b8c0fff8
string.quoted.double, string.template#F5D7BBDC
string.quoted.single#B877DBE6
string.regexp#F09483E6
string.other.link#F09483E6
support#FAC29AE6
support.function#F09483E6
support.variable#E95678E6
support.type.property-name, meta.object-literal.key#E95678E6
support.constant#ffffffcb
support.type.property-name.css, support.type.vendored.property-name.css#FAC29AE6
variable.language, source.python#ffffffcb
variable.parameter#FAC29AE6
string.template meta.embedded#ffffffcb
punctuation.definition.tag#E95678E6
punctuation.separator#ffffffcb
punctuation.definition.template-expression#B877DBE6
punctuation.section.embedded#ffffffcb
punctuation.definition.list#ffffffcb