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#0D0D0D
  • activityBar.foreground#D97706
  • activityBarBadge.background#4CAF50
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D97706
  • badge.foreground#FFFFFF
  • button.background#4CAF50
  • button.foreground#FFFFFF
  • button.hoverBackground#81C784
  • dropdown.background#2A2A2A
  • dropdown.border#555555
  • dropdown.foreground#E0E0E0
  • editor.background#1B1B1B
  • editor.findMatchBackground#FF8C0060
  • editor.findMatchHighlightBackground#FF8C0030
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#2A2A2A
  • editor.lineHighlightBorder#3E3E3E
  • editor.selectionBackground#4CAF5070
  • editor.selectionHighlightBackground#4CAF5050
  • editorBracketMatch.background#4CAF5060
  • editorBracketMatch.border#4CAF50
  • editorCursor.foreground#FF8C00
  • editorGroupHeader.tabsBackground#141414
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#FF8C00
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#555555
  • focusBorder#4CAF50
  • gitDecoration.conflictingResourceForeground#FF8C00
  • gitDecoration.deletedResourceForeground#F44336
  • gitDecoration.modifiedResourceForeground#2196F3
  • gitDecoration.untrackedResourceForeground#4CAF50
  • input.background#2A2A2A
  • input.border#555555
  • input.foreground#E0E0E0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#FF8C00
  • list.activeSelectionBackground#4CAF5050
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#4CAF5030
  • list.highlightForeground#FF8C00
  • list.hoverBackground#3E3E3E
  • minimap.background#141414
  • minimapSlider.activeBackground#99999980
  • minimapSlider.background#55555580
  • minimapSlider.hoverBackground#77777780
  • panel.background#141414
  • panel.border#0D0D0D
  • panelTitle.activeBorder#FF8C00
  • panelTitle.activeForeground#FF8C00
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#99999980
  • scrollbarSlider.background#55555580
  • scrollbarSlider.hoverBackground#77777780
  • sideBar.background#141414
  • sideBar.foreground#E0E0E0
  • sideBarSectionHeader.background#1B1B1B
  • sideBarSectionHeader.foreground#F5E0C3
  • sideBarTitle.foreground#D97706
  • statusBar.background#2C2C2C
  • statusBar.debuggingBackground#D97706
  • statusBar.foreground#F5E0C3
  • statusBar.noFolderBackground#2C2C2C
  • statusBarItem.hoverBackground#3E3E3E
  • tab.activeBackground#1B1B1B
  • tab.activeBorder#FF8C00
  • tab.activeForeground#FF8C00
  • tab.border#0D0D0D
  • tab.inactiveBackground#141414
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#2196F3
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#4DD0E1
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#F06292
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightYellow#FFF176
  • terminal.ansiCyan#00BCD4
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#E91E63
  • terminal.ansiRed#F44336
  • terminal.ansiYellow#FFEB3B
  • terminal.background#1B1B1B
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#0D0D0D
  • titleBar.activeForeground#E0E0E0
  • titleBar.inactiveBackground#080808
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8B5E3Citalic
string, string.quoted, string.template#4CAF50
keyword, storage.type, storage.modifier#FF8C00bold
keyword.operator, punctuation.accessor#00BCD4
variable, variable.other#E0E0E0
variable.parameter#8B5E3Citalic
entity.name.function, support.function#4CAF50
meta.function-call#81C784
entity.name.class, entity.name.type.class, support.class#D97706bold
entity.name.type, support.type#00BCD4
entity.name.type.interface#FF8C00italic
constant.numeric#E91E63
constant, constant.language, constant.character#FFEB3B
constant.language.boolean#F44336bold
variable.other.property, support.variable.property#D97706
meta.object-literal.key#4CAF50
entity.name.tag, punctuation.definition.tag#F44336
entity.other.attribute-name#FF8C00italic
punctuation, meta.brace#777777
string.regexp#E91E63
constant.character.escape#F44336
meta.decorator, punctuation.decorator#00BCD4
invalid, invalid.illegal#F44336strikethrough
markup.heading, entity.name.section#FF8C00bold
markup.bold#FF8C00bold
markup.italic#4CAF50italic
markup.underline.link#2196F3
markup.inline.raw, markup.fenced_code#FFEB3B
support.type.property-name.json#00BCD4
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF8C00
support.type.property-name.css#4CAF50
support.constant.property-value.css#00BCD4