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#FF5722
  • activityBar.background#FFEB3B
  • activityBar.foreground#212121
  • activityBarBadge.background#FF5722
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF5722
  • badge.foreground#FFFFFF
  • button.background#FFAB40
  • button.foreground#212121
  • button.hoverBackground#FF9800
  • dropdown.background#FFFFFF
  • dropdown.border#E0E0E0
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFAB40
  • editor.findMatchHighlightBackground#FFCC80
  • editor.foreground#212121
  • editor.lineHighlightBackground#FFFAE6
  • editor.lineHighlightBorder#FFEB3B
  • editor.selectionBackground#FFCC80
  • editor.selectionHighlightBackground#FFE0B2
  • editorBracketMatch.background#FFE082
  • editorBracketMatch.border#FFAB40
  • editorCursor.foreground#212121
  • editorGroupHeader.tabsBackground#FFF59D
  • editorIndentGuide.activeBackground#FFAB40
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#212121
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#FF5722
  • gitDecoration.conflictingResourceForeground#E040FB
  • gitDecoration.deletedResourceForeground#F44336
  • gitDecoration.modifiedResourceForeground#FFAB40
  • gitDecoration.untrackedResourceForeground#8BC34A
  • input.background#FFFFFF
  • input.border#E0E0E0
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#FF5722
  • list.activeSelectionBackground#FFCC80
  • list.activeSelectionForeground#212121
  • list.focusBackground#FFF59D
  • list.highlightForeground#FF5722
  • list.hoverBackground#FFE0B2
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#9E9E9E
  • minimapSlider.background#E0E0E0
  • minimapSlider.hoverBackground#BDBDBD
  • panel.background#FFF59D
  • panel.border#E0E0E0
  • panelTitle.activeBorder#FF5722
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#757575
  • scrollbar.shadow#BDBDBD
  • scrollbarSlider.activeBackground#9E9E9E
  • scrollbarSlider.background#E0E0E0
  • scrollbarSlider.hoverBackground#BDBDBD
  • sideBar.background#FFF59D
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#FFEB3B
  • sideBarSectionHeader.foreground#212121
  • sideBarTitle.foreground#212121
  • statusBar.background#FFEB3B
  • statusBar.debuggingBackground#FF5722
  • statusBar.foreground#212121
  • statusBar.noFolderBackground#FFF59D
  • statusBarItem.hoverBackground#FFCC80
  • tab.activeBackground#FFEB3B
  • tab.activeBorder#FF5722
  • tab.activeForeground#212121
  • tab.border#E0E0E0
  • tab.inactiveBackground#FFF59D
  • tab.inactiveForeground#757575
  • terminal.ansiBlue#2196F3
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#4DD0E1
  • terminal.ansiBrightGreen#AED581
  • terminal.ansiBrightMagenta#BA68C8
  • terminal.ansiBrightRed#E57373
  • terminal.ansiBrightYellow#FFEE58
  • terminal.ansiCyan#00BCD4
  • terminal.ansiGreen#8BC34A
  • terminal.ansiMagenta#E040FB
  • terminal.ansiRed#F44336
  • terminal.ansiYellow#FFEB3B
  • terminal.background#FAFAFA
  • terminal.foreground#212121
  • titleBar.activeBackground#FFEB3B
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#FFF59D
  • titleBar.inactiveForeground#757575

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#8BC34A
keyword, storage.type, storage.modifier#FF5722bold
keyword.operator, punctuation.accessor#FFAB40
variable, variable.other#212121
variable.parameter#FF9800italic
entity.name.function, support.function#2196F3
meta.function-call#64B5F6
entity.name.class, entity.name.type.class, support.class#E040FBbold
entity.name.type, support.type#00BCD4
entity.name.type.interface#FFCC80italic
constant.numeric#F44336
constant, constant.language, constant.character#FF9800
constant.language.boolean#FF5722bold
variable.other.property, support.variable.property#607D8B
meta.object-literal.key#FFAB40
entity.name.tag, punctuation.definition.tag#F44336
entity.other.attribute-name#FF9800italic
punctuation, meta.brace#212121
string.regexp#E040FB
constant.character.escape#FF5722
meta.decorator, punctuation.decorator#00BCD4
invalid, invalid.illegal#F44336strikethrough
markup.heading, entity.name.section#FF5722bold
markup.bold#FF5722bold
markup.italic#607D8Bitalic
markup.underline.link#2196F3
markup.inline.raw, markup.fenced_code#8BC34A
support.type.property-name.json#FFAB40
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#E040FB
support.type.property-name.css#00BCD4
support.constant.property-value.css#FF9800