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#FF1744
  • activityBar.background#0B0B12
  • activityBar.foreground#FF6F00
  • activityBarBadge.background#FF1744
  • activityBarBadge.foreground#0A0A0F
  • badge.background#FF1744
  • badge.foreground#0A0A0F
  • button.background#1A1A33
  • button.foreground#FFFFFF
  • button.hoverBackground#2A2A44
  • dropdown.background#09090F
  • dropdown.border#1A1A2A
  • dropdown.foreground#F0F0F0
  • editor.background#0A0A0F
  • editor.findMatchBackground#FF6F0044
  • editor.findMatchHighlightBackground#FF6F0022
  • editor.foreground#F0F0F0
  • editor.lineHighlightBackground#1A1A33AA
  • editor.lineHighlightBorder#FF1744AA
  • editor.selectionBackground#FF174470
  • editor.selectionHighlightBackground#FF174420
  • editorBracketMatch.background#7CFC0044
  • editorBracketMatch.border#7CFC00
  • editorCursor.foreground#FF1744
  • editorGroupHeader.tabsBackground#0A0A0F
  • editorIndentGuide.activeBackground#FF174444
  • editorIndentGuide.background#33334444
  • editorLineNumber.activeForeground#FF6F00
  • editorLineNumber.foreground#555566
  • editorWhitespace.foreground#333344
  • focusBorder#FF1744
  • gitDecoration.conflictingResourceForeground#FF6F00
  • gitDecoration.deletedResourceForeground#FF1744
  • gitDecoration.modifiedResourceForeground#FF6F00
  • gitDecoration.untrackedResourceForeground#7CFC00
  • input.background#09090F
  • input.border#1A1A2A
  • input.foreground#F0F0F0
  • input.placeholderForeground#555566
  • inputOption.activeBorder#FF1744
  • list.activeSelectionBackground#1A1A33
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1A1A33
  • list.highlightForeground#FF1744
  • list.hoverBackground#1A1A3366
  • minimap.background#0A0A0F
  • minimapSlider.activeBackground#FF174466
  • minimapSlider.background#FF174422
  • minimapSlider.hoverBackground#FF174444
  • panel.background#0A0A0F
  • panel.border#1A1A2A
  • panelTitle.activeBorder#FF1744
  • panelTitle.activeForeground#FF1744
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF174488
  • scrollbarSlider.background#55556644
  • scrollbarSlider.hoverBackground#55556688
  • sideBar.background#08080F
  • sideBar.foreground#B0B0B0
  • sideBarSectionHeader.background#0B0B12
  • sideBarSectionHeader.foreground#FF6F00
  • sideBarTitle.foreground#FF6F00
  • statusBar.background#111117
  • statusBar.debuggingBackground#FF1744
  • statusBar.foreground#F0F0F0
  • statusBar.noFolderBackground#08080F
  • statusBarItem.hoverBackground#1D1D25
  • tab.activeBackground#151523
  • tab.activeBorder#FF1744
  • tab.activeForeground#FFFFFF
  • tab.border#0A0A0F
  • tab.inactiveBackground#0F0F1A
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#4A90E2
  • terminal.ansiBrightBlue#6EC6FF
  • terminal.ansiBrightCyan#4DD0E1
  • terminal.ansiBrightGreen#8BC34A
  • terminal.ansiBrightMagenta#BA68C8
  • terminal.ansiBrightRed#FF5252
  • terminal.ansiBrightYellow#FF9800
  • terminal.ansiCyan#26C6DA
  • terminal.ansiGreen#7CFC00
  • terminal.ansiMagenta#AB47BC
  • terminal.ansiRed#FF1744
  • terminal.ansiYellow#FFB300
  • terminal.background#0A0A0F
  • terminal.foreground#F0F0F0
  • titleBar.activeBackground#08080F
  • titleBar.activeForeground#F0F0F0
  • titleBar.inactiveBackground#0A0A0F
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555566italic
string, string.quoted, string.template#7CFC00
keyword, storage.type, storage.modifier#FF1744bold
keyword.operator, punctuation.accessor#FF6F00
variable, variable.other#F0F0F0
variable.parameter#FF6F00italic
entity.name.function, support.function#4A90E2
meta.function-call#A0A0A0
entity.name.class, entity.name.type.class, support.class#FF6F00bold
entity.name.type, support.type#FF6F00
entity.name.type.interface#4A90E2italic
constant.numeric#FF6F00
constant, constant.language, constant.character#FF1744
constant.language.boolean#FF1744bold
variable.other.property, support.variable.property#A0A0A0
meta.object-literal.key#FF6F00
entity.name.tag, punctuation.definition.tag#FF1744
entity.other.attribute-name#4A90E2italic
punctuation, meta.brace#FF6F00
string.regexp#FF6F00
constant.character.escape#7CFC00
meta.decorator, punctuation.decorator#FF6F00
invalid, invalid.illegal#FF1744strikethrough
markup.heading, entity.name.section#FF1744bold
markup.bold#FF6F00bold
markup.italic#4A90E2italic
markup.underline.link#7CFC00
markup.inline.raw, markup.fenced_code#7CFC00
support.type.property-name.json#FF6F00
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF6F00
support.type.property-name.css#4A90E2
support.constant.property-value.css#7CFC00
themesmith by CyberBoost - VS Code Theme