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.activeBorder#e65100
  • activityBar.background#4a90e2
  • activityBar.foreground#ffffff
  • activityBarBadge.background#e65100
  • activityBarBadge.foreground#ffffff
  • badge.background#7a7a7a
  • badge.foreground#ffffff
  • button.background#e65100
  • button.foreground#ffffff
  • button.hoverBackground#c43d00
  • dropdown.background#ffffff
  • dropdown.border#c0c0c0
  • dropdown.foreground#2b2b2b
  • editor.background#ffffff
  • editor.findMatchBackground#ffb84d
  • editor.findMatchHighlightBackground#ffe0b2
  • editor.foreground#2b2b2b
  • editor.lineHighlightBackground#fffbeb
  • editor.lineHighlightBorder#ffb84d
  • editor.selectionBackground#cce5ff
  • editor.selectionHighlightBackground#e6f2ff
  • editorBracketMatch.background#e6f2ff
  • editorBracketMatch.border#4a90e2
  • editorCursor.foreground#e65100
  • editorGroupHeader.tabsBackground#f5f5f5
  • editorIndentGuide.activeBackground#7a7a7a
  • editorIndentGuide.background#e0e0e0
  • editorLineNumber.activeForeground#4a90e2
  • editorLineNumber.foreground#7a7a7a
  • editorWhitespace.foreground#d0d0d0
  • focusBorder#4a90e2
  • gitDecoration.conflictingResourceForeground#c86ef9
  • gitDecoration.deletedResourceForeground#e65100
  • gitDecoration.modifiedResourceForeground#ffb84d
  • gitDecoration.untrackedResourceForeground#7ed321
  • input.background#ffffff
  • input.border#c0c0c0
  • input.foreground#2b2b2b
  • input.placeholderForeground#a0a0a0
  • inputOption.activeBorder#e65100
  • list.activeSelectionBackground#cce5ff
  • list.activeSelectionForeground#2b2b2b
  • list.focusBackground#fffbeb
  • list.highlightForeground#e65100
  • list.hoverBackground#e6f2ff
  • minimap.background#ffffff
  • minimapSlider.activeBackground#808080
  • minimapSlider.background#c0c0c0
  • minimapSlider.hoverBackground#a0a0a0
  • panel.background#f5f5f5
  • panel.border#c0c0c0
  • panelTitle.activeBorder#e65100
  • panelTitle.activeForeground#4a90e2
  • panelTitle.inactiveForeground#7a7a7a
  • scrollbar.shadow#d0d0d0
  • scrollbarSlider.activeBackground#808080
  • scrollbarSlider.background#c0c0c0
  • scrollbarSlider.hoverBackground#a0a0a0
  • sideBar.background#f5f5f5
  • sideBar.foreground#2b2b2b
  • sideBarSectionHeader.background#e0e0e0
  • sideBarSectionHeader.foreground#2b2b2b
  • sideBarTitle.foreground#4a90e2
  • statusBar.background#7a7a7a
  • statusBar.debuggingBackground#b3502c
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#c0c0c0
  • statusBarItem.hoverBackground#ffb84d
  • tab.activeBackground#ffffff
  • tab.activeBorder#e65100
  • tab.activeForeground#4a90e2
  • tab.border#c0c0c0
  • tab.inactiveBackground#e0e0e0
  • tab.inactiveForeground#7a7a7a
  • terminal.ansiBlue#4a90e2
  • terminal.ansiBrightBlue#3f78c4
  • terminal.ansiBrightCyan#4eb9d3
  • terminal.ansiBrightGreen#6fb33e
  • terminal.ansiBrightMagenta#b15fde
  • terminal.ansiBrightRed#c54700
  • terminal.ansiBrightYellow#e09000
  • terminal.ansiCyan#5ac8fa
  • terminal.ansiGreen#7ed321
  • terminal.ansiMagenta#c86ef9
  • terminal.ansiRed#e65100
  • terminal.ansiYellow#ffb84d
  • terminal.background#ffffff
  • terminal.foreground#2b2b2b
  • titleBar.activeBackground#4a90e2
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#c0c0c0
  • titleBar.inactiveForeground#2b2b2b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a7a7aitalic
string, string.quoted, string.template#7ed321
keyword, storage.type, storage.modifier#e65100bold
keyword.operator, punctuation.accessor#4a90e2
variable, variable.other#2b2b2b
variable.parameter#ffb84ditalic
entity.name.function, support.function#c86ef9
meta.function-call#5ac8fa
entity.name.class, entity.name.type.class, support.class#4a90e2bold
entity.name.type, support.type#c86ef9
entity.name.type.interface#ffb84ditalic
constant.numeric#ffb84d
constant, constant.language, constant.character#e65100
constant.language.boolean#e65100bold
variable.other.property, support.variable.property#7ed321
meta.object-literal.key#4a90e2
entity.name.tag, punctuation.definition.tag#e65100
entity.other.attribute-name#ffb84ditalic
punctuation, meta.brace#7a7a7a
string.regexp#5ac8fa
constant.character.escape#c86ef9
meta.decorator, punctuation.decorator#c86ef9
invalid, invalid.illegal#e65100strikethrough
markup.heading, entity.name.section#4a90e2bold
markup.bold#e65100bold
markup.italic#ffb84ditalic
markup.underline.link#4a90e2
markup.inline.raw, markup.fenced_code#7ed321
support.type.property-name.json#4a90e2
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#e65100
support.type.property-name.css#7ed321
support.constant.property-value.css#ffb84d
themesmith by CyberBoost - VS Code Theme