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—