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#21252B
  • activityBar.foreground#D7DAE0
  • activityBarBadge.background#4D78CC
  • activityBarBadge.foreground#F8FAFD
  • badge.background#282c34
  • button.background#404754
  • debugToolBar.background#21252b
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#1d1f23
  • dropdown.border#181A1F
  • editor.background#282c34
  • editor.findMatchBackground#42557B
  • editor.findMatchBorder#457dff
  • editor.findMatchHighlightBackground#314365
  • editor.lineHighlightBackground#2c313c
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffffff10
  • editor.selectionHighlightBorder#ddd
  • editor.wordHighlightBackground#484e5b
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#7f848e
  • editorActiveLineNumber.foreground#737984
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#528bff
  • editorError.foreground#c24038
  • editorGroup.background#181A1F
  • editorGroup.border#181A1F
  • editorGroupHeader.tabsBackground#21252B
  • editorHoverWidget.background#21252B
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.background#3B4048
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#21252b
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#21252B
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWhitespace.foreground#3B4048
  • editorWidget.background#21252B
  • focusBorder#21252b
  • 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#282c34
  • statusBar.background#21252B
  • statusBar.debuggingBackground#7e0097
  • statusBar.debuggingBorder#66017a
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252B
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#2c313a
  • tab.border#181A1F
  • tab.hoverBackground#323842
  • tab.inactiveBackground#21252B
  • tab.unfocusedHoverBackground#323842
  • titleBar.activeBackground#282c34
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#21252B
  • titleBar.inactiveForeground#6B717D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#656c7c
punctuation.definition.arguments, punctuation.definition.parameters, punctuation.accessor, constant, keyword.operator.new, support.class, entity.other.alias, variable.language.this, variable.language.this punctuation, source.css keyword.other.unit#eeb08b
string#9bca79
keyword.operator.assignment, keyword.operator.class, keyword.operator.key, keyword.operator.string, entity, punctuation, support.type.property-name, source.js punctuation.definition.parameters, support.type.vendored.property-name, meta.property-value, source.css support.constant.property-value, source.css meta.property-value#acb3c2
variable, variable punctuation, entity.name.tag#db888f
support, punctuation.definition.storage-type, punctuation.definition.array, source.css entity.name.function, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#66bcd6
storage, keyword.operator, keyword.operator.ternary, keyword, source.css keyword.control.at-rule punctuation, punctuation.section.embedded#cc8eff
entity.other.attribute-name#d1af70
punctuation.section.array, meta.other.type.phpdoc keyword.other.type#848c9e
variable.language.this, meta.other.type.phpdoc keyword.other.typeitalic