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#1C1E26
  • activityBar.foreground#D8DEE9
  • activityBar.inactiveForeground#4C566A
  • activityBarBadge.background#88C0D0
  • activityBarBadge.foreground#0B0C0F
  • breadcrumb.activeSelectionForeground#E0E0E0
  • breadcrumb.background#0B0C0F
  • breadcrumb.focusForeground#E0E0E0
  • breadcrumb.foreground#4C566A
  • breadcrumb.separatorForeground#4C566A
  • button.background#5E81AC
  • button.border#5E81AC
  • button.foreground#ECEFF4
  • debugToolBar.background#1C1E26
  • dropdown.background#2E3440
  • dropdown.border#4C566A
  • dropdown.foreground#D8DEE9
  • editor.background#0B0C0F
  • editor.findMatchBackground#434C5E
  • editor.findMatchHighlightBackground#67769666
  • editor.findRangeHighlightBackground#3B404877
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#1C1E26
  • editor.selectionBackground#3E4451
  • editor.selectionForeground#E0E0E0
  • editor.selectionHighlightBackground#2C313C
  • editor.wordHighlightBackground#2E3440
  • editor.wordHighlightStrongBackground#3B4048
  • editorBracketHighlight.foreground1#88C0D0
  • editorBracketHighlight.foreground2#81A1C1
  • editorBracketHighlight.foreground3#5E81AC
  • editorBracketHighlight.foreground4#BF616A
  • editorBracketHighlight.foreground5#D08770
  • editorBracketHighlight.foreground6#A3BE8C
  • editorBracketMatch.background#3B4048
  • editorBracketMatch.border#8FBCBB
  • editorCodeLens.foreground#5C6370
  • editorCursor.foreground#FFCC00
  • editorError.foreground#BF616A
  • editorGroup.border#4C566A
  • editorGroup.dropBackground#3B404877
  • editorGroup.dropIntoPromptBackground#1C1E26
  • editorGroup.dropIntoPromptForeground#ECEFF4
  • editorGroupHeader.tabsBackground#1C1E26
  • editorGroupHeader.tabsBorder#4C566A
  • editorGutter.background#0B0C0F
  • editorGutter.modifiedBackground#B48EAD
  • editorHoverWidget.background#1C1E26
  • editorHoverWidget.border#4C566A
  • editorHoverWidget.foreground#D8DEE9
  • editorHoverWidget.highlightForeground#88C0D0
  • editorIndentGuide.background#2E3440
  • editorInfo.foreground#88C0D0
  • editorInlayHint.background#2E3440
  • editorInlayHint.foreground#A1A1A1
  • editorLightBulb.foreground#FFD700
  • editorLightBulbAutoFix.foreground#50FA7B
  • editorLineNumber.activeForeground#ECEFF4
  • editorLineNumber.foreground#5C6370
  • editorLink.activeForeground#8BE9FD
  • editorOverviewRuler.border#1C1E26
  • editorOverviewRuler.bracketMatchForeground#8FBCBB88
  • editorOverviewRuler.errorForeground#BF616A88
  • editorOverviewRuler.findMatchForeground#67769666
  • editorOverviewRuler.infoForeground#88C0D088
  • editorOverviewRuler.warningForeground#D0877088
  • editorOverviewRuler.wordHighlightForeground#2E344088
  • editorOverviewRuler.wordHighlightStrongForeground#3B404888
  • editorRuler.foreground#3B4048
  • editorStickyScroll.background#0B0C0F
  • editorStickyScrollHover.background#1A1B1F
  • editorSuggestWidget.background#1C1E26
  • editorSuggestWidget.foreground#D8DEE9
  • editorSuggestWidget.highlightForeground#8FBCBB
  • editorSuggestWidget.selectedBackground#2E3440
  • editorSymbolHighlightBackground#434C5E55
  • editorUnicodeHighlight.background#3B404855
  • editorUnicodeHighlight.border#FF6B6B
  • editorWarning.foreground#D08770
  • editorWhitespace.background#0B0C0F
  • editorWhitespace.foreground#3B4048
  • editorWidget.background#1C1E26
  • editorWidget.foreground#D8DEE9
  • focusBorder#88C0D0
  • input.background#2E3440
  • input.border#4C566A
  • input.foreground#D8DEE9
  • input.placeholderForeground#616E88
  • inputOption.activeBackground#434C5E
  • inputOption.activeBorder#81A1C1
  • inputOption.activeForeground#E0E0E0
  • list.activeSelectionBackground#3B4048
  • list.activeSelectionForeground#ECEFF4
  • list.hoverBackground#3B4048
  • list.hoverForeground#ECEFF4
  • list.inactiveSelectionBackground#2E3440
  • list.inactiveSelectionForeground#D8DEE9
  • minimap.background#0B0C0F
  • minimap.errorHighlight#BF616A88
  • minimap.findMatchHighlight#67769666
  • minimap.selectionHighlight#2C313C
  • minimap.warningHighlight#D0877088
  • notification.background#1C1E26
  • notification.foreground#E0E0E0
  • panel.background#0B0C0F
  • panel.border#4C566A
  • panelTitle.activeBorder#5E81AC
  • panelTitle.activeForeground#88C0D0
  • panelTitle.hoverForeground#ECEFF4
  • panelTitle.inactiveForeground#4C566A
  • peekViewEditor.background#1C1E26
  • peekViewResult.background#2E3440
  • peekViewTitle.background#2E3440
  • scrollbarSlider.activeBackground#88C0D0
  • scrollbarSlider.background#4C566A88
  • scrollbarSlider.hoverBackground#5E81ACAA
  • settings.headerForeground#FFD700
  • settings.modifiedItemIndicator#D08770
  • sideBar.background#1C1E26
  • sideBar.border#2E3440
  • sideBar.foreground#E0E0E0
  • sideBarSectionHeader.foreground#81A1C1
  • sideBarTitle.foreground#D8DEE9
  • statusBar.background#0B0C0F
  • statusBar.debuggingBackground#BF616A
  • statusBar.debuggingForeground#ECEFF4
  • statusBar.foreground#D8DEE9
  • statusBar.noFolderBackground#1C1E26
  • tab.activeBackground#0B0C0F
  • tab.activeForeground#E0E0E0
  • tab.border#2E3440
  • tab.hoverBackground#2E3440
  • tab.inactiveBackground#1C1E26
  • tab.inactiveForeground#4C566A
  • tab.unfocusedActiveForeground#A3BE8C
  • tab.unfocusedHoverBackground#2C313C
  • tab.unfocusedInactiveForeground#3B4048
  • terminal.ansiBlack#2E3440
  • terminal.ansiBlue#5FD4FB
  • terminal.ansiBrightBlack#4C566A
  • terminal.ansiBrightBlue#81A1C1
  • terminal.ansiBrightCyan#9AEDFE
  • terminal.ansiBrightGreen#B3E85F
  • terminal.ansiBrightMagenta#C084FC
  • terminal.ansiBrightRed#FF5F5F
  • terminal.ansiBrightWhite#ECEFF4
  • terminal.ansiBrightYellow#FFFF99
  • terminal.ansiCyan#8BE9FD
  • terminal.ansiGreen#50FA7B
  • terminal.ansiMagenta#D291FF
  • terminal.ansiRed#FF6B6B
  • terminal.ansiWhite#E0E0E0
  • terminal.ansiYellow#FFD700
  • terminal.background#0B0C0F
  • terminal.foreground#D8DEE9
  • terminalCursor.foreground#FFCC00
  • titleBar.activeBackground#1C1E26
  • titleBar.activeForeground#D8DEE9
  • titleBar.border#2E3440
  • titleBar.inactiveBackground#1C1E26
  • titleBar.inactiveForeground#4C566A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A1A1A1italic
