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#054ADA
  • activityBar.background#121212
  • activityBar.foreground#A0A0A0
  • activityBarBadge.background#054ADA
  • activityBarBadge.foreground#FFFFFF
  • badge.background#054ADA
  • badge.foreground#FFFFFF
  • button.background#054ADA
  • button.foreground#FFFFFF
  • button.hoverBackground#3A8DFF
  • dropdown.background#1E1E1E
  • dropdown.border#054ADA
  • dropdown.foreground#E0E0E0
  • editor.background#0A0A0A
  • editor.findMatchBackground#FFB90033
  • editor.findMatchHighlightBackground#FFB90022
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#1A1A1A
  • editor.lineHighlightBorder#054ADA
  • editor.selectionBackground#054ADA55
  • editor.selectionHighlightBackground#054ADA33
  • editorBracketMatch.background#054ADA33
  • editorBracketMatch.border#054ADA
  • editorCursor.foreground#00FFCC
  • editorGroupHeader.tabsBackground#121212
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#444444
  • focusBorder#054ADA
  • gitDecoration.conflictingResourceForeground#C71585
  • gitDecoration.deletedResourceForeground#D72638
  • gitDecoration.modifiedResourceForeground#FFB900
  • gitDecoration.untrackedResourceForeground#00C7FF
  • input.background#1E1E1E
  • input.border#054ADA
  • input.foreground#E0E0E0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#054ADA
  • list.activeSelectionBackground#054ADA33
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#054ADA44
  • list.highlightForeground#FFB900
  • list.hoverBackground#054ADA22
  • minimap.background#0A0A0A
  • minimapSlider.activeBackground#666666
  • minimapSlider.background#444444
  • minimapSlider.hoverBackground#555555
  • panel.background#121212
  • panel.border#054ADA
  • panelTitle.activeBorder#054ADA
  • panelTitle.activeForeground#E0E0E0
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#666666
  • scrollbarSlider.background#444444
  • scrollbarSlider.hoverBackground#555555
  • sideBar.background#121212
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#0A0A0A
  • sideBarSectionHeader.foreground#A0A0A0
  • sideBarTitle.foreground#E0E0E0
  • statusBar.background#054ADA
  • statusBar.debuggingBackground#FFB900
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#2D2D2D
  • statusBarItem.hoverBackground#054ADA33
  • tab.activeBackground#0A0A0A
  • tab.activeBorder#054ADA
  • tab.activeForeground#E0E0E0
  • tab.border#054ADA
  • tab.inactiveBackground#121212
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#054ADA
  • terminal.ansiBrightBlue#3A8DFF
  • terminal.ansiBrightCyan#66FFFF
  • terminal.ansiBrightGreen#5AFF5A
  • terminal.ansiBrightMagenta#FF77FF
  • terminal.ansiBrightRed#FF6666
  • terminal.ansiBrightYellow#FFEA00
  • terminal.ansiCyan#00C7FF
  • terminal.ansiGreen#00C853
  • terminal.ansiMagenta#C71585
  • terminal.ansiRed#D72638
  • terminal.ansiYellow#FFB900
  • terminal.background#0A0A0A
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#1E1E1E
  • titleBar.activeForeground#E0E0E0
  • titleBar.inactiveBackground#151515
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#00C7FF
keyword, storage.type, storage.modifier#054ADAbold
keyword.operator, punctuation.accessor#FFB900
variable, variable.other#E0E0E0
variable.parameter#FFEA00italic
entity.name.function, support.function#00C853
meta.function-call#5AFF5A
entity.name.class, entity.name.type.class, support.class#C71585bold
entity.name.type, support.type#3A8DFF
entity.name.type.interface#FFB900italic
constant.numeric#FFEA00
constant, constant.language, constant.character#FFEA00
constant.language.boolean#FFB900bold
variable.other.property, support.variable.property#00C7FF
meta.object-literal.key#FFB900
entity.name.tag, punctuation.definition.tag#D72638
entity.other.attribute-name#FFB900italic
punctuation, meta.brace#A0A0A0
string.regexp#FFB900
constant.character.escape#FFEA00
meta.decorator, punctuation.decorator#C71585
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#054ADAbold
markup.bold#054ADAbold
markup.italic#FFB900italic
markup.underline.link#00C7FF
markup.inline.raw, markup.fenced_code#5AFF5A
support.type.property-name.json#FFB900
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C71585
support.type.property-name.css#054ADA
support.constant.property-value.css#FFB900
themesmith by CyberBoost - VS Code Theme