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#9999cc
  • activityBar.border#9999cc
  • activityBar.foreground#000000
  • activityBar.inactiveForeground#44447a
  • activityBarBadge.background#ff7744
  • activityBarBadge.foreground#000000
  • badge.background#ff7744
  • badge.foreground#000000
  • breadcrumb.background#1a1a1a
  • breadcrumb.focusForeground#ffdd88
  • breadcrumb.foreground#ffcc55
  • button.background#cc7744
  • button.foreground#000000
  • button.hoverBackground#dd8855
  • dropdown.background#e8d8b8
  • dropdown.border#c4a870
  • dropdown.foreground#3a1a00
  • editor.background#141414
  • editor.findMatchBackground#ffb30075
  • editor.findMatchHighlightBackground#ffb30040
  • editor.foreground#ffcc55
  • editor.inactiveSelectionBackground#ffb30030
  • editor.lineHighlightBackground#222222
  • editor.selectionBackground#ffb30055
  • editor.selectionHighlightBackground#ffb30030
  • editor.wordHighlightBackground#aa88cc40
  • editor.wordHighlightStrongBackground#aa88cc60
  • editorBracketMatch.background#ffb30055
  • editorBracketMatch.border#ffdd00
  • editorCursor.foreground#ffdd00
  • editorGroup.border#d4c4a0
  • editorGroupHeader.noTabsBackground#e8d8b8
  • editorGroupHeader.tabsBackground#e8d8b8
  • editorGroupHeader.tabsBorder#d4c4a0
  • editorIndentGuide.activeBackground#666666
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#ffcc00
  • editorLineNumber.foreground#555555
  • editorOverviewRuler.border#333333
  • editorWhitespace.foreground#333333
  • focusBorder#ffb300
  • input.background#222222
  • input.border#444444
  • input.foreground#ffcc55
  • input.placeholderForeground#666666
  • inputOption.activeBackground#333333
  • inputOption.activeBorder#ff7744
  • list.activeSelectionBackground#333333
  • list.activeSelectionForeground#ffcc00
  • list.focusBackground#333333
  • list.highlightForeground#ffdd88
  • list.hoverBackground#222222
  • list.inactiveSelectionBackground#222222
  • menu.background#1a1a1a
  • menu.border#333333
  • menu.foreground#ffcc55
  • menu.selectionBackground#333333
  • menu.selectionForeground#ffdd88
  • notifications.background#1a1a1a
  • notifications.border#333333
  • notifications.foreground#ffcc55
  • notificationToast.border#ff7744
  • panel.background#1a1a1a
  • panel.border#333333
  • panelTitle.activeBorder#ff7744
  • panelTitle.activeForeground#ffcc55
  • panelTitle.inactiveForeground#666666
  • progressBar.background#ffb300
  • scrollbar.shadow#00000030
  • scrollbarSlider.activeBackground#c4a870cc
  • scrollbarSlider.background#c4a87060
  • scrollbarSlider.hoverBackground#c4a87099
  • selection.background#ffb30050
  • sideBar.background#1a1a1a
  • sideBar.border#333333
  • sideBar.foreground#ffcc55
  • sideBarSectionHeader.background#222222
  • sideBarSectionHeader.border#444444
  • sideBarSectionHeader.foreground#ffcc55
  • sideBarTitle.foreground#ffdd88
  • statusBar.background#ff7744
  • statusBar.debuggingBackground#cc3300
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#cc5522
  • statusBarItem.hoverBackground#ff9966
  • statusBarItem.remoteBackground#dd5533
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#141414
  • tab.activeBorderTop#ffb300
  • tab.activeForeground#ffcc00
  • tab.border#d4c4a0
  • tab.inactiveBackground#e0d0b0
  • tab.inactiveForeground#7a5a20
  • terminal.ansiBlack#141414
  • terminal.ansiBlue#aa99dd
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightMagenta#ff55bb
  • terminal.ansiBrightWhite#ffeecc
  • terminal.ansiBrightYellow#ffdd00
  • terminal.ansiCyan#ffdd88
  • terminal.ansiGreen#77bbaa
  • terminal.ansiMagenta#dd6688
  • terminal.ansiRed#dd5566
  • terminal.ansiWhite#ffcc99
  • terminal.ansiYellow#ffb300
  • terminal.background#1a1a1a
  • terminal.foreground#ffcc55
  • titleBar.activeBackground#e8d8b8
  • titleBar.activeForeground#3a1a00
  • titleBar.border#d4c4a0
  • titleBar.inactiveBackground#e0d0b0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#dd9944italic
keyword, storage.type, storage.modifier#ffaabbbold
keyword.control#ffccddbold
string, string.quoted#fff0aa
constant.character.escape, string.regexp#fff8cc
constant.numeric, constant.language, constant.other#ddccff
entity.name.function, meta.function-call entity.name.function#ffe8cc
variable.parameter#ffcc99italic
variable, variable.other#ffdd55
entity.name.type, entity.name.class, support.class#ffccddbold
entity.name.interface, entity.other.inherited-class#ffbbccitalic
variable.other.property, support.type.property-name#ffcc88
keyword.operator#ffaabb
punctuation#ddaa44
entity.name.tag#ddccff
entity.other.attribute-name#fff0aa
meta.decorator, punctuation.decorator#ffccdditalic
entity.name.tag.css, entity.other.attribute-name.class.css#ddccff
support.constant.property-value.css#fff0aa
invalid#ff6688underline bold