string, constant.other.symbol#B3E85F
constant.numeric#C084FCbold
constant.language.boolean, constant.language#8BE9FDbold
keyword, storage.type, storage.modifier#FFCC00bold
keyword.operator#FF5F5F
variable, identifier, variable.language#FFFFFF
entity.name.function, support.function, meta.function-call#5FD4FB
variable.parameter#FFB86C
entity.name.type, support.type, entity.name.class#50FA7B
support.constant, constant.other#FFFF99
punctuation, punctuation.definition.parameters#AAAAAA
invalid, invalid.illegal#FFFFFF
markup.heading#FFB86Cbold
markup.list#F1A8FF
markup.bold#FFD700bold
markup.italic, markup.quote#9AEDFEitalic
meta.object-literal.key#FFD700
entity.name.tag#FF6B6B
support.class.component#D291FF
support.type.property-name#FF9F40
meta.jsx.children#A4F9C8
meta.tag.attributes, entity.other.attribute-name.jsx#8BE9FD
variable.other.readwrite.js, variable.other.readwrite.ts#FFFFFF
storage.type.function.arrow#8BE9FD
meta.brace.round, meta.brace.square, meta.brace.curly#FFCC00
meta.function#5FD4FB
entity.name.module.js, entity.name.module.ts#FF9F40
support.variable#F1A8FF
meta.import, meta.import.ts, meta.import.js#8BE9FD
keyword.control.flow#FF6B6Bbold
meta.decorator, meta.decorator punctuation, entity.name.function.decorator#FFCC00
entity.other.attribute-name#FFB86C
meta.enum#50FA7B
meta.type.annotation, meta.type#C084FC
keyword.other.unit#FFD700
meta.return-type#9AEDFE
meta.arrow#FFCC00
meta.embedded.block#50FA7B
meta.diff.header#8BE9FDbold
markup.inserted#50FA7Bitalic
markup.deleted#FF6B6Bitalic
markup.inline.raw#FFCC00italic
meta.structure.dictionary.json string.quoted.double.json#FFCC00
markup.underline#FFCC00underline
markup.strikethrough#FF6B6Bstrikethrough
constant.character.escape#9AEDFEbold
meta.annotation#FFD700
support.type.property-name.json#FF9F40