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#e6e6e6
  • activityBar.foreground#000000
  • activityBarBadge.background#1874cd
  • activityBarBadge.foreground#ffffff
  • badge.background#008b00
  • badge.foreground#ffffff
  • button.background#1874cd
  • button.foreground#ffffff
  • button.hoverBackground#1e90ff
  • dropdown.background#ffffff
  • dropdown.border#e6e6e6
  • dropdown.foreground#000000
  • editor.background#ffffff
  • editor.findMatchBackground#98f5ff
  • editor.findMatchHighlightBackground#98f5ff80
  • editor.foreground#000000
  • editor.lineHighlightBackground#f1f5fa
  • editor.selectionBackground#72f7ff
  • editor.selectionHighlightBackground#72f7ff80
  • editorBracketMatch.background#ab82ff
  • editorBracketMatch.border#ffffff
  • editorCursor.foreground#000000
  • editorError.foreground#cd0000
  • editorIndentGuide.activeBackground1#d0d0d0
  • editorIndentGuide.background1#e6e6e6
  • editorInfo.foreground#1874cd
  • editorLineNumber.activeForeground#000000
  • editorLineNumber.foreground#888888
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#e6e6e6
  • editorSuggestWidget.foreground#000000
  • editorSuggestWidget.highlightForeground#458b74
  • editorSuggestWidget.selectedBackground#98f5ff
  • editorWarning.foreground#ff8c00
  • editorWhitespace.foreground#e6e6e6
  • editorWidget.background#ffffff
  • editorWidget.border#e6e6e6
  • input.background#ffffff
  • input.border#e6e6e6
  • input.foreground#000000
  • inputOption.activeBorder#1874cd
  • list.activeSelectionBackground#98f5ff
  • list.activeSelectionForeground#000000
  • list.focusBackground#98f5ff
  • list.hoverBackground#f1f5fa
  • list.inactiveSelectionBackground#f1f5fa
  • panel.background#ffffff
  • panel.border#e6e6e6
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#888888
  • progressBar.background#1874cd
  • scrollbarSlider.activeBackground#00000066
  • scrollbarSlider.background#88888866
  • scrollbarSlider.hoverBackground#666666b3
  • sideBar.background#e6e6e6
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#e6e6e6
  • statusBar.debuggingBackground#cd0000
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#e6e6e6
  • statusBarItem.prominentBackground#1874cd
  • tab.activeBackground#ffffff
  • tab.activeBorder#1874cd
  • tab.activeForeground#000000
  • tab.border#e6e6e6
  • tab.inactiveBackground#e6e6e6
  • tab.inactiveForeground#888888
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#e6e6e6
  • titleBar.inactiveForeground#888888

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#0000eeitalic
string, string.quoted, string.template#4a708b
constant.numeric#ff8c00
constant.language.boolean, constant.language.null#cd0000
keyword, storage.type, storage.modifier, storage.type.function#800000bold
entity.name.function, meta.function-call.generic, support.function#458b74
variable, variable.other, variable.parameter#458b74
entity.name.type, entity.name.class, support.type, support.class#008b00bold
constant, constant.other, constant.language#ff8c00
keyword.control.import, keyword.control.from, entity.name.function.preprocessor, meta.preprocessor#1874cd
entity.name.tag, punctuation.definition.tag#800000
entity.other.attribute-name#458b74
keyword.operator, punctuation#000000
variable.language, support.variable#8a2be2
string.regexp#4a708b
comment.todo, comment.note, comment.fixme, comment.hack, comment.xxx#006400
invalid, invalid.illegal#cd0000
markup.heading, entity.name.section.markdown#1874cdbold
markup.bold.markdown#458b74bold
markup.italic.markdown#4a708bitalic
markup.inline.raw.markdown, markup.fenced_code.block.markdown#4a708b
support.type.property-name.json#458b74
support.type.property-name.css#458b74
support.constant.property-value.css#4a708b