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#e74c3c
  • activityBar.background#f5f5f5
  • activityBar.foreground#333333
  • activityBarBadge.background#e74c3c
  • activityBarBadge.foreground#ffffff
  • badge.background#e74c3c
  • badge.foreground#ffffff
  • button.background#e74c3c
  • button.foreground#ffffff
  • button.hoverBackground#c0392b
  • dropdown.background#ffffff
  • dropdown.border#c0c0c0
  • dropdown.foreground#222222
  • editor.background#ffffff
  • editor.findMatchBackground#ffe4b2
  • editor.findMatchHighlightBackground#fff0c2
  • editor.foreground#222222
  • editor.lineHighlightBackground#f0f8ff
  • editor.lineHighlightBorder#e0e0e0
  • editor.selectionBackground#cde8ff
  • editor.selectionHighlightBackground#d9eaff
  • editorBracketMatch.background#e0f7fa
  • editorBracketMatch.border#b2ebf2
  • editorCursor.foreground#e74c3c
  • editorGroupHeader.tabsBackground#fafafa
  • editorIndentGuide.activeBackground#c0c0c0
  • editorIndentGuide.background#e0e0e0
  • editorLineNumber.activeForeground#555555
  • editorLineNumber.foreground#999999
  • editorWhitespace.foreground#c0c0c0
  • focusBorder#e74c3c
  • gitDecoration.conflictingResourceForeground#9b59b6
  • gitDecoration.deletedResourceForeground#e74c3c
  • gitDecoration.modifiedResourceForeground#e67e22
  • gitDecoration.untrackedResourceForeground#2ecc71
  • input.background#ffffff
  • input.border#c0c0c0
  • input.foreground#222222
  • input.placeholderForeground#a0a0a0
  • inputOption.activeBorder#e74c3c
  • list.activeSelectionBackground#cde8ff
  • list.activeSelectionForeground#222222
  • list.focusBackground#cde8ff
  • list.highlightForeground#e74c3c
  • list.hoverBackground#e6f2ff
  • minimap.background#f5f5f5
  • minimapSlider.activeBackground#888888
  • minimapSlider.background#c0c0c0
  • minimapSlider.hoverBackground#a0a0a0
  • panel.background#fafafa
  • panel.border#d0d0d0
  • panelTitle.activeBorder#e74c3c
  • panelTitle.activeForeground#222222
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#bbbbbb
  • scrollbarSlider.activeBackground#555555
  • scrollbarSlider.background#99999966
  • scrollbarSlider.hoverBackground#777777
  • sideBar.background#fafafa
  • sideBar.foreground#2c2c2c
  • sideBarSectionHeader.background#eeeeee
  • sideBarSectionHeader.foreground#333333
  • sideBarTitle.foreground#222222
  • statusBar.background#e0e0e0
  • statusBar.debuggingBackground#c0392b
  • statusBar.foreground#222222
  • statusBar.noFolderBackground#d0d0d0
  • statusBarItem.hoverBackground#d5d5d5
  • tab.activeBackground#ffffff
  • tab.activeBorder#e74c3c
  • tab.activeForeground#222222
  • tab.border#d0d0d0
  • tab.inactiveBackground#f5f5f5
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#3498db
  • terminal.ansiBrightBlue#5dade2
  • terminal.ansiBrightCyan#48c9b0
  • terminal.ansiBrightGreen#58d68d
  • terminal.ansiBrightMagenta#af7ac5
  • terminal.ansiBrightRed#ec7063
  • terminal.ansiBrightYellow#f7dc6f
  • terminal.ansiCyan#1abc9c
  • terminal.ansiGreen#2ecc71
  • terminal.ansiMagenta#9b59b6
  • terminal.ansiRed#e74c3c
  • terminal.ansiYellow#f1c40f
  • terminal.background#ffffff
  • terminal.foreground#222222
  • titleBar.activeBackground#eaeaea
  • titleBar.activeForeground#222222
  • titleBar.inactiveBackground#f0f0f0
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6e6e6eitalic
string, string.quoted, string.template#2ecc71
keyword, storage.type, storage.modifier#e74c3cbold
keyword.operator, punctuation.accessor#3498db
variable, variable.other#222222
variable.parameter#9b59b6italic
entity.name.function, support.function#f39c12
meta.function-call#e67e22
entity.name.class, entity.name.type.class, support.class#e67e22bold
entity.name.type, support.type#9b59b6
entity.name.type.interface#9b59b6italic
constant.numeric#f1c40f
constant, constant.language, constant.character#e67e22
constant.language.boolean#e74c3cbold
variable.other.property, support.variable.property#1abc9c
meta.object-literal.key#1abc9c
entity.name.tag, punctuation.definition.tag#3498db
entity.other.attribute-name#1abc9citalic
punctuation, meta.brace#222222
string.regexp#e67e22
constant.character.escape#e74c3c
meta.decorator, punctuation.decorator#9b59b6
invalid, invalid.illegal#e74c3cstrikethrough
markup.heading, entity.name.section#e74c3cbold
markup.bold#e74c3cbold
markup.italic#e74c3citalic
markup.underline.link#3498db
markup.inline.raw, markup.fenced_code#2ecc71
support.type.property-name.json#9b59b6
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9b59b6
support.type.property-name.css#e67e22
support.constant.property-value.css#f1c40f