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#FF7F00
  • activityBar.background#111111
  • activityBar.foreground#FF7F00
  • activityBarBadge.background#FF7F00
  • activityBarBadge.foreground#0D0D0D
  • badge.background#FF7F00
  • badge.foreground#0D0D0D
  • button.background#1A1A1A
  • button.foreground#FFFFFF
  • button.hoverBackground#2A2A2A
  • dropdown.background#111111
  • dropdown.border#1A1A1A
  • dropdown.foreground#C0C0C0
  • editor.background#0D0D0D
  • editor.findMatchBackground#FF7F0044
  • editor.findMatchHighlightBackground#FF7F0022
  • editor.foreground#C0C0C0
  • editor.lineHighlightBackground#1A1A1A80
  • editor.lineHighlightBorder#1A1A1AFF
  • editor.selectionBackground#33445588
  • editor.selectionHighlightBackground#33445544
  • editorBracketMatch.background#FF7F0033
  • editorBracketMatch.border#FF7F00
  • editorCursor.foreground#FF7F00
  • editorGroupHeader.tabsBackground#0D0D0D
  • editorIndentGuide.activeBackground#33333388
  • editorIndentGuide.background#33333344
  • editorLineNumber.activeForeground#FF7F00
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#333333
  • focusBorder#FF7F00
  • gitDecoration.conflictingResourceForeground#FF7F00
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.modifiedResourceForeground#FFC700
  • gitDecoration.untrackedResourceForeground#00FF80
  • input.background#111111
  • input.border#1A1A1A
  • input.foreground#C0C0C0
  • input.placeholderForeground#555555
  • inputOption.activeBorder#FF7F00
  • list.activeSelectionBackground#1A1A1A
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1A1A1A
  • list.highlightForeground#FF7F00
  • list.hoverBackground#1A1A1A66
  • minimap.background#0D0D0D
  • minimapSlider.activeBackground#FF7F0066
  • minimapSlider.background#FF7F0022
  • minimapSlider.hoverBackground#FF7F0044
  • panel.background#0D0D0D
  • panel.border#1A1A1A
  • panelTitle.activeBorder#FF7F00
  • panelTitle.activeForeground#FF7F00
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF7F0088
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#111111
  • sideBar.foreground#A0A0A0
  • sideBarSectionHeader.background#1A1A1A
  • sideBarSectionHeader.foreground#FF7F00
  • sideBarTitle.foreground#FF7F00
  • statusBar.background#1A1A1A
  • statusBar.debuggingBackground#FF7F00
  • statusBar.foreground#C0C0C0
  • statusBar.noFolderBackground#111111
  • statusBarItem.hoverBackground#2A2A2A
  • tab.activeBackground#1A1A1A
  • tab.activeBorder#FF7F00
  • tab.activeForeground#FFFFFF
  • tab.border#0D0D0D
  • tab.inactiveBackground#111111
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#00A8FF
  • terminal.ansiBrightBlue#33CFFF
  • terminal.ansiBrightCyan#33FFFF
  • terminal.ansiBrightGreen#33FF99
  • terminal.ansiBrightMagenta#FF77FF
  • terminal.ansiBrightRed#FF7777
  • terminal.ansiBrightYellow#FFFF99
  • terminal.ansiCyan#00FFFF
  • terminal.ansiGreen#00FF80
  • terminal.ansiMagenta#FF77FF
  • terminal.ansiRed#FF5555
  • terminal.ansiYellow#FFDD55
  • terminal.background#0D0D0D
  • terminal.foreground#C0C0C0
  • titleBar.activeBackground#111111
  • titleBar.activeForeground#C0C0C0
  • titleBar.inactiveBackground#0D0D0D
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A5A5Aitalic
string, string.quoted, string.template#00FFE5
keyword, storage.type, storage.modifier#FF7F00bold
keyword.operator, punctuation.accessor#FFC700
variable, variable.other#C0C0C0
variable.parameter#FFC700italic
entity.name.function, support.function#00FFE5
meta.function-call#A0A0A0
entity.name.class, entity.name.type.class, support.class#FF7F00bold
entity.name.type, support.type#FFC700
entity.name.type.interface#00FFCCitalic
constant.numeric#FFC700
constant, constant.language, constant.character#FFC700
constant.language.boolean#FF7F00bold
variable.other.property, support.variable.property#A0A0A0
meta.object-literal.key#00A8FF
entity.name.tag, punctuation.definition.tag#FF7F00
entity.other.attribute-name#00FFCCitalic
punctuation, meta.brace#FFC700
string.regexp#FF5555
constant.character.escape#00FFCC
meta.decorator, punctuation.decorator#FFC700
invalid, invalid.illegal#FF5555strikethrough
markup.heading, entity.name.section#FF7F00bold
markup.bold#FFC700bold
markup.italic#00FFCCitalic
markup.underline.link#00A8FF
markup.inline.raw, markup.fenced_code#00FFE5
support.type.property-name.json#00A8FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFC700
support.type.property-name.css#00A8FF
support.constant.property-value.css#00FFCC