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#D32F2F
  • activityBar.background#FFFFFF
  • activityBar.foreground#212121
  • activityBarBadge.background#D32F2F
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D32F2F
  • badge.foreground#FFFFFF
  • button.background#D32F2F
  • button.foreground#FFFFFF
  • button.hoverBackground#C62828
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFE082
  • editor.findMatchHighlightBackground#FFCC80
  • editor.foreground#212121
  • editor.lineHighlightBackground#FFF9C4
  • editor.lineHighlightBorder#FFD54F
  • editor.selectionBackground#BBDEFB
  • editor.selectionHighlightBackground#90CAF9
  • editorBracketMatch.background#C8E6C9
  • editorBracketMatch.border#81C784
  • editorCursor.foreground#D32F2F
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#B0BEC5
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#212121
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#D32F2F
  • gitDecoration.conflictingResourceForeground#FF9900
  • gitDecoration.deletedResourceForeground#D32F2F
  • gitDecoration.modifiedResourceForeground#005CC5
  • gitDecoration.untrackedResourceForeground#28A745
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#D32F2F
  • list.activeSelectionBackground#BBDEFB
  • list.activeSelectionForeground#212121
  • list.focusBackground#90CAF9
  • list.highlightForeground#D32F2F
  • list.hoverBackground#E3F2FD
  • minimap.background#F5F5F5
  • minimapSlider.activeBackgroundrgba(0,0,0,0.4)
  • minimapSlider.backgroundrgba(0,0,0,0.2)
  • minimapSlider.hoverBackgroundrgba(0,0,0,0.3)
  • panel.background#F5F5F5
  • panel.border#E0E0E0
  • panelTitle.activeBorder#D32F2F
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#BDBDBD
  • scrollbarSlider.activeBackgroundrgba(0,0,0,0.4)
  • scrollbarSlider.backgroundrgba(0,0,0,0.2)
  • scrollbarSlider.hoverBackgroundrgba(0,0,0,0.3)
  • sideBar.background#F0F0F0
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#E8E8E8
  • sideBarSectionHeader.foreground#212121
  • sideBarTitle.foreground#212121
  • statusBar.background#D32F2F
  • statusBar.debuggingBackground#E53935
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#757575
  • statusBarItem.hoverBackground#C62828
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#D32F2F
  • tab.activeForeground#212121
  • tab.border#E0E0E0
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#0366D6
  • terminal.ansiBrightBlue#5393FF
  • terminal.ansiBrightCyan#7FFFFF
  • terminal.ansiBrightGreen#66D966
  • terminal.ansiBrightMagenta#FF79C6
  • terminal.ansiBrightRed#FF6F61
  • terminal.ansiBrightYellow#FFDF57
  • terminal.ansiCyan#39C5BB
  • terminal.ansiGreen#28A745
  • terminal.ansiMagenta#D63384
  • terminal.ansiRed#D32F2F
  • terminal.ansiYellow#E6A23C
  • terminal.background#FAFAFA
  • terminal.foreground#212121
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#EEEEEE
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A737Ditalic
string, string.quoted, string.template#22863A
keyword, storage.type, storage.modifier#D32F2Fbold
keyword.operator, punctuation.accessor#C62828
variable, variable.other#005C5C
variable.parameter#005C5Citalic
entity.name.function, support.function#0366D6
meta.function-call#0366D6
entity.name.class, entity.name.type.class, support.class#6F42C1bold
entity.name.type, support.type#D15704
entity.name.type.interface#005C5Citalic
constant.numeric#005CC5
constant, constant.language, constant.character#5A0FC8
constant.language.boolean#D32F2Fbold
variable.other.property, support.variable.property#39C5BB
meta.object-literal.key#005C5C
entity.name.tag, punctuation.definition.tag#D32F2F
entity.other.attribute-name#005C5Citalic
punctuation, meta.brace#9E9E9E
string.regexp#28A745
constant.character.escape#D63384
meta.decorator, punctuation.decorator#FF9800
invalid, invalid.illegal#FF5370strikethrough
markup.heading, entity.name.section#0366D6bold
markup.bold#0366D6bold
markup.italic#6A737Ditalic
markup.underline.link#39C5BB
markup.inline.raw, markup.fenced_code#9E9E9E
support.type.property-name.json#6F42C1
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#6F42C1
support.type.property-name.css#005C5C
support.constant.property-value.css#D15704