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#FF8800
  • activityBar.background#EAEAEA
  • activityBar.foreground#1A1A1A
  • activityBarBadge.background#FF8800
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF8800
  • badge.foreground#FFFFFF
  • button.background#FF8800
  • button.foreground#FFFFFF
  • button.hoverBackground#FFAA33
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#1A1A1A
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFD166
  • editor.findMatchHighlightBackground#FFE8A1
  • editor.foreground#1A1A1A
  • editor.lineHighlightBackground#FFF5E6
  • editor.lineHighlightBorder#FFE0B2
  • editor.selectionBackground#FFDDC1
  • editor.selectionHighlightBackground#FFEDCC
  • editorBracketMatch.background#FFEDCC
  • editorBracketMatch.border#FF8800
  • editorCursor.foreground#3A86FF
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorIndentGuide.activeBackground#BBBBBB
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#3A86FF
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#FF8800
  • gitDecoration.conflictingResourceForeground#FF5D73
  • gitDecoration.deletedResourceForeground#E63946
  • gitDecoration.modifiedResourceForeground#FF8800
  • gitDecoration.untrackedResourceForeground#2A9D8F
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#1A1A1A
  • input.placeholderForeground#AAAAAA
  • inputOption.activeBorder#FF8800
  • list.activeSelectionBackground#FFDDC1
  • list.activeSelectionForeground#1A1A1A
  • list.focusBackground#FFE0B2
  • list.highlightForeground#FF8800
  • list.hoverBackground#FFF0E0
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#AAAAAA80
  • minimapSlider.background#CCCCCC80
  • minimapSlider.hoverBackground#BBBBBB80
  • panel.background#F5F5F5
  • panel.border#CCCCCC
  • panelTitle.activeBorder#FF8800
  • panelTitle.activeForeground#1A1A1A
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#BBBBBB
  • scrollbarSlider.activeBackground#AAAAAA80
  • scrollbarSlider.background#CCCCCC80
  • scrollbarSlider.hoverBackground#BBBBBB80
  • sideBar.background#F5F5F5
  • sideBar.foreground#1A1A1A
  • sideBarSectionHeader.background#EAEAEA
  • sideBarSectionHeader.foreground#1A1A1A
  • sideBarTitle.foreground#1A1A1A
  • statusBar.background#E0E0E0
  • statusBar.debuggingBackground#3A86FF
  • statusBar.foreground#1A1A1A
  • statusBar.noFolderBackground#EAEAEA
  • statusBarItem.hoverBackground#FFD6A5
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FF8800
  • tab.activeForeground#1A1A1A
  • tab.border#CCCCCC
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#3A86FF
  • terminal.ansiBrightBlue#5390D9
  • terminal.ansiBrightCyan#3AAFA9
  • terminal.ansiBrightGreen#3AAFA9
  • terminal.ansiBrightMagenta#FF5D73
  • terminal.ansiBrightRed#FF5D73
  • terminal.ansiBrightYellow#FFE066
  • terminal.ansiCyan#2A9D8F
  • terminal.ansiGreen#2A9D8F
  • terminal.ansiMagenta#E63946
  • terminal.ansiRed#E63946
  • terminal.ansiYellow#F4D35E
  • terminal.background#FAFAFA
  • terminal.foreground#1A1A1A
  • titleBar.activeBackground#EAEAEA
  • titleBar.activeForeground#1A1A1A
  • titleBar.inactiveBackground#F0F0F0
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#2A9D8F
keyword, storage.type, storage.modifier#3A86FFbold
keyword.operator, punctuation.accessor#FF8800
variable, variable.other#1A1A1A
variable.parameter#3AAFA9italic
entity.name.function, support.function#E63946
meta.function-call#E63946
entity.name.class, entity.name.type.class, support.class#F4D35Ebold
entity.name.type, support.type#2A9D8F
entity.name.type.interface#FF8800italic
constant.numeric#FF5D73
constant, constant.language, constant.character#FF8800
constant.language.boolean#3A86FFbold
variable.other.property, support.variable.property#2A9D8F
meta.object-literal.key#FF8800
entity.name.tag, punctuation.definition.tag#E63946
entity.other.attribute-name#3AAFA9italic
punctuation, meta.brace#555555
string.regexp#FF5D73
constant.character.escape#E63946
meta.decorator, punctuation.decorator#3A86FF
invalid, invalid.illegal#E63946strikethrough
markup.heading, entity.name.section#3A86FFbold
markup.bold#E63946bold
markup.italic#2A9D8Fitalic
markup.underline.link#3A86FF
markup.inline.raw, markup.fenced_code#FF5D73
support.type.property-name.json#FF8800
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#3A86FF
support.type.property-name.css#2A9D8F
support.constant.property-value.css#FF8800