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#FF9933
  • activityBar.background#FFEDD5
  • activityBar.foreground#5A3400
  • activityBarBadge.background#009B3A
  • activityBarBadge.foreground#FFFFFF
  • badge.background#009B3A
  • badge.foreground#FFFFFF
  • button.background#FF9933
  • button.foreground#FFFFFF
  • button.hoverBackground#FFB74D
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#2E2E2E
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFF59D
  • editor.findMatchHighlightBackground#FFF176
  • editor.foreground#2E2E2E
  • editor.lineHighlightBackground#FFEDCC
  • editor.lineHighlightBorder#FFCC80
  • editor.selectionBackground#FFECB3
  • editor.selectionHighlightBackground#FFE082
  • editorBracketMatch.background#FFECB3
  • editorBracketMatch.border#FFB74D
  • editorCursor.foreground#FF5722
  • editorGroupHeader.tabsBackground#FFF8E1
  • editorIndentGuide.activeBackground#B0BEC5
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#5A3400
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#FF5722
  • gitDecoration.conflictingResourceForeground#FF5722
  • gitDecoration.deletedResourceForeground#E53935
  • gitDecoration.modifiedResourceForeground#1976D2
  • gitDecoration.untrackedResourceForeground#43A047
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#2E2E2E
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#FF9933
  • list.activeSelectionBackground#FFEDCC
  • list.activeSelectionForeground#5A3400
  • list.focusBackground#FFEDCC
  • list.highlightForeground#FF5722
  • list.hoverBackground#FFF8E1
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#757575CC
  • minimapSlider.background#BDBDBD66
  • minimapSlider.hoverBackground#9E9E9E99
  • panel.background#FFF8E1
  • panel.border#E0E0E0
  • panelTitle.activeBorder#FF9933
  • panelTitle.activeForeground#5A3400
  • panelTitle.inactiveForeground#A1887F
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#757575CC
  • scrollbarSlider.background#BDBDBD66
  • scrollbarSlider.hoverBackground#9E9E9E99
  • sideBar.background#FFF8E1
  • sideBar.foreground#4E342E
  • sideBarSectionHeader.background#FFEDD5
  • sideBarSectionHeader.foreground#5A3400
  • sideBarTitle.foreground#5A3400
  • statusBar.background#FF9933
  • statusBar.debuggingBackground#4B0082
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#009B3A
  • statusBarItem.hoverBackground#FFB74D
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FF9933
  • tab.activeForeground#5A3400
  • tab.border#E0E0E0
  • tab.inactiveBackground#FFF8E1
  • tab.inactiveForeground#A1887F
  • terminal.ansiBlue#1976D2
  • terminal.ansiBrightBlue#1565C0
  • terminal.ansiBrightCyan#00ACC1
  • terminal.ansiBrightGreen#388E3C
  • terminal.ansiBrightMagenta#7B1FA2
  • terminal.ansiBrightRed#C62828
  • terminal.ansiBrightYellow#FBC02D
  • terminal.ansiCyan#26A69A
  • terminal.ansiGreen#43A047
  • terminal.ansiMagenta#8E24AA
  • terminal.ansiRed#E53935
  • terminal.ansiYellow#FDD835
  • terminal.background#FAFAFA
  • terminal.foreground#2E2E2E
  • titleBar.activeBackground#FFEDD5
  • titleBar.activeForeground#5A3400
  • titleBar.inactiveBackground#FFF8E1
  • titleBar.inactiveForeground#A1887F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7B7B7Bitalic
string, string.quoted, string.template#43A047
keyword, storage.type, storage.modifier#FF5722bold
keyword.operator, punctuation.accessor#5A3400
variable, variable.other#1976D2
variable.parameter#9C27B0italic
entity.name.function, support.function#4B0082
meta.function-call#4B0082
entity.name.class, entity.name.type.class, support.class#D84315bold
entity.name.type, support.type#009B3A
entity.name.type.interface#6A1B9Aitalic
constant.numeric#F57C00
constant, constant.language, constant.character#009B3A
constant.language.boolean#E53935bold
variable.other.property, support.variable.property#1565C0
meta.object-literal.key#6D4C41
entity.name.tag, punctuation.definition.tag#FF7043
entity.other.attribute-name#8E24AAitalic
punctuation, meta.brace#2E2E2E
string.regexp#26A69A
constant.character.escape#D32F2F
meta.decorator, punctuation.decorator#7B1FA2
invalid, invalid.illegal#B00020strikethrough
markup.heading, entity.name.section#FF5722bold
markup.bold#D84315bold
markup.italic#6A1B9Aitalic
markup.underline.link#1976D2
markup.inline.raw, markup.fenced_code#43A047
support.type.property-name.json#009B3A
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF7043
support.type.property-name.css#FF5722
support.constant.property-value.css#1976D2