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#c0392b
  • activityBar.background#27293d
  • activityBar.foreground#b0b0c5
  • activityBarBadge.background#d4af37
  • activityBarBadge.foreground#1e1e2f
  • badge.background#d4af37
  • badge.foreground#1e1e2f
  • button.background#c0392b
  • button.foreground#ffffff
  • button.hoverBackground#e74c3c
  • dropdown.background#27293d
  • dropdown.border#3a3c5e
  • dropdown.foreground#d0d0e0
  • editor.background#1e1e2f
  • editor.findMatchBackground#c0392b
  • editor.findMatchHighlightBackground#e67e22
  • editor.foreground#d0d0e0
  • editor.lineHighlightBackground#2a2b40
  • editor.lineHighlightBorder#3a3c5e
  • editor.selectionBackgroundrgba(212,175,55,0.3)
  • editor.selectionHighlightBackgroundrgba(30,144,255,0.2)
  • editorBracketMatch.backgroundrgba(30,144,255,0.1)
  • editorBracketMatch.border#2980b9
  • editorCursor.foreground#d4af37
  • editorGroupHeader.tabsBackground#212332
  • editorIndentGuide.activeBackground#555566
  • editorIndentGuide.background#333344
  • editorLineNumber.activeForeground#d0d0e0
  • editorLineNumber.foreground#555566
  • editorWhitespace.foreground#555566
  • focusBorder#c0392b
  • gitDecoration.conflictingResourceForeground#e67e22
  • gitDecoration.deletedResourceForeground#c0392b
  • gitDecoration.modifiedResourceForeground#2980b9
  • gitDecoration.untrackedResourceForeground#2ecc71
  • input.background#27293d
  • input.border#3a3c5e
  • input.foreground#d0d0e0
  • input.placeholderForeground#555566
  • inputOption.activeBorder#d4af37
  • list.activeSelectionBackground#3a3c5e
  • list.activeSelectionForeground#d0d0e0
  • list.focusBackground#2a2b40
  • list.highlightForeground#d4af37
  • list.hoverBackground#2a2b40
  • minimap.background#212332
  • minimapSlider.activeBackgroundrgba(255,255,255,0.4)
  • minimapSlider.backgroundrgba(255,255,255,0.2)
  • minimapSlider.hoverBackgroundrgba(255,255,255,0.3)
  • panel.background#212332
  • panel.border#1e1e2f
  • panelTitle.activeBorder#d4af37
  • panelTitle.activeForeground#d0d0e0
  • panelTitle.inactiveForeground#8a8aa0
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackgroundrgba(255,255,255,0.3)
  • scrollbarSlider.backgroundrgba(255,255,255,0.1)
  • scrollbarSlider.hoverBackgroundrgba(255,255,255,0.2)
  • sideBar.background#212332
  • sideBar.foreground#c0c0d5
  • sideBarSectionHeader.background#27293d
  • sideBarSectionHeader.foreground#b0b0c5
  • sideBarTitle.foreground#c0c0d5
  • statusBar.background#27293d
  • statusBar.debuggingBackground#c0392b
  • statusBar.foreground#d0d0e0
  • statusBar.noFolderBackground#212332
  • statusBarItem.hoverBackground#3a3c5e
  • tab.activeBackground#212332
  • tab.activeBorder#d4af37
  • tab.activeForeground#d0d0e0
  • tab.border#1e1e2f
  • tab.inactiveBackground#1e1e2f
  • tab.inactiveForeground#8a8aa0
  • terminal.ansiBlue#2980b9
  • terminal.ansiBrightBlue#3498db
  • terminal.ansiBrightCyan#48c9b0
  • terminal.ansiBrightGreen#58d68d
  • terminal.ansiBrightMagenta#e74c3c
  • terminal.ansiBrightRed#e74c3c
  • terminal.ansiBrightYellow#f1c40f
  • terminal.ansiCyan#1abc9c
  • terminal.ansiGreen#2ecc71
  • terminal.ansiMagenta#c0392b
  • terminal.ansiRed#c0392b
  • terminal.ansiYellow#d4af37
  • terminal.background#1e1e2f
  • terminal.foreground#d0d0e0
  • titleBar.activeBackground#27293d
  • titleBar.activeForeground#d0d0e0
  • titleBar.inactiveBackground#1e1e2f
  • titleBar.inactiveForeground#8a8aa0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555566italic
string, string.quoted, string.template#1abc9c
keyword, storage.type, storage.modifier#c0392bbold
keyword.operator, punctuation.accessor#2980b9
variable, variable.other#d0d0e0
variable.parameter#d4af37italic
entity.name.function, support.function#2ecc71
meta.function-call#58d68d
entity.name.class, entity.name.type.class, support.class#e67e22bold
entity.name.type, support.type#d4af37
entity.name.type.interface#c0392bitalic
constant.numeric#e67e22
constant, constant.language, constant.character#2980b9
constant.language.boolean#c0392bbold
variable.other.property, support.variable.property#1abc9c
meta.object-literal.key#e67e22
entity.name.tag, punctuation.definition.tag#c0392b
entity.other.attribute-name#d4af37italic
punctuation, meta.brace#555566
string.regexp#e67e22
constant.character.escape#d4af37
meta.decorator, punctuation.decorator#2980b9
invalid, invalid.illegal#e74c3cstrikethrough
markup.heading, entity.name.section#d4af37bold
markup.bold#d4af37bold
markup.italic#1abc9citalic
markup.underline.link#2980b9
markup.inline.raw, markup.fenced_code#2ecc71
support.type.property-name.json#e67e22
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#c0392b
support.type.property-name.css#d4af37
support.constant.property-value.css#1abc9c