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#D32F2F
  • activityBarBadge.background#D32F2F
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF8A65
  • badge.foreground#FFFFFF
  • button.background#D32F2F
  • button.foreground#FFFFFF
  • button.hoverBackground#C62828
  • dropdown.background#FFFFFF
  • dropdown.border#BDBDBD
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFD54F
  • editor.findMatchHighlightBackground#FFE082
  • editor.foreground#212121
  • editor.lineHighlightBackground#FFF3E0
  • editor.lineHighlightBorder#FFCC80
  • editor.selectionBackground#FFCDD2
  • editor.selectionHighlightBackground#FFE0B2
  • editorBracketMatch.background#FFECB3
  • editorBracketMatch.border#FFB300
  • editorCursor.foreground#D32F2F
  • editorGroupHeader.tabsBackground#FFFFFF
  • editorIndentGuide.activeBackground#B0BEC5
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#D32F2F
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#D32F2F
  • gitDecoration.conflictingResourceForeground#D50000
  • gitDecoration.deletedResourceForeground#D32F2F
  • gitDecoration.modifiedResourceForeground#FFB300
  • gitDecoration.untrackedResourceForeground#388E3C
  • input.background#FFFFFF
  • input.border#BDBDBD
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#D32F2F
  • list.activeSelectionBackground#FFCDD2
  • list.activeSelectionForeground#212121
  • list.focusBackground#FFECB3
  • list.highlightForeground#D32F2F
  • list.hoverBackground#FFE0B2
  • minimap.background#FFFFFF
  • minimapSlider.activeBackground#607D8B
  • minimapSlider.background#B0BEC5
  • minimapSlider.hoverBackground#90A4AE
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#D32F2F
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#757575
  • scrollbar.shadow#BDBDBD
  • scrollbarSlider.activeBackground#90A4AE
  • scrollbarSlider.background#E0E0E0
  • scrollbarSlider.hoverBackground#B0BEC5
  • sideBar.background#FFFFFF
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#F5F5F5
  • sideBarSectionHeader.foreground#212121
  • sideBarTitle.foreground#D32F2F
  • statusBar.background#D32F2F
  • statusBar.debuggingBackground#FF8F00
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#B0BEC5
  • statusBarItem.hoverBackground#C62828
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#D32F2F
  • tab.activeForeground#D32F2F
  • tab.border#E0E0E0
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#757575
  • terminal.ansiBlue#1976D2
  • terminal.ansiBrightBlue#42A5F5
  • terminal.ansiBrightCyan#00BCD4
  • terminal.ansiBrightGreen#66BB6A
  • terminal.ansiBrightMagenta#AB47BC
  • terminal.ansiBrightRed#E53935
  • terminal.ansiBrightYellow#FFEB3B
  • terminal.ansiCyan#0097A7
  • terminal.ansiGreen#388E3C
  • terminal.ansiMagenta#7B1FA2
  • terminal.ansiRed#D32F2F
  • terminal.ansiYellow#FBC02D
  • terminal.background#FFFFFF
  • terminal.foreground#212121
  • titleBar.activeBackground#D32F2F
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#E0E0E0
  • titleBar.inactiveForeground#212121

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A9955italic
string, string.quoted, string.template#CE9178
keyword, storage.type, storage.modifier#D32F2Fbold
keyword.operator, punctuation.accessor#D32F2F
variable, variable.other#9CDCFE
variable.parameter#C586C0italic
entity.name.function, support.function#DCDCAA
meta.function-call#B5CEA8
entity.name.class, entity.name.type.class, support.class#4EC9B0bold
entity.name.type, support.type#569CD6
entity.name.type.interface#C586C0italic
constant.numeric#B5CEA8
constant, constant.language, constant.character#D16969
constant.language.boolean#569CD6bold
variable.other.property, support.variable.property#9CDCFE
meta.object-literal.key#9CDCFE
entity.name.tag, punctuation.definition.tag#D32F2F
entity.other.attribute-name#C586C0italic
punctuation, meta.brace#808080
string.regexp#D16969
constant.character.escape#D16969
meta.decorator, punctuation.decorator#C586C0
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#D32F2Fbold
markup.bold#D32F2Fbold
markup.italic#C586C0italic
markup.underline.link#1976D2
markup.inline.raw, markup.fenced_code#9CDCFE
support.type.property-name.json#4EC9B0
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C586C0
support.type.property-name.css#DCDCAA
support.constant.property-value.css#B5CEA8