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#FFB300
  • activityBar.background#151515
  • activityBar.foreground#FFB300
  • activityBarBadge.background#FFB300
  • activityBarBadge.foreground#0A0A0A
  • badge.background#FFB300
  • badge.foreground#0A0A0A
  • button.background#3B0D0D
  • button.foreground#D4D4D4
  • button.hoverBackground#5A0D0D
  • dropdown.background#111111
  • dropdown.border#3B0D0D
  • dropdown.foreground#D4D4D4
  • editor.background#0A0A0A
  • editor.findMatchBackground#D45330AA
  • editor.findMatchHighlightBackground#D4533088
  • editor.foreground#D4D4D4
  • editor.lineHighlightBackground#20202080
  • editor.lineHighlightBorder#FFB30030
  • editor.selectionBackground#FFB30055
  • editor.selectionHighlightBackground#FFB30033
  • editorBracketMatch.background#FF7F0044
  • editorBracketMatch.border#FFB300
  • editorCursor.foreground#FFB300
  • editorGroupHeader.tabsBackground#0A0A0A
  • editorIndentGuide.activeBackground#FFB30088
  • editorIndentGuide.background#4A4A4A33
  • editorLineNumber.activeForeground#FFB300
  • editorLineNumber.foreground#5A5A5A
  • editorWhitespace.foreground#4A4A4A
  • focusBorder#FFB300
  • gitDecoration.conflictingResourceForeground#FF6F00
  • gitDecoration.deletedResourceForeground#D44C3E
  • gitDecoration.modifiedResourceForeground#FFB300
  • gitDecoration.untrackedResourceForeground#A3D467
  • input.background#111111
  • input.border#3B0D0D
  • input.foreground#D4D4D4
  • input.placeholderForeground#5A5A5A
  • inputOption.activeBorder#FFB300
  • list.activeSelectionBackground#3B0D0D
  • list.activeSelectionForeground#D4D4D4
  • list.focusBackground#3B0D0D
  • list.highlightForeground#FFB300
  • list.hoverBackground#3B0D0D66
  • minimap.background#0A0A0A
  • minimapSlider.activeBackground#FFB30066
  • minimapSlider.background#FFB30022
  • minimapSlider.hoverBackground#FFB30044
  • panel.background#0A0A0A
  • panel.border#3B0D0D
  • panelTitle.activeBorder#FFB300
  • panelTitle.activeForeground#FFB300
  • panelTitle.inactiveForeground#6A6A6A
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FFB30088
  • scrollbarSlider.background#4A4A4A44
  • scrollbarSlider.hoverBackground#4A4A4A88
  • sideBar.background#111111
  • sideBar.foreground#D4D4D4
  • sideBarSectionHeader.background#1A1A1A
  • sideBarSectionHeader.foreground#FFB300
  • sideBarTitle.foreground#FFB300
  • statusBar.background#3B0D0D
  • statusBar.debuggingBackground#FF8800
  • statusBar.foreground#D4D4D4
  • statusBar.noFolderBackground#141414
  • statusBarItem.hoverBackground#FFB30044
  • tab.activeBackground#0F0F0F
  • tab.activeBorder#FFB300
  • tab.activeForeground#D4D4D4
  • tab.border#1E1E1E
  • tab.inactiveBackground#090909
  • tab.inactiveForeground#6A6A6A
  • terminal.ansiBlack#151515
  • terminal.ansiBlue#5A9BD6
  • terminal.ansiBrightBlack#3A3A3A
  • terminal.ansiBrightBlue#82B1FF
  • terminal.ansiBrightCyan#7FFFD4
  • terminal.ansiBrightGreen#C8E691
  • terminal.ansiBrightMagenta#FF9CDC
  • terminal.ansiBrightRed#FF6F00
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFD966
  • terminal.ansiCyan#59C9C9
  • terminal.ansiGreen#A3D467
  • terminal.ansiMagenta#C78AE0
  • terminal.ansiRed#D44C3E
  • terminal.ansiWhite#D4D4D4
  • terminal.ansiYellow#FFB300
  • terminal.background#0A0A0A
  • terminal.foreground#D4D4D4
  • titleBar.activeBackground#0F0F0F
  • titleBar.activeForeground#D4D4D4
  • titleBar.inactiveBackground#090909
  • titleBar.inactiveForeground#6A6A6A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A5A5Aitalic
string, string.quoted, string.template#FF8C00
keyword, storage.type, storage.modifier#D44C3Ebold
keyword.operator, punctuation.accessor#FFB300
variable, variable.other#D4D4D4
variable.parameter#D44C3Eitalic
entity.name.function, support.function#FFB300
meta.function-call#D44C3E
entity.name.class, entity.name.type.class, support.class#D44C3Ebold
entity.name.type, support.type#FFB300
entity.name.type.interface#D44C3Eitalic
constant.numeric#FFAA00
constant, constant.language, constant.character#FFB300
constant.language.boolean#D44C3Ebold
variable.other.property, support.variable.property#FFB300
meta.object-literal.key#FFB300
entity.name.tag, punctuation.definition.tag#D44C3E
entity.other.attribute-name#FFB300italic
punctuation, meta.brace#D4D4D4
string.regexp#D44C3E
constant.character.escape#FFB300
meta.decorator, punctuation.decorator#D44C3E
invalid, invalid.illegal#FF5555strikethrough
markup.heading, entity.name.section#FFB300bold
markup.bold#FFB300bold
markup.italic#D44C3Eitalic
markup.underline.link#FFB300
markup.inline.raw, markup.fenced_code#FF8C00
support.type.property-name.json#FFB300
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D44C3E
support.type.property-name.css#FFB300
support.constant.property-value.css#FF8C00