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#C62828
  • activityBar.background#E0E0E0
  • activityBar.foreground#333333
  • activityBarBadge.background#C62828
  • activityBarBadge.foreground#FFFFFF
  • badge.background#C62828
  • badge.foreground#FFFFFF
  • button.background#C5CAE9
  • button.foreground#212121
  • button.hoverBackground#9FA8DA
  • dropdown.background#FFFFFF
  • dropdown.border#BDBDBD
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFECB3
  • editor.findMatchHighlightBackground#FFE082
  • editor.foreground#333333
  • editor.lineHighlightBackground#FFF9C4
  • editor.lineHighlightBorder#FFEB3B
  • editor.selectionBackground#B3E5FC
  • editor.selectionHighlightBackground#E1F5FE
  • editorBracketMatch.background#C8E6C9
  • editorBracketMatch.border#66BB6A
  • editorCursor.foreground#D32F2F
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#90A4AE
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#616161
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#C62828
  • gitDecoration.conflictingResourceForeground#D32F2F
  • gitDecoration.deletedResourceForeground#F44336
  • gitDecoration.modifiedResourceForeground#FF9800
  • gitDecoration.untrackedResourceForeground#4CAF50
  • input.background#FFFFFF
  • input.border#BDBDBD
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#C62828
  • list.activeSelectionBackground#C5CAE9
  • list.activeSelectionForeground#212121
  • list.focusBackground#BBDEFB
  • list.highlightForeground#D32F2F
  • list.hoverBackground#E3F2FD
  • minimap.background#F0F0F0
  • minimapSlider.activeBackground#607D8B
  • minimapSlider.background#90A4AE
  • minimapSlider.hoverBackground#78909C
  • panel.background#F5F5F5
  • panel.border#E0E0E0
  • panelTitle.activeBorder#C62828
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#607D8B
  • scrollbarSlider.background#B0BEC5
  • scrollbarSlider.hoverBackground#90A4AE
  • sideBar.background#F5F5F5
  • sideBar.foreground#333333
  • sideBarSectionHeader.background#E0E0E0
  • sideBarSectionHeader.foreground#212121
  • sideBarTitle.foreground#212121
  • statusBar.background#C5CAE9
  • statusBar.debuggingBackground#FFCC80
  • statusBar.foreground#212121
  • statusBar.noFolderBackground#E0E0E0
  • statusBarItem.hoverBackground#B0BEC5
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#C62828
  • tab.activeForeground#212121
  • tab.border#CCCCCC
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#2196F3
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#4DD0E1
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#BA68C8
  • terminal.ansiBrightRed#E57373
  • terminal.ansiBrightYellow#FFF176
  • terminal.ansiCyan#00BCD4
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#9C27B0
  • terminal.ansiRed#F44336
  • terminal.ansiYellow#FFEB3B
  • terminal.background#FFFFFF
  • terminal.foreground#212121
  • titleBar.activeBackground#E0E0E0
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#D0D0D0
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#43A047
keyword, storage.type, storage.modifier#1565C0bold
keyword.operator, punctuation.accessor#9E9E9E
variable, variable.other#212121
variable.parameter#FF7043italic
entity.name.function, support.function#6A1B9A
meta.function-call#8E24AA
entity.name.class, entity.name.type.class, support.class#004D40bold
entity.name.type, support.type#00695C
entity.name.type.interface#00796Bitalic
constant.numeric#EF6C00
constant, constant.language, constant.character#D84315
constant.language.boolean#C62828bold
variable.other.property, support.variable.property#5E35B1
meta.object-literal.key#3949AB
entity.name.tag, punctuation.definition.tag#D32F2F
entity.other.attribute-name#FF8A65italic
punctuation, meta.brace#616161
string.regexp#E53935
constant.character.escape#FF5252
meta.decorator, punctuation.decorator#8E24AA
invalid, invalid.illegal#B71C1Cstrikethrough
markup.heading, entity.name.section#1565C0bold
markup.bold#1565C0bold
markup.italic#616161italic
markup.underline.link#1E88E5
markup.inline.raw, markup.fenced_code#795548
support.type.property-name.json#00796B
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#6D4C41
support.type.property-name.css#FFB300
support.constant.property-value.css#C0CA33
themesmith by CyberBoost - VS Code Theme