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#E63232
  • activityBar.background#FFFFFF
  • activityBar.foreground#E63232
  • activityBarBadge.background#E63232
  • activityBarBadge.foreground#FFFFFF
  • badge.background#E63232
  • badge.foreground#FFFFFF
  • button.background#E63232
  • button.foreground#FFFFFF
  • button.hoverBackground#C12727
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFE59E
  • editor.findMatchHighlightBackground#FFF2A1
  • editor.foreground#212121
  • editor.lineHighlightBackground#FFF5E6
  • editor.lineHighlightBorder#FFCC80
  • editor.selectionBackground#B3D4FC
  • editor.selectionHighlightBackground#D7E5FA
  • editorBracketMatch.background#E0F7FA
  • editorBracketMatch.border#00ACC1
  • editorCursor.foreground#E63232
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorIndentGuide.activeBackground#9E9E9E
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#E63232
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#E63232
  • gitDecoration.conflictingResourceForeground#FF9800
  • gitDecoration.deletedResourceForeground#E63232
  • gitDecoration.modifiedResourceForeground#0055AB
  • gitDecoration.untrackedResourceForeground#5CBF2A
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#E63232
  • list.activeSelectionBackground#B3D4FC
  • list.activeSelectionForeground#212121
  • list.focusBackground#D0E3FF
  • list.highlightForeground#E63232
  • list.hoverBackground#E8F0FE
  • minimap.background#FFFFFF
  • minimapSlider.activeBackground#AAAAAA
  • minimapSlider.background#CCCCCC80
  • minimapSlider.hoverBackground#BBBBBB
  • panel.background#FFFFFF
  • panel.border#E0E0E0
  • panelTitle.activeBorder#E63232
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#AAAAAA
  • scrollbarSlider.background#CCCCCC80
  • scrollbarSlider.hoverBackground#BBBBBB
  • sideBar.background#F5F5F5
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#FFFFFF
  • sideBarSectionHeader.foreground#E63232
  • sideBarTitle.foreground#E63232
  • statusBar.background#E63232
  • statusBar.debuggingBackground#0055AB
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#E63232
  • statusBarItem.hoverBackground#C12727
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#E63232
  • tab.activeForeground#E63232
  • tab.border#CCCCCC
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#666666
  • terminal.ansiBlue#0055AB
  • terminal.ansiBrightBlue#4285F4
  • terminal.ansiBrightCyan#00D1F1
  • terminal.ansiBrightGreen#7ED321
  • terminal.ansiBrightMagenta#D61A79
  • terminal.ansiBrightRed#FF5B5B
  • terminal.ansiBrightYellow#FFEB3B
  • terminal.ansiCyan#00AEEF
  • terminal.ansiGreen#5CBF2A
  • terminal.ansiMagenta#B927A9
  • terminal.ansiRed#E63232
  • terminal.ansiYellow#F2CD37
  • terminal.background#FAFAFA
  • terminal.foreground#212121
  • titleBar.activeBackground#E63232
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#D0D0D0
  • titleBar.inactiveForeground#666666

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#5CBF2A
keyword, storage.type, storage.modifier#E63232bold
keyword.operator, punctuation.accessor#212121
variable, variable.other#212121
variable.parameter#0055ABitalic
entity.name.function, support.function#0055AB
meta.function-call#4285F4
entity.name.class, entity.name.type.class, support.class#B927A9bold
entity.name.type, support.type#FF9800
entity.name.type.interface#FF9800italic
constant.numeric#FF9800
constant, constant.language, constant.character#FF9800
constant.language.boolean#E63232bold
variable.other.property, support.variable.property#212121
meta.object-literal.key#212121
entity.name.tag, punctuation.definition.tag#E63232
entity.other.attribute-name#0055ABitalic
punctuation, meta.brace#212121
string.regexp#F2CD37
constant.character.escape#FF9800
meta.decorator, punctuation.decorator#B927A9
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#E63232bold
markup.bold#212121bold
markup.italic#212121italic
markup.underline.link#0055AB
markup.inline.raw, markup.fenced_code#5CBF2A
support.type.property-name.json#0055AB
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#B927A9
support.type.property-name.css#FF9800
support.constant.property-value.css#F2CD37
themesmith by CyberBoost - VS Code Theme