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#E0E0E0
  • activityBar.foreground#D32F2F
  • activityBarBadge.background#D32F2F
  • activityBarBadge.foreground#F5F5F5
  • badge.background#D32F2F
  • badge.foreground#FFFFFF
  • button.background#D32F2F
  • button.foreground#FFFFFF
  • button.hoverBackground#C62828
  • dropdown.background#FFFFFF
  • dropdown.border#BDBDBD
  • dropdown.foreground#2E2E2E
  • editor.background#F5F5F5
  • editor.findMatchBackground#FFCDD2
  • editor.findMatchHighlightBackground#FFEBEE
  • editor.foreground#2E2E2E
  • editor.lineHighlightBackground#FFFFCC33
  • editor.lineHighlightBorder#FFFFCC
  • editor.selectionBackground#B3E5FC
  • editor.selectionHighlightBackground#E1F5FE
  • editorBracketMatch.background#C8E6C9
  • editorBracketMatch.border#66BB6A
  • editorCursor.foreground#D32F2F
  • editorGroupHeader.tabsBackground#E0E0E0
  • editorIndentGuide.activeBackground#B0BEC5
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#D32F2F
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#D32F2F
  • gitDecoration.conflictingResourceForeground#FFEB3B
  • gitDecoration.deletedResourceForeground#D32F2F
  • gitDecoration.modifiedResourceForeground#D32F2F
  • gitDecoration.untrackedResourceForeground#8BC34A
  • input.background#FFFFFF
  • input.border#BDBDBD
  • input.foreground#2E2E2E
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#D32F2F
  • list.activeSelectionBackground#B3E5FC
  • list.activeSelectionForeground#2E2E2E
  • list.focusBackground#B3E5FC
  • list.highlightForeground#D32F2F
  • list.hoverBackground#E3F2FD
  • minimap.background#F5F5F5
  • minimapSlider.activeBackground#D32F2F66
  • minimapSlider.background#D32F2F22
  • minimapSlider.hoverBackground#D32F2F44
  • panel.background#F5F5F5
  • panel.border#E0E0E0
  • panelTitle.activeBorder#D32F2F
  • panelTitle.activeForeground#2E2E2E
  • panelTitle.inactiveForeground#9E9E9E
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#D32F2F88
  • scrollbarSlider.background#9E9E9E44
  • scrollbarSlider.hoverBackground#9E9E9E66
  • sideBar.background#E0E0E0
  • sideBar.foreground#2E2E2E
  • sideBarSectionHeader.background#E0E0E0
  • sideBarSectionHeader.foreground#D32F2F
  • sideBarTitle.foreground#D32F2F
  • statusBar.background#D7D7D7
  • statusBar.debuggingBackground#D32F2F
  • statusBar.foreground#2E2E2E
  • statusBar.noFolderBackground#E0E0E0
  • statusBarItem.hoverBackground#CCCCCC
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#D32F2F
  • tab.activeForeground#2E2E2E
  • tab.border#CCCCCC
  • tab.inactiveBackground#E0E0E0
  • tab.inactiveForeground#9E9E9E
  • terminal.ansiBlue#2196F3
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#4DD0E1
  • terminal.ansiBrightGreen#C5E1A5
  • terminal.ansiBrightMagenta#F48FB1
  • terminal.ansiBrightRed#FF8A80
  • terminal.ansiBrightYellow#FFF176
  • terminal.ansiCyan#00BCD4
  • terminal.ansiGreen#8BC34A
  • terminal.ansiMagenta#E91E63
  • terminal.ansiRed#D32F2F
  • terminal.ansiYellow#FFEB3B
  • terminal.background#F5F5F5
  • terminal.foreground#2E2E2E
  • titleBar.activeBackground#E0E0E0
  • titleBar.activeForeground#2E2E2E
  • titleBar.inactiveBackground#F5F5F5
  • titleBar.inactiveForeground#9E9E9E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#009688
keyword, storage.type, storage.modifier#D32F2Fbold
keyword.operator, punctuation.accessor#757575
variable, variable.other#2E2E2E
variable.parameter#757575italic
entity.name.function, support.function#009688
meta.function-call#009688
entity.name.class, entity.name.type.class, support.class#D32F2Fbold
entity.name.type, support.type#009688
entity.name.type.interface#009688italic
constant.numeric#FF9800
constant, constant.language, constant.character#FFEB3B
constant.language.boolean#FF9800bold
variable.other.property, support.variable.property#009688
meta.object-literal.key#009688
entity.name.tag, punctuation.definition.tag#D32F2F
entity.other.attribute-name#757575italic
punctuation, meta.brace#757575
string.regexp#FF9800
constant.character.escape#757575
meta.decorator, punctuation.decorator#FFEB3B
invalid, invalid.illegal#D32F2Fstrikethrough
markup.heading, entity.name.section#D32F2Fbold
markup.bold#D32F2Fbold
markup.italic#009688italic
markup.underline.link#009688
markup.inline.raw, markup.fenced_code#009688
support.type.property-name.json#D32F2F
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFEB3B
support.type.property-name.css#009688
support.constant.property-value.css#009688
themesmith by CyberBoost - VS Code Theme