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—