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#FF5522
  • activityBar.background#0E080A
  • activityBar.foreground#A89F94
  • activityBarBadge.background#FF5522
  • activityBarBadge.foreground#0F0A0C
  • badge.background#FF5522
  • badge.foreground#0F0A0C
  • button.background#FF5522
  • button.foreground#0F0A0C
  • button.hoverBackground#FF6B35
  • dropdown.background#0E080A
  • dropdown.border#2B2325
  • dropdown.foreground#E2DACD
  • editor.background#0F0A0C
  • editor.findMatchBackground#FF552244
  • editor.findMatchHighlightBackground#FF552222
  • editor.foreground#E2DACD
  • editor.lineHighlightBackground#FF552220
  • editor.lineHighlightBorder#FF552230
  • editor.selectionBackground#FF552240
  • editor.selectionHighlightBackground#FF552220
  • editorBracketMatch.background#FF552233
  • editorBracketMatch.border#FF5522
  • editorCursor.foreground#FF5522
  • editorGroupHeader.tabsBackground#0F0A0C
  • editorIndentGuide.activeBackground#8A6FFF88
  • editorIndentGuide.background#4A3B3F44
  • editorLineNumber.activeForeground#FF5522
  • editorLineNumber.foreground#5A5053
  • editorWhitespace.foreground#4A3B3F
  • focusBorder#FF5522
  • gitDecoration.conflictingResourceForeground#FFB347
  • gitDecoration.deletedResourceForeground#FF6B6B
  • gitDecoration.modifiedResourceForeground#8A6FFF
  • gitDecoration.untrackedResourceForeground#62D96F
  • input.background#0E080A
  • input.border#2B2325
  • input.foreground#E2DACD
  • input.placeholderForeground#5A5053
  • inputOption.activeBorder#FF5522
  • list.activeSelectionBackground#FF552250
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#FF552240
  • list.highlightForeground#FF5522
  • list.hoverBackground#FF552220
  • minimap.background#0F0A0C
  • minimapSlider.activeBackground#FF552266
  • minimapSlider.background#FF552222
  • minimapSlider.hoverBackground#FF552244
  • panel.background#0C0608
  • panel.border#0F0A0C
  • panelTitle.activeBorder#FF5522
  • panelTitle.activeForeground#FF5522
  • panelTitle.inactiveForeground#A89F94
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF552288
  • scrollbarSlider.background#4A3B3F44
  • scrollbarSlider.hoverBackground#4A3B3F88
  • sideBar.background#0E080A
  • sideBar.foreground#E2DACD
  • sideBarSectionHeader.background#0E080A
  • sideBarSectionHeader.foreground#8A6FFF
  • sideBarTitle.foreground#FF5522
  • statusBar.background#0F0A0C
  • statusBar.debuggingBackground#FF5522
  • statusBar.foreground#E2DACD
  • statusBar.noFolderBackground#0F0A0C
  • statusBarItem.hoverBackground#FF552250
  • tab.activeBackground#0F0A0C
  • tab.activeBorder#FF5522
  • tab.activeForeground#FFFFFF
  • tab.border#0F0A0C
  • tab.inactiveBackground#0E080A
  • tab.inactiveForeground#A89F94
  • terminal.ansiBlue#8A6FFF
  • terminal.ansiBrightBlue#A89FFF
  • terminal.ansiBrightCyan#73C7D5
  • terminal.ansiBrightGreen#7DEB8A
  • terminal.ansiBrightMagenta#E58AEF
  • terminal.ansiBrightRed#FF8C69
  • terminal.ansiBrightYellow#FFE066
  • terminal.ansiCyan#5FA6B3
  • terminal.ansiGreen#62D96F
  • terminal.ansiMagenta#D96FD9
  • terminal.ansiRed#FF6B6B
  • terminal.ansiYellow#FFB347
  • terminal.background#0F0A0C
  • terminal.foreground#E2DACD
  • titleBar.activeBackground#0E080A
  • titleBar.activeForeground#E2DACD
  • titleBar.inactiveBackground#0C0608
  • titleBar.inactiveForeground#A89F94

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A89F94italic
string, string.quoted, string.template#FF9966
keyword, storage.type, storage.modifier#FF5522bold
keyword.operator, punctuation.accessor#8A6FFF
variable, variable.other#E2DACD
variable.parameter#FF5522italic
entity.name.function, support.function#8A6FFF
meta.function-call#FF5522
entity.name.class, entity.name.type.class, support.class#8A6FFFbold
entity.name.type, support.type#A89FFF
entity.name.type.interface#A89FFFitalic
constant.numeric#FFB347
constant, constant.language, constant.character#62D96F
constant.language.boolean#FF5522bold
variable.other.property, support.variable.property#8A6FFF
meta.object-literal.key#A89FFF
entity.name.tag, punctuation.definition.tag#FF5522
entity.other.attribute-name#D96FD9italic
punctuation, meta.brace#E2DACD
string.regexp#62D96F
constant.character.escape#D96FD9
meta.decorator, punctuation.decorator#FFB347
invalid, invalid.illegal#FF6B6Bstrikethrough
markup.heading, entity.name.section#FF5522bold
markup.bold#62D96Fbold
markup.italic#8A6FFFitalic
markup.underline.link#8A6FFF
markup.inline.raw, markup.fenced_code#FF9966
support.type.property-name.json#A89FFF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF5522
support.type.property-name.css#8A6FFF
support.constant.property-value.css#FFB347