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#d9534f
  • activityBar.background#252540
  • activityBar.foreground#c0c0e0
  • activityBarBadge.background#d9534f
  • activityBarBadge.foreground#ffffff
  • badge.background#7ed321
  • badge.foreground#ffffff
  • button.background#d9534f
  • button.foreground#ffffff
  • button.hoverBackground#c43b35
  • dropdown.background#252540
  • dropdown.border#3a3a5a
  • dropdown.foreground#e0e0ff
  • editor.background#1e1e2f
  • editor.findMatchBackground#d9534f80
  • editor.findMatchHighlightBackground#d9534f50
  • editor.foreground#e0e0f0
  • editor.lineHighlightBackground#2d2d4a
  • editor.lineHighlightBorder#3b3b5d
  • editor.selectionBackground#4b4b70
  • editor.selectionHighlightBackground#5c5c8a
  • editorBracketMatch.background#4b4b70
  • editorBracketMatch.border#d9534f
  • editorCursor.foreground#e0e0ff
  • editorGroupHeader.tabsBackground#212134
  • editorIndentGuide.activeBackground#5c5c8a
  • editorIndentGuide.background#3a3a5a
  • editorLineNumber.activeForeground#e0e0ff
  • editorLineNumber.foreground#777799
  • editorWhitespace.foreground#555577
  • focusBorder#d9534f
  • gitDecoration.conflictingResourceForeground#bd10e0
  • gitDecoration.deletedResourceForeground#d9534f
  • gitDecoration.modifiedResourceForeground#f5a623
  • gitDecoration.untrackedResourceForeground#7ed321
  • input.background#252540
  • input.border#3a3a5a
  • input.foreground#e0e0ff
  • input.placeholderForeground#777799
  • inputOption.activeBorder#d9534f
  • list.activeSelectionBackground#4b4b70
  • list.activeSelectionForeground#f0f0ff
  • list.focusBackground#5c5c8a
  • list.highlightForeground#d9534f
  • list.hoverBackground#3a3a5a
  • minimap.background#1e1e2f
  • minimapSlider.activeBackground#d9534f
  • minimapSlider.background#3a3a5a
  • minimapSlider.hoverBackground#5c5c8a
  • panel.background#212134
  • panel.border#3a3a5a
  • panelTitle.activeBorder#d9534f
  • panelTitle.activeForeground#f0f0ff
  • panelTitle.inactiveForeground#a0a0c0
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#d9534f
  • scrollbarSlider.background#3a3a5a
  • scrollbarSlider.hoverBackground#5c5c8a
  • sideBar.background#212134
  • sideBar.foreground#c8c8e0
  • sideBarSectionHeader.background#27273f
  • sideBarSectionHeader.foreground#e0e0ff
  • sideBarTitle.foreground#e0e0ff
  • statusBar.background#2c2c44
  • statusBar.debuggingBackground#d9534f
  • statusBar.foreground#e0e0ff
  • statusBar.noFolderBackground#1e1e2f
  • statusBarItem.hoverBackground#3a3a5a
  • tab.activeBackground#252540
  • tab.activeBorder#d9534f
  • tab.activeForeground#f0f0ff
  • tab.border#3a3a5a
  • tab.inactiveBackground#1e1e2f
  • tab.inactiveForeground#a0a0c0
  • terminal.ansiBlue#4a90e2
  • terminal.ansiBrightBlue#6aaef5
  • terminal.ansiBrightCyan#70e9d6
  • terminal.ansiBrightGreen#9be85b
  • terminal.ansiBrightMagenta#c86de5
  • terminal.ansiBrightRed#e06c6c
  • terminal.ansiBrightYellow#f7b657
  • terminal.ansiCyan#50e3c2
  • terminal.ansiGreen#7ed321
  • terminal.ansiMagenta#bd10e0
  • terminal.ansiRed#d9534f
  • terminal.ansiYellow#f5a623
  • terminal.background#1e1e2f
  • terminal.foreground#e0e0ff
  • titleBar.activeBackground#252540
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#1e1e2f
  • titleBar.inactiveForeground#a0a0c0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777799italic
string, string.quoted, string.template#7ed321
keyword, storage.type, storage.modifier#d9534fbold
keyword.operator, punctuation.accessor#4a90e2
variable, variable.other#e0e0ff
variable.parameter#c0c0e0italic
entity.name.function, support.function#50e3c2
meta.function-call#f5a623
entity.name.class, entity.name.type.class, support.class#bd10e0bold
entity.name.type, support.type#4a90e2
entity.name.type.interface#4a90e2italic
constant.numeric#f5a623
constant, constant.language, constant.character#7ed321
constant.language.boolean#d9534fbold
variable.other.property, support.variable.property#e0e0ff
meta.object-literal.key#c0c0e0
entity.name.tag, punctuation.definition.tag#d9534f
entity.other.attribute-name#e0e0ffitalic
punctuation, meta.brace#c0c0e0
string.regexp#f5a623
constant.character.escape#bd10e0
meta.decorator, punctuation.decorator#4a90e2
invalid, invalid.illegal#ff5555strikethrough
markup.heading, entity.name.section#d9534fbold
markup.bold#d9534fbold
markup.italic#e0e0ffitalic
markup.underline.link#4a90e2
markup.inline.raw, markup.fenced_code#50e3c2
support.type.property-name.json#bd10e0
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#4a90e2
support.type.property-name.css#7ed321
support.constant.property-value.css#f5a623
themesmith by CyberBoost - VS Code Theme