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#ff5500
  • activityBar.background#e0e0e0
  • activityBar.foreground#ff5500
  • activityBarBadge.background#ff5500
  • activityBarBadge.foreground#fafafa
  • badge.background#ff5500
  • badge.foreground#fafafa
  • button.background#ff5500
  • button.foreground#fafafa
  • button.hoverBackground#ff7700
  • dropdown.background#f2f2f2
  • dropdown.border#c0c0c0
  • dropdown.foreground#2b2b2b
  • editor.background#fafafa
  • editor.findMatchBackground#ff5500aa
  • editor.findMatchHighlightBackground#ff550077
  • editor.foreground#2b2b2b
  • editor.lineHighlightBackground#ffd9c040
  • editor.lineHighlightBorder#ff5500
  • editor.selectionBackground#ff550040
  • editor.selectionHighlightBackground#ff550030
  • editorBracketMatch.background#ff550033
  • editorBracketMatch.border#ff5500
  • editorCursor.foreground#ff5500
  • editorGroupHeader.tabsBackground#fafafa
  • editorIndentGuide.activeBackground#ff550055
  • editorIndentGuide.background#bbbbbb44
  • editorLineNumber.activeForeground#ff5500
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#bbbbbb
  • focusBorder#ff5500
  • gitDecoration.conflictingResourceForeground#ffb400
  • gitDecoration.deletedResourceForeground#ff5500
  • gitDecoration.modifiedResourceForeground#ff5500
  • gitDecoration.untrackedResourceForeground#00c9a7
  • input.background#f2f2f2
  • input.border#c0c0c0
  • input.foreground#2b2b2b
  • input.placeholderForeground#777777
  • inputOption.activeBorder#ff5500
  • list.activeSelectionBackground#ff550080
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#ff550040
  • list.highlightForeground#ff5500
  • list.hoverBackground#ff550060
  • minimap.background#fafafa
  • minimapSlider.activeBackground#ff550066
  • minimapSlider.background#ff550022
  • minimapSlider.hoverBackground#ff550044
  • panel.background#fafafa
  • panel.border#d0d0d0
  • panelTitle.activeBorder#ff5500
  • panelTitle.activeForeground#ff5500
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#ff550088
  • scrollbarSlider.background#bbbbbb44
  • scrollbarSlider.hoverBackground#bbbbbb88
  • sideBar.background#f2f2f2
  • sideBar.foreground#2b2b2b
  • sideBarSectionHeader.background#e8e8e8
  • sideBarSectionHeader.foreground#ff5500
  • sideBarTitle.foreground#ff5500
  • statusBar.background#d8d8d8
  • statusBar.debuggingBackground#ff5500
  • statusBar.foreground#2b2b2b
  • statusBar.noFolderBackground#f2f2f2
  • statusBarItem.hoverBackground#c0c0c0
  • tab.activeBackground#fafafa
  • tab.activeBorder#ff5500
  • tab.activeForeground#ff5500
  • tab.border#e0e0e0
  • tab.inactiveBackground#f2f2f2
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#3874f2
  • terminal.ansiBrightBlue#6ea8ff
  • terminal.ansiBrightCyan#33ffe0
  • terminal.ansiBrightGreen#33ffcc
  • terminal.ansiBrightMagenta#e066ff
  • terminal.ansiBrightRed#ff7744
  • terminal.ansiBrightYellow#ffe066
  • terminal.ansiCyan#00c9a7
  • terminal.ansiGreen#00c9a7
  • terminal.ansiMagenta#d442ff
  • terminal.ansiRed#ff5500
  • terminal.ansiYellow#ffb400
  • terminal.background#fafafa
  • terminal.foreground#2b2b2b
  • titleBar.activeBackground#e0e0e0
  • titleBar.activeForeground#2b2b2b
  • titleBar.inactiveBackground#f5f5f5
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a0a0a0italic
string, string.quoted, string.template#00c9a7
keyword, storage.type, storage.modifier#ff5500bold
keyword.operator, punctuation.accessor#d442ff
variable, variable.other#2b2b2b
variable.parameter#ffb400italic
entity.name.function, support.function#3874f2
meta.function-call#5dbaff
entity.name.class, entity.name.type.class, support.class#ff7700bold
entity.name.type, support.type#3874f2
entity.name.type.interface#ffb400italic
constant.numeric#ff7700
constant, constant.language, constant.character#ffb400
constant.language.boolean#ff7700bold
variable.other.property, support.variable.property#00c9a7
meta.object-literal.key#5dbaff
entity.name.tag, punctuation.definition.tag#ff5500
entity.other.attribute-name#d442ffitalic
punctuation, meta.brace#777777
string.regexp#ff7700
constant.character.escape#d442ff
meta.decorator, punctuation.decorator#ffe066
invalid, invalid.illegal#e53935strikethrough
markup.heading, entity.name.section#ff5500bold
markup.bold#ff5500bold
markup.italic#d442ffitalic
markup.underline.link#3874f2
markup.inline.raw, markup.fenced_code#00c9a7
support.type.property-name.json#5dbaff
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffe066
support.type.property-name.css#3874f2
support.constant.property-value.css#00c9a7