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#4a90e2
  • activityBar.background#222222
  • activityBar.foreground#e0e0e0
  • activityBarBadge.background#e67e22
  • activityBarBadge.foreground#ffffff
  • badge.background#e67e22
  • badge.foreground#ffffff
  • button.background#4a90e2
  • button.foreground#ffffff
  • button.hoverBackground#5b9bd5
  • dropdown.background#292929
  • dropdown.border#555555
  • dropdown.foreground#e0e0e0
  • editor.background#1b1b1b
  • editor.findMatchBackground#e67e22
  • editor.findMatchHighlightBackground#e67e22aa
  • editor.foreground#c8c8c8
  • editor.lineHighlightBackground#2a2a2a
  • editor.lineHighlightBorder#444444
  • editor.selectionBackground#4a90e2
  • editor.selectionHighlightBackground#5b9bd5
  • editorBracketMatch.background#2c7a7b33
  • editorBracketMatch.border#2c7a7b
  • editorCursor.foreground#f1c40f
  • editorGroupHeader.tabsBackground#1b1b1b
  • editorIndentGuide.activeBackground#4a90e2
  • editorIndentGuide.background#3a3a3a
  • editorLineNumber.activeForeground#f1c40f
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#555555
  • focusBorder#4a90e2
  • gitDecoration.conflictingResourceForeground#e67e22
  • gitDecoration.deletedResourceForeground#e74c3c
  • gitDecoration.modifiedResourceForeground#f1c40f
  • gitDecoration.untrackedResourceForeground#2ecc71
  • input.background#292929
  • input.border#555555
  • input.foreground#e0e0e0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#4a90e2
  • list.activeSelectionBackground#4a90e2
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#3a3a3a
  • list.highlightForeground#f1c40f
  • list.hoverBackground#333333
  • minimap.background#1b1b1b
  • minimapSlider.activeBackground#999999cc
  • minimapSlider.background#55555566
  • minimapSlider.hoverBackground#777777aa
  • panel.background#1b1b1b
  • panel.border#444444
  • panelTitle.activeBorder#4a90e2
  • panelTitle.activeForeground#f5f5f5
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#999999cc
  • scrollbarSlider.background#55555566
  • scrollbarSlider.hoverBackground#777777aa
  • sideBar.background#242424
  • sideBar.foreground#d0d0d0
  • sideBarSectionHeader.background#2c2c2c
  • sideBarSectionHeader.foreground#f1c40f
  • sideBarTitle.foreground#e0e0e0
  • statusBar.background#333333
  • statusBar.debuggingBackground#c0392b
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#444444
  • statusBarItem.hoverBackground#4a90e2
  • tab.activeBackground#292929
  • tab.activeBorder#4a90e2
  • tab.activeForeground#ffffff
  • tab.border#444444
  • tab.inactiveBackground#1e1e1e
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#4a90e2
  • 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#1b1b1b
  • terminal.foreground#c8c8c8
  • titleBar.activeBackground#2a2a2a
  • titleBar.activeForeground#f5f5f5
  • titleBar.inactiveBackground#1f1f1f
  • titleBar.inactiveForeground#a0a0a0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#2ecc71
keyword, storage.type, storage.modifier#e67e22bold
keyword.operator, punctuation.accessor#e0e0e0
variable, variable.other#d0d0d0
variable.parameter#f1c40fitalic
entity.name.function, support.function#4a90e2
meta.function-call#5b9bd5
entity.name.class, entity.name.type.class, support.class#9b59b6bold
entity.name.type, support.type#1abc9c
entity.name.type.interface#48c9b0italic
constant.numeric#e67e22
constant, constant.language, constant.character#e67e22
constant.language.boolean#e67e22bold
variable.other.property, support.variable.property#f1c40f
meta.object-literal.key#4a90e2
entity.name.tag, punctuation.definition.tag#e74c3c
entity.other.attribute-name#e74c3citalic
punctuation, meta.brace#c8c8c8
string.regexp#e67e22
constant.character.escape#e74c3c
meta.decorator, punctuation.decorator#9b59b6
invalid, invalid.illegal#ff0000strikethrough
markup.heading, entity.name.section#f1c40fbold
markup.bold#e67e22bold
markup.italic#e0e0e0italic
markup.underline.link#4a90e2
markup.inline.raw, markup.fenced_code#1abc9c
support.type.property-name.json#4a90e2
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9b59b6
support.type.property-name.css#2ecc71
support.constant.property-value.css#e67e22