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#E0A040
  • activityBar.background#1A1B20
  • activityBar.foreground#E0A040
  • activityBarBadge.background#E0A040
  • activityBarBadge.foreground#15171C
  • badge.background#E0A040
  • badge.foreground#15171C
  • button.background#21222A
  • button.foreground#C0C0C0
  • button.hoverBackground#2E2F35
  • dropdown.background#1A1B20
  • dropdown.border#2E2F35
  • dropdown.foreground#C0C0C0
  • editor.background#15171C
  • editor.findMatchBackground#E0A04044
  • editor.findMatchHighlightBackground#E0A04022
  • editor.foreground#C0C0C0
  • editor.lineHighlightBackground#262830
  • editor.lineHighlightBorder#2E2F35
  • editor.selectionBackground#2E2F35
  • editor.selectionHighlightBackground#2E2F3555
  • editorBracketMatch.background#E0A04033
  • editorBracketMatch.border#E0A040
  • editorCursor.foreground#E0A040
  • editorGroupHeader.tabsBackground#15171C
  • editorIndentGuide.activeBackground#3A3A3A88
  • editorIndentGuide.background#3A3A3A44
  • editorLineNumber.activeForeground#E0A040
  • editorLineNumber.foreground#5A5A5A
  • editorWhitespace.foreground#3A3A3A
  • focusBorder#E0A040
  • gitDecoration.conflictingResourceForeground#B35A3F
  • gitDecoration.deletedResourceForeground#E0A040
  • gitDecoration.modifiedResourceForeground#B35A3F
  • gitDecoration.untrackedResourceForeground#6A8E7F
  • input.background#1A1B20
  • input.border#2E2F35
  • input.foreground#C0C0C0
  • input.placeholderForeground#5A5A5A
  • inputOption.activeBorder#E0A040
  • list.activeSelectionBackground#2E2F35
  • list.activeSelectionForeground#E0A040
  • list.focusBackground#2E2F35
  • list.highlightForeground#E0A040
  • list.hoverBackground#2E2F3566
  • minimap.background#15171C
  • minimapSlider.activeBackground#E0A04066
  • minimapSlider.background#E0A04022
  • minimapSlider.hoverBackground#E0A04044
  • panel.background#15171C
  • panel.border#2E2F35
  • panelTitle.activeBorder#E0A040
  • panelTitle.activeForeground#E0A040
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#E0A04088
  • scrollbarSlider.background#5A5A5A44
  • scrollbarSlider.hoverBackground#5A5A5A88
  • sideBar.background#1A1B20
  • sideBar.foreground#A0A0A0
  • sideBarSectionHeader.background#1A1B20
  • sideBarSectionHeader.foreground#E0A040
  • sideBarTitle.foreground#E0A040
  • statusBar.background#21222A
  • statusBar.debuggingBackground#E0A040
  • statusBar.foreground#C0C0C0
  • statusBar.noFolderBackground#1A1B20
  • statusBarItem.hoverBackground#2E2F35
  • tab.activeBackground#21222A
  • tab.activeBorder#E0A040
  • tab.activeForeground#E0A040
  • tab.border#15171C
  • tab.inactiveBackground#1A1B20
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#6A8E7F
  • terminal.ansiBrightBlue#6A8E7F
  • terminal.ansiBrightCyan#6A8E7F
  • terminal.ansiBrightGreen#8FD5A6
  • terminal.ansiBrightMagenta#B35A3F
  • terminal.ansiBrightRed#E0A040
  • terminal.ansiBrightYellow#B35A3F
  • terminal.ansiCyan#6A8E7F
  • terminal.ansiGreen#8FD5A6
  • terminal.ansiMagenta#B35A3F
  • terminal.ansiRed#E0A040
  • terminal.ansiYellow#B35A3F
  • terminal.background#15171C
  • terminal.foreground#C0C0C0
  • titleBar.activeBackground#1A1B20
  • titleBar.activeForeground#C0C0C0
  • titleBar.inactiveBackground#15171C
  • titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4E4E4Eitalic
string, string.quoted, string.template#5A8A8B
keyword, storage.type, storage.modifier#E25858bold
keyword.operator, punctuation.accessor#B35A3F
variable, variable.other#AFAFAF
variable.parameter#B35A3Fitalic
entity.name.function, support.function#AFAFAF
meta.function-call#B35A3F
entity.name.class, entity.name.type.class, support.class#E25858bold
entity.name.type, support.type#B35A3F
entity.name.type.interface#5A8A8Bitalic
constant.numeric#B35A3F
constant, constant.language, constant.character#E25858
constant.language.boolean#E25858bold
variable.other.property, support.variable.property#AFAFAF
meta.object-literal.key#B35A3F
entity.name.tag, punctuation.definition.tag#E25858
entity.other.attribute-name#5A8A8Bitalic
punctuation, meta.brace#B35A3F
string.regexp#E25858
constant.character.escape#5A8A8B
meta.decorator, punctuation.decorator#B35A3F
invalid, invalid.illegal#E25858strikethrough
markup.heading, entity.name.section#E25858bold
markup.bold#B35A3Fbold
markup.italic#5A8A8Bitalic
markup.underline.link#5A8A8B
markup.inline.raw, markup.fenced_code#7A9A7B
support.type.property-name.json#B35A3F
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#E25858
support.type.property-name.css#B35A3F
support.constant.property-value.css#5A8A8B