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#ffffff
  • activityBar.foreground#424242
  • badge.background#e6f3ff
  • breadcrumb.activeSelectionForeground#333333
  • breadcrumb.background#fefefe
  • breadcrumb.focusForeground#333333
  • breadcrumb.foreground#6f6f6f
  • breadcrumbPicker.background#fefefe
  • button.background#268bd2
  • button.foreground#ffffff
  • button.hoverBackground#1a6aa8
  • button.secondaryBackground#657b83
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#586e75
  • debugConsole.errorForeground#dc322f
  • debugConsole.infoForeground#268bd2
  • debugConsole.sourceForeground#93a1a1
  • debugConsole.warningForeground#b58900
  • editor.background#fdf6e3
  • editor.findMatchBackground#faf6e820
  • editor.findMatchBorder#b58900
  • editor.findMatchHighlightBackground#faf6e820
  • editor.findMatchHighlightBorder#b58900
  • editor.foreground#586e75
  • editor.hoverHighlightBackground#eaffea
  • editor.inactiveSelectionBackground#00000018
  • editor.lineHighlightBorder#bdc3c740
  • editor.selectionBackground#00000015
  • editor.wordHighlightBackground#57575710
  • editor.wordHighlightBorder#829ca4
  • editorCursor.foreground#657b83
  • editorError.foreground#dc322f
  • editorGroupHeader.tabsBackground#fefefe
  • editorInfo.foreground#268bd2
  • editorLineNumber.foreground#93a1a1
  • editorWarning.foreground#b58900
  • editorWidget.background#fefefe
  • editorWidget.border#e0e0e0
  • input.background#ffffff
  • input.border#cccccc
  • input.foreground#333333
  • list.activeSelectionBackground#e6f3ff
  • list.activeSelectionForeground#333333
  • list.hoverBackground#00000016
  • panel.background#fefefe
  • panel.border#f0f0f0
  • panelTitle.activeBorder#007acc
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#1a1a1a
  • problemsErrorIcon.foreground#e51400
  • problemsInfoIcon.foreground#1ba1e2
  • problemsWarningIcon.foreground#f0a30a
  • scrollbarSlider.activeBackground#586e7577
  • scrollbarSlider.background#333c3c33
  • scrollbarSlider.hoverBackground#586e7555
  • selection.background#e6f3ff
  • sideBar.background#fefefe
  • sideBar.border#f0f0f0
  • sideBar.foreground#1a1a1a
  • sideBarSectionHeader.background#fafafa
  • sideBarSectionHeader.border#e7e7e7
  • sideBarSectionHeader.foreground#6f6f6f
  • sideBarTitle.foreground#333333
  • statusBar.background#002b36
  • statusBar.foreground#eee8d5
  • statusBar.noFolderBackground#002b36
  • statusBar.noFolderForeground#eee8d5
  • statusBarItem.prominentBackground#268bd2
  • statusBarItem.prominentForeground#ffffff
  • statusBarItem.prominentHoverBackground#1a6aa8
  • statusBarItem.prominentHoverForeground#ffffff
  • statusBarItem.remoteBackground#268bd2
  • statusBarItem.remoteForeground#ffffff
  • statusBarItem.remoteHoverBackground#1a6aa8
  • statusBarItem.remoteHoverForeground#ffffff
  • tab.activeBackground#fefefe
  • tab.activeBorder#268bd2
  • tab.activeForeground#333333
  • tab.border#e7e7e7
  • tab.inactiveBackground#f7f7f7
  • tab.inactiveForeground#6f6f6f
  • terminal.ansiBlack#002831
  • terminal.ansiBlue#2176c7
  • terminal.ansiBrightBlack#006488
  • terminal.ansiBrightBlue#178ec8
  • terminal.ansiBrightCyan#00b39e
  • terminal.ansiBrightGreen#51ef84
  • terminal.ansiBrightMagenta#e24d8e
  • terminal.ansiBrightRed#f5163b
  • terminal.ansiBrightWhite#fcf4dc
  • terminal.ansiBrightYellow#b27e28
  • terminal.ansiCyan#259286
  • terminal.ansiGreen#6cbe6c
  • terminal.ansiMagenta#c61c6f
  • terminal.ansiRed#d11c24
  • terminal.ansiWhite#eae3cb
  • terminal.ansiYellow#a57706
  • terminal.background#001e27
  • terminal.foreground#9cc2c3
  • terminal.selectionBackground#003748
  • terminal.selectionForeground#7a8f8e
  • terminalCursor.background#001e27
  • terminalCursor.foreground#9cc2c3
  • textLink.activeForeground#004999
  • textLink.foreground#0066cc
  • titleBar.activeBackground#f4f4f4
  • titleBar.activeForeground#333333
  • titleBar.border#f0f0f0
  • titleBar.inactiveBackground#fefefe
  • titleBar.inactiveForeground#6f6f6f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#859901italic
keyword#B58900
storage.type, storage.modifier#B58900
entity.name.namespace#845eda
meta.function.call#6c71c4
constant.other#8d1d98
entity.name.function.macro#c27203
keyword.control#859900
keyword.operator#586e75
string, string.quoted#2AA198
constant.numeric, constant.language#CB4B16
constant.character.escape#D33682bold
entity.name.function, support.function#00617a
entity.name.class, support.type, support.class#B58900
entity.name.type#a04908
entity.name.type.class.abstractitalic
entity.name.type.resultitalic
variable, support.variable#657B83
variable.parameter#CB4B16
entity.name.tag#268BD2bold
entity.other.attribute-name#657B83
meta.annotation, storage.type.annotation#859900
entity.name.function.decorator, meta.decorator#6C71C4
constant.language.boolean#268BD2
invalid, invalid.illegal#DC322F
invalid.deprecated#DC322Fstrikethrough
markup.heading#CB4B16bold
markup.boldbold
markup.italicitalic
markup.underline.link#268BD2
punctuation.definition.string.begin, punctuation.definition.string.end#2AA198
punctuation#3f9100