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#ff5f57
  • activityBar.background#2a0d0d
  • activityBar.foreground#ff5f57
  • activityBarBadge.background#d73c3c
  • activityBarBadge.foreground#ffffff
  • badge.background#d73c3c
  • badge.foreground#ffffff
  • button.background#d73c3c
  • button.foreground#ffffff
  • button.hoverBackground#ff8a80
  • dropdown.background#210c0c
  • dropdown.border#5c2020
  • dropdown.foreground#f0d4d4
  • editor.background#1a0808
  • editor.findMatchBackground#ff5f5f80
  • editor.findMatchHighlightBackground#ff5f5f40
  • editor.foreground#f0d4d4
  • editor.lineHighlightBackground#d73c3c20
  • editor.lineHighlightBorder#d73c3c40
  • editor.selectionBackground#d73c3c60
  • editor.selectionHighlightBackground#d73c3c20
  • editorBracketMatch.background#ff5f5f33
  • editorBracketMatch.border#ff5f57
  • editorCursor.foreground#ff5f57
  • editorGroupHeader.tabsBackground#1a0808
  • editorIndentGuide.activeBackground#5c3a3a88
  • editorIndentGuide.background#5c3a3a44
  • editorLineNumber.activeForeground#ff5f57
  • editorLineNumber.foreground#7a4a4a
  • editorWhitespace.foreground#5c3a3a
  • focusBorder#d73c3c
  • gitDecoration.conflictingResourceForeground#ffff5f
  • gitDecoration.deletedResourceForeground#ff5f57
  • gitDecoration.modifiedResourceForeground#ffb86c
  • gitDecoration.untrackedResourceForeground#5fff5f
  • input.background#210c0c
  • input.border#5c2020
  • input.foreground#f0d4d4
  • input.placeholderForeground#7a4a4a
  • inputOption.activeBorder#ff5f57
  • list.activeSelectionBackground#d73c3c
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#d73c3c
  • list.highlightForeground#ff5f57
  • list.hoverBackground#d73c3c44
  • minimap.background#1a0808
  • minimapSlider.activeBackground#ff5f5f66
  • minimapSlider.background#ff5f5f22
  • minimapSlider.hoverBackground#ff5f5f44
  • panel.background#1a0808
  • panel.border#d73c3c
  • panelTitle.activeBorder#ff5f57
  • panelTitle.activeForeground#ff5f57
  • panelTitle.inactiveForeground#e0c8c8
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#ff5f5888
  • scrollbarSlider.background#7a4a4a44
  • scrollbarSlider.hoverBackground#7a4a4a88
  • sideBar.background#210c0c
  • sideBar.foreground#e0c8c8
  • sideBarSectionHeader.background#2a0d0d
  • sideBarSectionHeader.foreground#ff5f57
  • sideBarTitle.foreground#ff5f57
  • statusBar.background#d73c3c
  • statusBar.debuggingBackground#ff7b68
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#2a0d0d
  • statusBarItem.hoverBackground#ff8a80
  • tab.activeBackground#351212
  • tab.activeBorder#d73c3c
  • tab.activeForeground#ffffff
  • tab.border#1a0808
  • tab.inactiveBackground#210c0c
  • tab.inactiveForeground#e0c8c8
  • terminal.ansiBlue#5fafff
  • terminal.ansiBrightBlue#8fbaff
  • terminal.ansiBrightCyan#8fffff
  • terminal.ansiBrightGreen#8fff8f
  • terminal.ansiBrightMagenta#ff8fff
  • terminal.ansiBrightRed#ff8a80
  • terminal.ansiBrightYellow#ffff8a
  • terminal.ansiCyan#5ffaff
  • terminal.ansiGreen#5fff5f
  • terminal.ansiMagenta#ff5fff
  • terminal.ansiRed#ff5f57
  • terminal.ansiYellow#ffff5f
  • terminal.background#1a0808
  • terminal.foreground#f0d4d4
  • titleBar.activeBackground#2a0d0d
  • titleBar.activeForeground#f0d4d4
  • titleBar.inactiveBackground#1a0808
  • titleBar.inactiveForeground#e0c8c8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a4a4aitalic
string, string.quoted, string.template#ffb86c
keyword, storage.type, storage.modifier#ff5f57bold
keyword.operator, punctuation.accessor#ff8a80
variable, variable.other#f0c8c8
variable.parameter#ffb86citalic
entity.name.function, support.function#ff9f5f
meta.function-call#e0c8c8
entity.name.class, entity.name.type.class, support.class#ffcc66bold
entity.name.type, support.type#ffcc66
entity.name.type.interface#66aaffitalic
constant.numeric#ff66aa
constant, constant.language, constant.character#ffdd88
constant.language.boolean#ff66aabold
variable.other.property, support.variable.property#e0c8c8
meta.object-literal.key#ff8844
entity.name.tag, punctuation.definition.tag#ff5f57
entity.other.attribute-name#ffcc66italic
punctuation, meta.brace#ffaaaa
string.regexp#ff66aa
constant.character.escape#66aaff
meta.decorator, punctuation.decorator#ffdd88
invalid, invalid.illegal#ff0000strikethrough
markup.heading, entity.name.section#ff5f57bold
markup.bold#ffcc66bold
markup.italic#ffb86citalic
markup.underline.link#66aaff
markup.inline.raw, markup.fenced_code#5fff5f
support.type.property-name.json#ff5f57
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffcc66
support.type.property-name.css#ff8844
support.constant.property-value.css#ffb86c
themesmith by CyberBoost - VS Code Theme