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#D32F2C
  • activityBar.background#F5F0EB
  • activityBar.foreground#212121
  • activityBarBadge.background#D32F2C
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D32F2C
  • badge.foreground#FFFFFF
  • button.background#D32F2C
  • button.foreground#FFFFFF
  • button.hoverBackground#C62828
  • dropdown.background#FFFFFF
  • dropdown.border#E0E0E0
  • dropdown.foreground#212121
  • editor.background#FFFAF0
  • editor.findMatchBackground#D32F2CAA
  • editor.findMatchHighlightBackground#D32F2C88
  • editor.foreground#212121
  • editor.lineHighlightBackground#FFE0E030
  • editor.lineHighlightBorder#FFE0E060
  • editor.selectionBackground#D32F2C40
  • editor.selectionHighlightBackground#D32F2C33
  • editorBracketMatch.background#FFE0E0
  • editorBracketMatch.border#D32F2C
  • editorCursor.foreground#D32F2C
  • editorGroupHeader.tabsBackground#F5F0EB
  • editorIndentGuide.activeBackground#9E9E9E88
  • editorIndentGuide.background#BDBDBD44
  • editorLineNumber.activeForeground#D32F2C
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#D32F2C
  • gitDecoration.conflictingResourceForeground#FBC02D
  • gitDecoration.deletedResourceForeground#D32F2C
  • gitDecoration.modifiedResourceForeground#1976D2
  • gitDecoration.untrackedResourceForeground#388E3C
  • input.background#FFFFFF
  • input.border#E0E0E0
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#D32F2C
  • list.activeSelectionBackground#FFE0E0
  • list.activeSelectionForeground#212121
  • list.focusBackground#FFE0E0
  • list.highlightForeground#D32F2C
  • list.hoverBackground#FFE0E060
  • minimap.background#FFFAF0
  • minimapSlider.activeBackground#D32F2C88
  • minimapSlider.background#9E9E9E44
  • minimapSlider.hoverBackground#9E9E9E88
  • panel.background#FFFAF0
  • panel.border#E0E0E0
  • panelTitle.activeBorder#D32F2C
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#9E9E9E
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#D32F2C88
  • scrollbarSlider.background#9E9E9E44
  • scrollbarSlider.hoverBackground#9E9E9E88
  • sideBar.background#FDF8F5
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#EFEAE8
  • sideBarSectionHeader.foreground#212121
  • sideBarTitle.foreground#212121
  • statusBar.background#D32F2C
  • statusBar.debuggingBackground#C62828
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#D32F2C
  • statusBarItem.hoverBackground#C6282880
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#D32F2C
  • tab.activeForeground#212121
  • tab.border#E0E0E0
  • tab.inactiveBackground#F5F0EB
  • tab.inactiveForeground#9E9E9E
  • terminal.ansiBlue#1976D2
  • terminal.ansiBrightBlue#42A5F5
  • terminal.ansiBrightCyan#26C6DA
  • terminal.ansiBrightGreen#66BB6A
  • terminal.ansiBrightMagenta#AB47BC
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightYellow#FFEB3B
  • terminal.ansiCyan#0097A7
  • terminal.ansiGreen#388E3C
  • terminal.ansiMagenta#7B1FA2
  • terminal.ansiRed#D32F2C
  • terminal.ansiYellow#FBC02D
  • terminal.background#FFFAF0
  • terminal.foreground#212121
  • titleBar.activeBackground#EFEAE8
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#F5F0EB
  • titleBar.inactiveForeground#9E9E9E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#D32F2F
keyword, storage.type, storage.modifier#E53935bold
keyword.operator, punctuation.accessor#E53935
variable, variable.other#212121
variable.parameter#9E9E9Eitalic
entity.name.function, support.function#1976D2
meta.function-call#1976D2
entity.name.class, entity.name.type.class, support.class#7B1FA2bold
entity.name.type, support.type#1976D2
entity.name.type.interface#1976D2italic
constant.numeric#388E3C
constant, constant.language, constant.character#FBC02D
constant.language.boolean#388E3Cbold
variable.other.property, support.variable.property#1976D2
meta.object-literal.key#42A5F5
entity.name.tag, punctuation.definition.tag#E53935
entity.other.attribute-name#7B1FA2italic
punctuation, meta.brace#212121
string.regexp#F57C00
constant.character.escape#D32F2F
meta.decorator, punctuation.decorator#FFB300
invalid, invalid.illegal#FF1744strikethrough
markup.heading, entity.name.section#E53935bold
markup.bold#D32F2Fbold
markup.italic#7B1FA2italic
markup.underline.link#1976D2
markup.inline.raw, markup.fenced_code#388E3C
support.type.property-name.json#1976D2
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#7B1FA2
support.type.property-name.css#42A5F5
support.constant.property-value.css#FBC02D
themesmith by CyberBoost - VS Code Theme