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#F5F5F5
  • activityBar.foreground#2E2E2E
  • activityBarBadge.background#D32F2F
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D32F2F
  • badge.foreground#FFFFFF
  • button.background#1976D2
  • button.foreground#FFFFFF
  • button.hoverBackground#1565C0
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#2E2E2E
  • editor.background#FAFAF5
  • editor.findMatchBackground#D32F3540
  • editor.findMatchHighlightBackground#D32F3525
  • editor.foreground#2E2E2E
  • editor.lineHighlightBackground#E8EAF6
  • editor.lineHighlightBorder#C5CAE9
  • editor.selectionBackground#1976D540
  • editor.selectionHighlightBackground#1976D525
  • editorBracketMatch.background#FBC02D33
  • editorBracketMatch.border#FBC02D
  • editorCursor.foreground#D32F2F
  • editorGroupHeader.tabsBackground#FFFFFF
  • editorIndentGuide.activeBackground#BBBBBB
  • editorIndentGuide.background#DDDDDD
  • editorLineNumber.activeForeground#2E2E2E
  • editorLineNumber.foreground#999999
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#1976D2
  • gitDecoration.conflictingResourceForeground#FBC02D
  • gitDecoration.deletedResourceForeground#D32F2F
  • gitDecoration.modifiedResourceForeground#1976D2
  • gitDecoration.untrackedResourceForeground#388E3C
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#2E2E2E
  • input.placeholderForeground#999999
  • inputOption.activeBorder#D32F2F
  • list.activeSelectionBackground#1976D2
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#D0D0D0
  • list.highlightForeground#D32F2F
  • list.hoverBackground#E0E0E0
  • minimap.background#FAFAF5
  • minimapSlider.activeBackground#1976D580
  • minimapSlider.background#1976D540
  • minimapSlider.hoverBackground#1976D560
  • panel.background#FFFFFF
  • panel.border#E0E0E0
  • panelTitle.activeBorder#D32F2F
  • panelTitle.activeForeground#2E2E2E
  • panelTitle.inactiveForeground#666666
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#AAAAAA88
  • scrollbarSlider.background#CCCCCC44
  • scrollbarSlider.hoverBackground#CCCCCC88
  • sideBar.background#FFFFFF
  • sideBar.foreground#2E2E2E
  • sideBarSectionHeader.background#F5F5F5
  • sideBarSectionHeader.foreground#2E2E2E
  • sideBarTitle.foreground#2E2E2E
  • statusBar.background#1976D2
  • statusBar.debuggingBackground#D32F2F
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#F5F5F5
  • statusBarItem.hoverBackground#1976D260
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#D32F2F
  • tab.activeForeground#2E2E2E
  • tab.border#CCCCCC
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#1976D2
  • terminal.ansiBrightBlue#1565C0
  • terminal.ansiBrightCyan#00E5FF
  • terminal.ansiBrightGreen#69F0AE
  • terminal.ansiBrightMagenta#FF4081
  • terminal.ansiBrightRed#FF5252
  • terminal.ansiBrightYellow#FFFF00
  • terminal.ansiCyan#0097A7
  • terminal.ansiGreen#388E3C
  • terminal.ansiMagenta#7B1FA2
  • terminal.ansiRed#D32F2F
  • terminal.ansiYellow#FBC02D
  • terminal.background#FAFAF5
  • terminal.foreground#2E2E2E
  • titleBar.activeBackground#EEEEEE
  • titleBar.activeForeground#2E2E2E
  • titleBar.inactiveBackground#E0E0E0
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#0097A7
keyword, storage.type, storage.modifier#D32F2Fbold
keyword.operator, punctuation.accessor#1976D2
variable, variable.other#2E2E2E
variable.parameter#1976D2italic
entity.name.function, support.function#D32F2F
meta.function-call#1976D2
entity.name.class, entity.name.type.class, support.class#D32F2Fbold
entity.name.type, support.type#1976D2
entity.name.type.interface#1976D2italic
constant.numeric#F57C00
constant, constant.language, constant.character#FF8F00
constant.language.boolean#D32F2Fbold
variable.other.property, support.variable.property#1976D2
meta.object-literal.key#D32F2F
entity.name.tag, punctuation.definition.tag#D32F2F
entity.other.attribute-name#1976D2italic
punctuation, meta.brace#9E9E9E
string.regexp#388E3C
constant.character.escape#C62828
meta.decorator, punctuation.decorator#FBC02D
invalid, invalid.illegal#D32F2Fstrikethrough
markup.heading, entity.name.section#D32F2Fbold
markup.bold#D32F2Fbold
markup.italic#1976D2italic
markup.underline.link#1976D2
markup.inline.raw, markup.fenced_code#0097A7
support.type.property-name.json#D32F2F
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#1976D2
support.type.property-name.css#D32F2F
support.constant.property-value.css#FBC02D