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#FFB700
  • activityBar.background#1E1E1E
  • activityBar.foreground#8AB4F8
  • activityBarBadge.background#FFB700
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FFB700
  • badge.foreground#FFFFFF
  • button.background#0C3C7D
  • button.foreground#FFFFFF
  • button.hoverBackground#2A6ED8
  • dropdown.background#2A2A2A
  • dropdown.border#555555
  • dropdown.foreground#E0E0E0
  • editor.background#121212
  • editor.findMatchBackground#FFB70080
  • editor.findMatchHighlightBackground#FFB70040
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#2A6ED8
  • editor.lineHighlightBorder#2A6ED8
  • editor.selectionBackground#2A6ED8AA
  • editor.selectionHighlightBackground#2A6ED855
  • editorBracketMatch.background#2A6ED833
  • editorBracketMatch.border#FFB700
  • editorCursor.foreground#FFB700
  • editorGroupHeader.tabsBackground#0C3C7D
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#FFB700
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#555555
  • focusBorder#FFB700
  • gitDecoration.conflictingResourceForeground#FFB700
  • gitDecoration.deletedResourceForeground#FF8A80
  • gitDecoration.modifiedResourceForeground#FFD54F
  • gitDecoration.untrackedResourceForeground#A7E57C
  • input.background#2A2A2A
  • input.border#555555
  • input.foreground#E0E0E0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#FFB700
  • list.activeSelectionBackground#2A6ED8
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#2A6ED8
  • list.highlightForeground#FFB700
  • list.hoverBackground#333333
  • minimap.background#1E1E1E
  • minimapSlider.activeBackground#555555FF
  • minimapSlider.background#55555555
  • minimapSlider.hoverBackground#555555AA
  • panel.background#1E1E1E
  • panel.border#0C3C7D
  • panelTitle.activeBorder#FFB700
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#555555FF
  • scrollbarSlider.background#55555555
  • scrollbarSlider.hoverBackground#555555AA
  • sideBar.background#1E1E1E
  • sideBar.foreground#E0E0E0
  • sideBarSectionHeader.background#1E1E1E
  • sideBarSectionHeader.foreground#8AB4F8
  • sideBarTitle.foreground#8AB4F8
  • statusBar.background#0C3C7D
  • statusBar.debuggingBackground#FFB700
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#1E1E1E
  • statusBarItem.hoverBackground#2A6ED8
  • tab.activeBackground#0C3C7D
  • tab.activeBorder#FFB700
  • tab.activeForeground#FFFFFF
  • tab.border#0C3C7D
  • tab.inactiveBackground#1E1E1E
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#8AB4F8
  • terminal.ansiBrightBlue#A5C8FF
  • terminal.ansiBrightCyan#80F5F5
  • terminal.ansiBrightGreen#A7E57C
  • terminal.ansiBrightMagenta#D59CFF
  • terminal.ansiBrightRed#FF8A80
  • terminal.ansiBrightYellow#FFD54F
  • terminal.ansiCyan#4FD8D9
  • terminal.ansiGreen#81C784
  • terminal.ansiMagenta#BA68C8
  • terminal.ansiRed#E57373
  • terminal.ansiYellow#FFB700
  • terminal.background#121212
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#0C3C7D
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#0A2B5A
  • titleBar.inactiveForeground#CCCCCC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A6A6Aitalic
string, string.quoted, string.template#81C784
keyword, storage.type, storage.modifier#FFB700bold
keyword.operator, punctuation.accessor#8AB4F8
variable, variable.other#E0E0E0
variable.parameter#A5C8FFitalic
entity.name.function, support.function#A5C8FF
meta.function-call#8AB4F8
entity.name.class, entity.name.type.class, support.class#FFB700bold
entity.name.type, support.type#FFB700
entity.name.type.interface#FFB700italic
constant.numeric#FFD54F
constant, constant.language, constant.character#FFB700
constant.language.boolean#FFB700bold
variable.other.property, support.variable.property#8AB4F8
meta.object-literal.key#8AB4F8
entity.name.tag, punctuation.definition.tag#FFB700
entity.other.attribute-name#A5C8FFitalic
punctuation, meta.brace#E0E0E0
string.regexp#FFB700
constant.character.escape#FFB700
meta.decorator, punctuation.decorator#A5C8FF
invalid, invalid.illegal#FF8A80strikethrough
markup.heading, entity.name.section#FFB700bold
markup.bold#FFB700bold
markup.italic#A5C8FFitalic
markup.underline.link#8AB4F8
markup.inline.raw, markup.fenced_code#81C784
support.type.property-name.json#8AB4F8
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#A5C8FF
support.type.property-name.css#81C784
support.constant.property-value.css#FFD54F