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#2d2e30
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#4d78cc
  • activityBarBadge.foreground#f8fafd
  • badge.background#2d2e30
  • button.background#404754
  • debugToolBar.background#21252b
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#21252b
  • dropdown.border#21252b
  • editor.background#2d2e30
  • editor.findMatchBackground#ff6c0000
  • editor.findMatchBorder#eaeaea
  • editor.findMatchHighlightBackground#ffdb6740
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#1f2122
  • editor.selectionBackground#005a5a90
  • editor.selectionHighlightBackground#ffffff00
  • editor.selectionHighlightBorder#ffffff00
  • editor.wordHighlightBackground#ffffff00
  • editor.wordHighlightBorder#ffffff00
  • editor.wordHighlightStrongBackground#ffffff00
  • editor.wordHighlightStrongBorder#ffffff00
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#ffffff00
  • editorCursor.foreground#f0f0f0
  • editorError.foreground#c24038
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#21252b
  • editorHoverWidget.background#21252b
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.activeBackground#6d6d6d
  • editorIndentGuide.background#414141
  • editorLineNumber.activeForeground#DDDDDD
  • editorLineNumber.foreground#5b626f
  • editorMarkerNavigation.background#21252b
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#21252b
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWhitespace.foreground#3b4048
  • editorWidget.background#21252b
  • focusBorder#464646
  • input.background#1d1f23
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383e4a
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#292d35
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • peekViewEditor.matchHighlightBackground#29244b
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#21252b
  • sideBarSectionHeader.background#2d2e30
  • statusBar.background#21252b
  • statusBar.debuggingBackground#7e0097
  • statusBar.debuggingBorder#66017a
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252b
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#2d2e30
  • tab.border#181a1f
  • tab.hoverBackground#323842
  • tab.inactiveBackground#21252b
  • tab.unfocusedHoverBackground#323842
  • terminal.ansiBlack#2d3139
  • terminal.ansiBlue#61afef
  • terminal.ansiBrightBlack#7f848e
  • terminal.ansiBrightBlue#528bff
  • terminal.ansiBrightCyan#56b6c2
  • terminal.ansiBrightGreen#98c379
  • terminal.ansiBrightMagenta#7e0097
  • terminal.ansiBrightRed#f44747
  • terminal.ansiBrightWhite#d7dae0
  • terminal.ansiBrightYellow#e5c07b
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#c37ad2
  • terminal.ansiRed#ff4e6b
  • terminal.ansiWhite#d7dae0
  • terminal.ansiYellow#e5c07b
  • terminal.foreground#c8c8c8
  • textLink.foreground#61afef
  • titleBar.activeBackground#2d2e30
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#21252b
  • titleBar.inactiveForeground#6b717d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, variable.other, support.type.property-name, entity.name, entity.name.type.module, keyword.other.unit, variable.other.constant.property#DDDDDD
entity.name.function, support.function#7fc5ff
entity.name.type.class, keyword.operator.new, entity.other.attribute-name#90eaea
constant.numeric, keyword.operator.arithmetic, constant.language.boolean#b7d8f5
keyword.control, keyword.operator.expression#BCFF8A
keyword.operator#fa5c5c
variable.language#eac682italic
entity.name.type, keyword#B9A9FF
punctuation.separator, keyword.operator.assignment, punctuation.definition, punctuation.accessor, punctuation.support, keyword.operator.type.annotation#b7c0d1
comment, punctuation.definition.comment#8A917F
storage, keyword.operator.assignment#F3FD6A
string, string.regexp#FD97B7
variable.parameter, entity.name.type.parameter#f9cbff
variable.other.constant, support.constant.property-value, constant, support.class.component#eac682
support.type.primitive, support.type.builtin#dd8af7