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#D4AF37
  • activityBar.background#FFFFFF
  • activityBar.foreground#555555
  • activityBarBadge.background#C72028
  • activityBarBadge.foreground#FFFFFF
  • badge.background#3A6EA5
  • badge.foreground#FFFFFF
  • button.background#C72028
  • button.foreground#FFFFFF
  • button.hoverBackground#D9534F
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#333333
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFD700
  • editor.findMatchHighlightBackground#FFE066
  • editor.foreground#333333
  • editor.lineHighlightBackground#E8F0FE
  • editor.lineHighlightBorder#B0C4DE
  • editor.selectionBackground#B3D4FC
  • editor.selectionHighlightBackground#C2E0FF
  • editorBracketMatch.background#FFE4B5
  • editorBracketMatch.border#D4AF37
  • editorCursor.foreground#C72028
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorIndentGuide.activeBackground#B0B0B0
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#333333
  • editorLineNumber.foreground#999999
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#3A6EA5
  • gitDecoration.conflictingResourceForeground#FF6F61
  • gitDecoration.deletedResourceForeground#C72028
  • gitDecoration.modifiedResourceForeground#3A6EA5
  • gitDecoration.untrackedResourceForeground#4CAF50
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#333333
  • input.placeholderForeground#AAAAAA
  • inputOption.activeBorder#D4AF37
  • list.activeSelectionBackground#D4AF37
  • list.activeSelectionForeground#000000
  • list.focusBackground#E8F0FE
  • list.highlightForeground#C72028
  • list.hoverBackground#F0F0F0
  • minimap.background#F5F5F5
  • minimapSlider.activeBackground#AAAAAA
  • minimapSlider.background#CCCCCC66
  • minimapSlider.hoverBackground#BBBBBB88
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#D4AF37
  • panelTitle.activeForeground#333333
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#AAAAAA
  • scrollbarSlider.background#CCCCCC66
  • scrollbarSlider.hoverBackground#BBBBBB88
  • sideBar.background#FFFFFF
  • sideBar.foreground#333333
  • sideBarSectionHeader.background#F0F0F0
  • sideBarSectionHeader.foreground#555555
  • sideBarTitle.foreground#555555
  • statusBar.background#D4AF37
  • statusBar.debuggingBackground#C72028
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#3A6EA5
  • statusBarItem.hoverBackground#FF6F61
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#D4AF37
  • tab.activeForeground#333333
  • tab.border#E0E0E0
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#3A6EA5
  • terminal.ansiBrightBlue#5B9BD5
  • terminal.ansiBrightCyan#00BFBF
  • terminal.ansiBrightGreen#6FCF97
  • terminal.ansiBrightMagenta#E04158
  • terminal.ansiBrightRed#E53935
  • terminal.ansiBrightYellow#FFEB3B
  • terminal.ansiCyan#00A5A5
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#C72028
  • terminal.ansiRed#C72028
  • terminal.ansiYellow#FFD700
  • terminal.background#FFFFFF
  • terminal.foreground#333333
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#333333
  • titleBar.inactiveBackground#F0F0F0
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A737Ditalic
string, string.quoted, string.template#3A6EA5
keyword, storage.type, storage.modifier#C72028bold
keyword.operator, punctuation.accessor#555555
variable, variable.other#3A6EA5
variable.parameter#6F42C1italic
entity.name.function, support.function#3A6EA5
meta.function-call#3A6EA5
entity.name.class, entity.name.type.class, support.class#D4AF37bold
entity.name.type, support.type#6F42C1
entity.name.type.interface#6F42C1italic
constant.numeric#C72028
constant, constant.language, constant.character#3A6EA5
constant.language.boolean#C72028bold
variable.other.property, support.variable.property#6F42C1
meta.object-literal.key#3A6EA5
entity.name.tag, punctuation.definition.tag#C72028
entity.other.attribute-name#3A6EA5italic
punctuation, meta.brace#555555
string.regexp#C72028
constant.character.escape#6F42C1
meta.decorator, punctuation.decorator#D4AF37
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#C72028bold
markup.bold#C72028bold
markup.italic#6A737Ditalic
markup.underline.link#3A6EA5
markup.inline.raw, markup.fenced_code#C72028
support.type.property-name.json#6F42C1
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C72028
support.type.property-name.css#3A6EA5
support.constant.property-value.css#C72028