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#FFD700
  • activityBar.background#4B1111
  • activityBar.foreground#FFD700
  • activityBarBadge.background#D4AF37
  • activityBarBadge.foreground#0D0D0D
  • badge.background#D4AF37
  • badge.foreground#0D0D0D
  • button.background#8C5A7B
  • button.foreground#E0E0E0
  • button.hoverBackground#B87333
  • dropdown.background#2E1C0D
  • dropdown.border#8C5A7B
  • dropdown.foreground#FFD700
  • editor.background#0D0D0D
  • editor.findMatchBackground#8C5A7B
  • editor.findMatchHighlightBackground#B87333
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#2A2A2A
  • editor.lineHighlightBorder#444444
  • editor.selectionBackground#265F71
  • editor.selectionHighlightBackground#4C7C92
  • editorBracketMatch.background#4C7C92
  • editorBracketMatch.border#FFD700
  • editorCursor.foreground#FFD700
  • editorGroupHeader.tabsBackground#0D0D0D
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#FFD700
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#444444
  • focusBorder#FFD700
  • gitDecoration.conflictingResourceForeground#8C5A7B
  • gitDecoration.deletedResourceForeground#B87333
  • gitDecoration.modifiedResourceForeground#236B8E
  • gitDecoration.untrackedResourceForeground#2A7F62
  • input.background#2E1C0D
  • input.border#8C5A7B
  • input.foreground#FFD700
  • input.placeholderForeground#555555
  • inputOption.activeBorder#FFD700
  • list.activeSelectionBackground#264F5A
  • list.activeSelectionForeground#FFD700
  • list.focusBackground#4C7C92
  • list.highlightForeground#FFD700
  • list.hoverBackground#333333
  • minimap.background#0D0D0D
  • minimapSlider.activeBackground#555555
  • minimapSlider.background#333333
  • minimapSlider.hoverBackground#444444
  • panel.background#1E1E1E
  • panel.border#333333
  • panelTitle.activeBorder#FFD700
  • panelTitle.activeForeground#FFD700
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#555555
  • scrollbarSlider.background#333333
  • scrollbarSlider.hoverBackground#444444
  • sideBar.background#1E1E1E
  • sideBar.foreground#E0E0E0
  • sideBarSectionHeader.background#2E1C0D
  • sideBarSectionHeader.foreground#FFD700
  • sideBarTitle.foreground#FFD700
  • statusBar.background#0A3B46
  • statusBar.debuggingBackground#8C5A7B
  • statusBar.foreground#FFD700
  • statusBar.noFolderBackground#2E1C0D
  • statusBarItem.hoverBackground#FFB800
  • tab.activeBackground#2E1C0D
  • tab.activeBorder#FFD700
  • tab.activeForeground#FFD700
  • tab.border#2A2A2A
  • tab.inactiveBackground#1E1E1E
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#236B8E
  • terminal.ansiBrightBlue#3A9AD9
  • terminal.ansiBrightCyan#3DE8EB
  • terminal.ansiBrightGreen#5BCF9C
  • terminal.ansiBrightMagenta#C785B5
  • terminal.ansiBrightRed#E89A5B
  • terminal.ansiBrightYellow#FFD700
  • terminal.ansiCyan#00C5C5
  • terminal.ansiGreen#2A7F62
  • terminal.ansiMagenta#8C5A7B
  • terminal.ansiRed#B87333
  • terminal.ansiYellow#D4AF37
  • terminal.background#0D0D0D
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#7B2D2D
  • titleBar.activeForeground#FFD700
  • titleBar.inactiveBackground#1E1E1E
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A6A6Aitalic
string, string.quoted, string.template#FFD700—
keyword, storage.type, storage.modifier#7B2D2Dbold
keyword.operator, punctuation.accessor#236B8E—
variable, variable.other#E0E0E0—
variable.parameter#236B8Eitalic
entity.name.function, support.function#FFB800—
meta.function-call#FFD700—
entity.name.class, entity.name.type.class, support.class#8C5A7Bbold
entity.name.type, support.type#B87333—
entity.name.type.interface#236B8Eitalic
constant.numeric#5BCF9C—
constant, constant.language, constant.character#D4AF37—
constant.language.boolean#7B2D2Dbold
variable.other.property, support.variable.property#236B8E—
meta.object-literal.key#FFD700—
entity.name.tag, punctuation.definition.tag#B87333—
entity.other.attribute-name#8C5A7Bitalic
punctuation, meta.brace#A0A0A0—
string.regexp#5BCF9C—
constant.character.escape#E89A5B—
meta.decorator, punctuation.decorator#FFD700—
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#FFD700bold
markup.bold#FFD700bold
markup.italic#FFD700italic
markup.underline.link#236B8E—
markup.inline.raw, markup.fenced_code#B87333—
support.type.property-name.json#FFD700—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8C5A7B—
support.type.property-name.css#236B8E—
support.constant.property-value.css#B87333—