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#FF6F00
  • activityBar.background#121212
  • activityBar.foreground#CCCCCC
  • activityBarBadge.background#FF6F00
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF6F00
  • badge.foreground#FFFFFF
  • button.background#FF6F00
  • button.foreground#FFFFFF
  • button.hoverBackground#FF8A00
  • dropdown.background#212121
  • dropdown.border#333333
  • dropdown.foreground#E0E0E0
  • editor.background#0F0F0F
  • editor.findMatchBackground#FFC10780
  • editor.findMatchHighlightBackground#FFF17650
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#262626
  • editor.lineHighlightBorder#333333
  • editor.selectionBackground#FF6F0040
  • editor.selectionHighlightBackground#FF8A0050
  • editorBracketMatch.background#FF8A0050
  • editorBracketMatch.border#FF6F00
  • editorCursor.foreground#FF6F00
  • editorGroupHeader.tabsBackground#151515
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#FF6F00
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#555555
  • focusBorder#FF6F00
  • gitDecoration.conflictingResourceForeground#E91E63
  • gitDecoration.deletedResourceForeground#F44336
  • gitDecoration.modifiedResourceForeground#FFAB40
  • gitDecoration.untrackedResourceForeground#8BC34A
  • input.background#212121
  • input.border#333333
  • input.foreground#E0E0E0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#FF6F00
  • list.activeSelectionBackground#333333
  • list.activeSelectionForeground#FF6F00
  • list.focusBackground#2C2C2C
  • list.highlightForeground#FFC107
  • list.hoverBackground#262626
  • minimap.background#0F0F0F
  • minimapSlider.activeBackground#777777
  • minimapSlider.background#333333
  • minimapSlider.hoverBackground#555555
  • panel.background#151515
  • panel.border#333333
  • panelTitle.activeBorder#FF6F00
  • panelTitle.activeForeground#FF6F00
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#666666
  • scrollbarSlider.background#444444
  • scrollbarSlider.hoverBackground#555555
  • sideBar.background#151515
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#1E1E1E
  • sideBarSectionHeader.foreground#FF6F00
  • sideBarTitle.foreground#E0E0E0
  • statusBar.background#212121
  • statusBar.debuggingBackground#B71C1C
  • statusBar.foreground#E0E0E0
  • statusBar.noFolderBackground#424242
  • statusBarItem.hoverBackground#333333
  • tab.activeBackground#212121
  • tab.activeBorder#FF6F00
  • tab.activeForeground#FF6F00
  • tab.border#000000
  • tab.inactiveBackground#151515
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#2196F3
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#4DD0E1
  • terminal.ansiBrightGreen#AED581
  • terminal.ansiBrightMagenta#F06292
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightYellow#FFF176
  • terminal.ansiCyan#00BCD4
  • terminal.ansiGreen#8BC34A
  • terminal.ansiMagenta#E91E63
  • terminal.ansiRed#F44336
  • terminal.ansiYellow#FFEB3B
  • terminal.background#0F0F0F
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#1A1A1A
  • titleBar.activeForeground#E0E0E0
  • titleBar.inactiveBackground#151515
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A6A6Aitalic
string, string.quoted, string.template#FFC107
keyword, storage.type, storage.modifier#FF5722bold
keyword.operator, punctuation.accessor#FF8A65
variable, variable.other#80CBC4
variable.parameter#80CBC4italic
entity.name.function, support.function#FFCC80
meta.function-call#FFB74D
entity.name.class, entity.name.type.class, support.class#FFAB91bold
entity.name.type, support.type#FFD180
entity.name.type.interface#FFCCBCitalic
constant.numeric#F48FB1
constant, constant.language, constant.character#E1BEE7
constant.language.boolean#FF9800bold
variable.other.property, support.variable.property#FFECB3
meta.object-literal.key#FF8A65
entity.name.tag, punctuation.definition.tag#FF7043
entity.other.attribute-name#FFAB40italic
punctuation, meta.brace#B0BEC5
string.regexp#DCE775
constant.character.escape#FF5252
meta.decorator, punctuation.decorator#FF4081
invalid, invalid.illegal#F44336strikethrough
markup.heading, entity.name.section#FF6E40bold
markup.bold#FF8A65bold
markup.italic#FFAB91italic
markup.underline.link#4FC3F7
markup.inline.raw, markup.fenced_code#B2FF59
support.type.property-name.json#FF7043
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFAB40
support.type.property-name.css#FFCC80
support.constant.property-value.css#FFB74D
themesmith by CyberBoost - VS Code Theme