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#18181a
  • activityBar.dropBackground#6C6F9380
  • activityBar.foreground#D5D8DAB3
  • activityBarBadge.background#E95378
  • activityBarBadge.foreground#06060C
  • badge.background#41576d
  • badge.foreground#aec0cc
  • breadcrumbPicker.background#232530
  • button.background#8187b4
  • debugToolBar.background#1C1E26
  • diffEditor.insertedTextBackground#09F7A01A
  • diffEditor.removedTextBackground#F43E5C1A
  • dropdown.background#6b6b81
  • dropdown.listBackground#48486b
  • editor.background#18181a
  • editor.findMatchBackground#6C6F9380
  • editor.findMatchHighlightBackground#6C6F934D
  • editor.findRangeHighlightBackground#6C6F931A
  • editor.hoverHighlightBackground#6C6F934D
  • editor.lineHighlightBackground#3b3b3b4d
  • editor.rangeHighlightBackground#2E303E80
  • editor.selectionBackground#ffffff5e
  • editor.selectionHighlightBackground#53e5ff4d
  • editor.wordHighlightBackground#4c9aa880
  • editor.wordHighlightStrongBackground#6C6F9380
  • editorBracketMatch.background#00000000
  • editorBracketMatch.border#ffffff5d
  • editorCodeLens.foreground#6C6F9380
  • editorCursor.background#a5aabe00
  • editorCursor.foreground#ffffff
  • editorError.foreground#F43E5C
  • editorGroup.border#1A1C23
  • editorGroup.dropBackground#6C6F934D
  • editorGroupHeader.tabsBackground#18181a
  • editorGutter.addedBackground#09F7A0B3
  • editorGutter.deletedBackground#F43E5CB3
  • editorGutter.modifiedBackground#21BFC2B3
  • editorIndentGuide.activeBackground#2E303E
  • editorIndentGuide.background#2E303E80
  • editorLineNumber.activeForeground#D5D8DA80
  • editorLineNumber.foreground#BBBBBB
  • 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#E95378
  • extensionButton.prominentHoverBackground#E9436D
  • focusBorder#ffffff
  • foreground#D5D8DA
  • gitDecoration.addedResourceForeground#27D797B3
  • gitDecoration.deletedResourceForeground#F43E5C
  • gitDecoration.ignoredResourceForeground#D5D8DA4D
  • gitDecoration.modifiedResourceForeground#FAB38E
  • gitDecoration.untrackedResourceForeground#27D797
  • input.background#434552
  • inputOption.activeBorder#a1a1c2
  • inputValidation.errorBackground#F43E5C80
  • inputValidation.errorBorder#F43E5C00
  • list.activeSelectionBackground#43476d
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#43476d
  • list.errorForeground#F43E5CE6
  • list.focusBackground#2E303E80
  • list.focusForeground#FFFFFF
  • list.highlightForeground#535353
  • list.hoverBackground#43476d
  • list.hoverForeground#FFFFFF
  • 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#ca8b9a
  • scrollbar.shadow#1c1c1600
  • scrollbarSlider.activeBackground#43476d30
  • scrollbarSlider.background#43476d30
  • scrollbarSlider.hoverBackground#43476d30
  • selection.background#313349
  • sideBar.background#18181a
  • sideBar.dropBackground#6C6F934D
  • sideBar.foreground#BBBBBB
  • sideBarSectionHeader.background#18181a
  • sideBarSectionHeader.foreground#D5D8DAB3
  • statusBar.background#18181a
  • statusBar.debuggingBackground#FAB38E
  • statusBar.debuggingForeground#06060C
  • statusBar.foreground#FFE4C4
  • statusBar.noFolderBackground#1C1E26
  • statusBarItem.hoverBackground#2E303E
  • statusBarItem.prominentBackground#2E303E
  • statusBarItem.prominentHoverBackground#6C6F93
  • tab.activeBorder#BBBBBB
  • tab.border#18181a
  • tab.inactiveBackground#18181a
  • 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.foreground#D5D8DA
  • terminal.selectionBackground#6C6F934D
  • terminalCursor.background#D5D8DA
  • terminalCursor.foreground#6C6F9380
  • textLink.activeForeground#272727
  • textLink.foreground#474955
  • titleBar.activeBackground#18181a
  • titleBar.inactiveBackground#18181a
  • walkThrough.embeddedEditorBackground#232530
  • widget.shadow#6c6c86

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#d8c9c94ditalic
constant#5f88af
constant.character.escape#25B0BCE6
entity.name#757575e6
entity.name.function, source.js#ffffff
entity.name.tag#fffb9d
entity.name.type, storage.type.cs#c75678
entity.other.attribute-name#c75678
entity.other.inherited-class#BBBBBB
entity.other.attribute-name.id#25B0BCE6
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#f1d96ee6
entity.name.variable, variable, meta.objectliteral.js, meta.array.literal.js#ffafa6
keyword#fffb9ditalic
keyword.operator#CAA6E2E6
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete#CAA6E2E6
keyword.other.unit#F09483E6
markup.quote#FAB795B3italic
markup.heading, entity.name.section#E95678E6
markup.bold#CAA6E2E6bold
markup.italic#25B0BCE6italic
markup.inline.raw, markup.fenced_code.block#F09483E6
markup.underline.link#FAB795E6
storage#CAA6E2E6italic
string.quoted, string.template#ffffff
string.regexp#fca22de6
string.other.link#F09483E6
support#8ab1e4e6
support.function#14b0bee6
support.variable#FFFD80
support.type.property-name, meta.object-literal.key#bcbcf2
support.type.property-name.css#caa6e2e6
variable.language#FAC29AE6italic
string.template meta.embedded#ffffff
punctuation.definition.tag#CAA6E2E6
punctuation.separator#CAA6E2E6
punctuation.definition.template-expression#CAA6E2E6
punctuation.section.embedded#CAA6E2E6
punctuation.definition.list#F09483E6
constant.other.color#88adffe6
entity.name.tag.css#55c296
punctuation.definition.block.js, punctuation.terminator.statement.js#CAA6E2E6
entity.name.tag.js#fffb9d
punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js#8AB1E4E6
meta.brace.round.js#CAA6E2E6
punctuation.definition.parameters#CAA6E2E6
punctuation.separator.parameter.js#CAA6E2E6
punctuation.separator.key-value.css#BBBBBB
variable.parameter.js#12E8E1
keyword.control.flow.python, support.function#fffb9d
source.python, meta.item-access.python, meta.function-call.arguments.python#FFAFA6
meta.function-call.python#ffffff
keyword.control.import.python#FFFb9d
variable.parameter.function.language.python#12E8E1
punctuation.parenthesis.begin.python, punctuation.parenthesis.end.python, punctuation.definition.arguments.end.python, punctuation.definition.arguments.begin.python, punctuation.definition.dict.begin.python, punctuation.definition.dict.end.python#CAA6E2E6
variable.language.special.self.python#c75678
punctuation.definition.list.begin.python, punctuation.definition.list.end.python#ffffff