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#3AB4C5
  • activityBar.background#FAFAFA
  • activityBar.foreground#3AB4C5
  • activityBarBadge.background#3AB4C5
  • activityBarBadge.foreground#FFFFFF
  • badge.background#3AB4C5
  • badge.foreground#FFFFFF
  • button.background#3AB4C5
  • button.foreground#FFFFFF
  • button.hoverBackground#3AB4C580
  • dropdown.background#F0F0F0
  • dropdown.border#E0E0E0
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackground#64A12D44
  • editor.findMatchHighlightBackground#64A12D22
  • editor.foreground#212121
  • editor.lineHighlightBackground#3AB4C520
  • editor.lineHighlightBorder#3AB4C540
  • editor.selectionBackground#3AB4C560
  • editor.selectionHighlightBackground#3AB4C530
  • editorBracketMatch.background#3AB4C540
  • editorBracketMatch.border#3AB4C5
  • editorCursor.foreground#3AB4C5
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#9E9E9E
  • editorIndentGuide.background#CFD8DC
  • editorLineNumber.activeForeground#3AB4C5
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#B0BEC5
  • focusBorder#3AB4C5
  • gitDecoration.conflictingResourceForeground#F4A261
  • gitDecoration.deletedResourceForeground#D72638
  • gitDecoration.modifiedResourceForeground#3AB4C5
  • gitDecoration.untrackedResourceForeground#64A12D
  • input.background#F0F0F0
  • input.border#E0E0E0
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#3AB4C5
  • list.activeSelectionBackground#3AB4C540
  • list.activeSelectionForeground#212121
  • list.focusBackground#3AB4C540
  • list.highlightForeground#3AB4C5
  • list.hoverBackground#3AB4C530
  • minimap.background#F0F0F0
  • minimapSlider.activeBackground#3AB4C540
  • minimapSlider.background#9E9E9E22
  • minimapSlider.hoverBackground#9E9E9E44
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#3AB4C5
  • panelTitle.activeForeground#3AB4C5
  • panelTitle.inactiveForeground#9E9E9E
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#3AB4C5CC
  • scrollbarSlider.background#9E9E9EAA
  • scrollbarSlider.hoverBackground#9E9E9ECC
  • sideBar.background#F5F5F5
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#EBEBEB
  • sideBarSectionHeader.foreground#3AB4C5
  • sideBarTitle.foreground#3AB4C5
  • statusBar.background#3AB4C5
  • statusBar.debuggingBackground#64A12D
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#EBEBEB
  • statusBarItem.hoverBackground#3AB4C580
  • tab.activeBackground#FAFAFA
  • tab.activeBorder#3AB4C5
  • tab.activeForeground#212121
  • tab.border#E0E0E0
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#9E9E9E
  • terminal.ansiBlue#3AB4C5
  • terminal.ansiBrightBlue#3AB4C5
  • terminal.ansiBrightCyan#3AB4C5
  • terminal.ansiBrightGreen#64A12D
  • terminal.ansiBrightMagenta#E07A5F
  • terminal.ansiBrightRed#D72638
  • terminal.ansiBrightYellow#F4A261
  • terminal.ansiCyan#3AB4C5
  • terminal.ansiGreen#64A12D
  • terminal.ansiMagenta#E07A5F
  • terminal.ansiRed#D72638
  • terminal.ansiYellow#F4A261
  • terminal.background#FAFAFA
  • terminal.foreground#212121
  • titleBar.activeBackground#FAFAFA
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#F0F0F0
  • titleBar.inactiveForeground#9E9E9E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#2A9D8F
keyword, storage.type, storage.modifier#3AB4C5bold
keyword.operator, punctuation.accessor#3AB4C5
variable, variable.other#212121
variable.parameter#64A12Ditalic
entity.name.function, support.function#3AB4C5
meta.function-call#3AB4C5
entity.name.class, entity.name.type.class, support.class#3AB4C5bold
entity.name.type, support.type#9E9E9E
entity.name.type.interface#9E9E9Eitalic
constant.numeric#64A12D
constant, constant.language, constant.character#64A12D
constant.language.boolean#3AB4C5bold
variable.other.property, support.variable.property#212121
meta.object-literal.key#3AB4C5
entity.name.tag, punctuation.definition.tag#3AB4C5
entity.other.attribute-name#9E9E9Eitalic
punctuation, meta.brace#9E9E9E
string.regexp#64A12D
constant.character.escape#9E9E9E
meta.decorator, punctuation.decorator#E07A5F
invalid, invalid.illegal#D72638strikethrough
markup.heading, entity.name.section#3AB4C5bold
markup.bold#3AB4C5bold
markup.italic#9E9E9Eitalic
markup.underline.link#3AB4C5
markup.inline.raw, markup.fenced_code#2A9D8F
support.type.property-name.json#3AB4C5
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#3AB4C5
support.type.property-name.css#2A9D8F
support.constant.property-value.css#3AB4C5