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#FF8C00
  • activityBar.background#111213
  • activityBar.foreground#00FFE4
  • activityBarBadge.background#00FFE4
  • activityBarBadge.foreground#0B0C0D
  • badge.background#00FFE4
  • badge.foreground#0B0C0D
  • button.background#1A1B1C
  • button.foreground#FFFFFF
  • button.hoverBackground#252627
  • dropdown.background#101112
  • dropdown.border#1A1B1C
  • dropdown.foreground#E6E6E6
  • editor.background#0B0C0D
  • editor.findMatchBackground#FF8C0044
  • editor.findMatchHighlightBackground#FF8C0022
  • editor.foreground#E6E6E6
  • editor.lineHighlightBackground#1A1B1C40
  • editor.lineHighlightBorder#00FFE420
  • editor.selectionBackground#00FFE44C
  • editor.selectionHighlightBackground#00FFE41A
  • editorBracketMatch.background#00FFE44C
  • editorBracketMatch.border#00FFE4
  • editorCursor.foreground#00FFE4
  • editorGroupHeader.tabsBackground#0B0C0D
  • editorIndentGuide.activeBackground#00FFE444
  • editorIndentGuide.background#33333344
  • editorLineNumber.activeForeground#00FFE4
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#333333
  • focusBorder#00FFE4
  • gitDecoration.conflictingResourceForeground#FFD700
  • gitDecoration.deletedResourceForeground#FF4560
  • gitDecoration.modifiedResourceForeground#00FFE4
  • gitDecoration.untrackedResourceForeground#A5FF33
  • input.background#101112
  • input.border#1A1B1C
  • input.foreground#E6E6E6
  • input.placeholderForeground#555555
  • inputOption.activeBorder#00FFE4
  • list.activeSelectionBackground#1A1B1C
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1A1B1C
  • list.highlightForeground#00FFE4
  • list.hoverBackground#1A1B1C66
  • minimap.background#0B0C0D
  • minimapSlider.activeBackground#00FFE466
  • minimapSlider.background#00FFE422
  • minimapSlider.hoverBackground#00FFE444
  • panel.background#0B0C0D
  • panel.border#1A1B1C
  • panelTitle.activeBorder#00FFE4
  • panelTitle.activeForeground#00FFE4
  • panelTitle.inactiveForeground#6D6D6D
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00FFE488
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#101112
  • sideBar.foreground#B0B0B0
  • sideBarSectionHeader.background#111213
  • sideBarSectionHeader.foreground#00C5C5
  • sideBarTitle.foreground#00FFE4
  • statusBar.background#1A1B1C
  • statusBar.debuggingBackground#FF8C00
  • statusBar.foreground#E6E6E6
  • statusBar.noFolderBackground#111213
  • statusBarItem.hoverBackground#252627
  • tab.activeBackground#1A1B1C
  • tab.activeBorder#00FFE4
  • tab.activeForeground#FFFFFF
  • tab.border#0B0C0D
  • tab.inactiveBackground#101112
  • tab.inactiveForeground#6D6D6D
  • terminal.ansiBlue#00C5C5
  • terminal.ansiBrightBlue#00FFE4
  • terminal.ansiBrightCyan#00FFE4
  • terminal.ansiBrightGreen#A5FF33
  • terminal.ansiBrightMagenta#FF8C00
  • terminal.ansiBrightRed#FF4560
  • terminal.ansiBrightYellow#FFD700
  • terminal.ansiCyan#00FFE4
  • terminal.ansiGreen#A5FF33
  • terminal.ansiMagenta#FF8C00
  • terminal.ansiRed#FF4560
  • terminal.ansiYellow#FFD700
  • terminal.background#0B0C0D
  • terminal.foreground#E6E6E6
  • titleBar.activeBackground#111213
  • titleBar.activeForeground#E6E6E6
  • titleBar.inactiveBackground#0B0C0D
  • titleBar.inactiveForeground#6D6D6D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4D4D4Ditalic
string, string.quoted, string.template#A5FF33
keyword, storage.type, storage.modifier#00FFE4bold
keyword.operator, punctuation.accessor#FF8C00
variable, variable.other#E6E6E6
variable.parameter#FFD700italic
entity.name.function, support.function#00C5C5
meta.function-call#B0B0B0
entity.name.class, entity.name.type.class, support.class#00FFE4bold
entity.name.type, support.type#00C5C5
entity.name.type.interface#00FFE4italic
constant.numeric#FFD700
constant, constant.language, constant.character#FF8C00
constant.language.boolean#FF8C00bold
variable.other.property, support.variable.property#B0B0B0
meta.object-literal.key#00C5C5
entity.name.tag, punctuation.definition.tag#00FFE4
entity.other.attribute-name#FFD700italic
punctuation, meta.brace#6D6D6D
string.regexp#FF4560
constant.character.escape#A5FF33
meta.decorator, punctuation.decorator#FFD700
invalid, invalid.illegal#FF4560strikethrough
markup.heading, entity.name.section#00FFE4bold
markup.bold#FF8C00bold
markup.italic#00C5C5italic
markup.underline.link#00FFE4
markup.inline.raw, markup.fenced_code#A5FF33
support.type.property-name.json#00C5C5
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFD700
support.type.property-name.css#00C5C5
support.constant.property-value.css#A5FF33