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#A72D35
  • activityBar.background#0C0C2A
  • activityBar.foreground#D4A019
  • activityBarBadge.background#A72D35
  • activityBarBadge.foreground#0A0A1F
  • badge.background#A72D35
  • badge.foreground#0A0A1F
  • button.background#14142E
  • button.foreground#FFFFFF
  • button.hoverBackground#1F1F3F
  • dropdown.background#0C0C2A
  • dropdown.border#14142E
  • dropdown.foreground#E0E0E9
  • editor.background#0A0A1F
  • editor.findMatchBackground#A72D3544
  • editor.findMatchHighlightBackground#A72D3222
  • editor.foreground#E0E0E9
  • editor.lineHighlightBackground#1F1F5F40
  • editor.lineHighlightBorder#1F1F5F80
  • editor.selectionBackground#A72D3555
  • editor.selectionHighlightBackground#A72D3533
  • editorBracketMatch.background#A72D3533
  • editorBracketMatch.border#A72D35
  • editorCursor.foreground#A72D35
  • editorGroupHeader.tabsBackground#0A0A1F
  • editorIndentGuide.activeBackground#1F1F3F88
  • editorIndentGuide.background#1F1F3F44
  • editorLineNumber.activeForeground#A72D35
  • editorLineNumber.foreground#5A6A7A
  • editorWhitespace.foreground#1F1F3F
  • focusBorder#A72D35
  • gitDecoration.conflictingResourceForeground#F1C40F
  • gitDecoration.deletedResourceForeground#A72D35
  • gitDecoration.modifiedResourceForeground#2980B9
  • gitDecoration.untrackedResourceForeground#27AE60
  • input.background#0C0C2A
  • input.border#14142E
  • input.foreground#E0E0E9
  • input.placeholderForeground#5A6A7A
  • inputOption.activeBorder#A72D35
  • list.activeSelectionBackground#14142E
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#14142E
  • list.highlightForeground#A72D35
  • list.hoverBackground#14142E66
  • minimap.background#0A0A1F
  • minimapSlider.activeBackground#A72D6666
  • minimapSlider.background#A72D2222
  • minimapSlider.hoverBackground#A72D4444
  • panel.background#0A0A1F
  • panel.border#14142E
  • panelTitle.activeBorder#A72D35
  • panelTitle.activeForeground#A72D35
  • panelTitle.inactiveForeground#C3C3D1
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#A72D8888
  • scrollbarSlider.background#5A6A7A44
  • scrollbarSlider.hoverBackground#5A6A7A88
  • sideBar.background#0C0C2A
  • sideBar.foreground#C3C3D1
  • sideBarSectionHeader.background#0C0C2A
  • sideBarSectionHeader.foreground#A72D35
  • sideBarTitle.foreground#A72D35
  • statusBar.background#14142E
  • statusBar.debuggingBackground#A72D35
  • statusBar.foreground#E0E0E9
  • statusBar.noFolderBackground#0C0C2A
  • statusBarItem.hoverBackground#1F1F3F
  • tab.activeBackground#14142E
  • tab.activeBorder#A72D35
  • tab.activeForeground#FFFFFF
  • tab.border#0A0A1F
  • tab.inactiveBackground#0C0C2A
  • tab.inactiveForeground#C3C3D1
  • terminal.ansiBlue#2980B9
  • terminal.ansiBrightBlue#3498DB
  • terminal.ansiBrightCyan#16A085
  • terminal.ansiBrightGreen#2ECC71
  • terminal.ansiBrightMagenta#9B59B6
  • terminal.ansiBrightRed#E74C3C
  • terminal.ansiBrightYellow#F39C12
  • terminal.ansiCyan#1ABC9C
  • terminal.ansiGreen#27AE60
  • terminal.ansiMagenta#8E44AD
  • terminal.ansiRed#A72D35
  • terminal.ansiYellow#F1C40F
  • terminal.background#0A0A1F
  • terminal.foreground#E0E0E9
  • titleBar.activeBackground#0C0C2A
  • titleBar.activeForeground#E0E0E9
  • titleBar.inactiveBackground#0A0A1F
  • titleBar.inactiveForeground#C3C3D1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A6A7Aitalic
string, string.quoted, string.template#3AD68C
keyword, storage.type, storage.modifier#A72D35bold
keyword.operator, punctuation.accessor#E0E0E9
variable, variable.other#E0E0E9
variable.parameter#F1C40Fitalic
entity.name.function, support.function#2980B9
meta.function-call#C3C3D1
entity.name.class, entity.name.type.class, support.class#8E44ADbold
entity.name.type, support.type#8E44AD
entity.name.type.interface#3498DBitalic
constant.numeric#F1C40F
constant, constant.language, constant.character#F1C40F
constant.language.boolean#F1C40Fbold
variable.other.property, support.variable.property#C3C3D1
meta.object-literal.key#2980B9
entity.name.tag, punctuation.definition.tag#A72D35
entity.other.attribute-name#8E44ADitalic
punctuation, meta.brace#E0E0E9
string.regexp#F1C40F
constant.character.escape#8E44AD
meta.decorator, punctuation.decorator#F1C40F
invalid, invalid.illegal#E74C3Cstrikethrough
markup.heading, entity.name.section#A72D35bold
markup.bold#F1C40Fbold
markup.italic#8E44ADitalic
markup.underline.link#2980B9
markup.inline.raw, markup.fenced_code#3AD68C
support.type.property-name.json#2980B9
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#F1C40F
support.type.property-name.css#2980B9
support.constant.property-value.css#3AD68C
themesmith by CyberBoost - VS Code Theme