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#00AEEF
  • activityBar.background#FFFFFF
  • activityBar.foreground#2E2E2E
  • activityBarBadge.background#00AEEF
  • activityBarBadge.foreground#FFFFFF
  • badge.background#00AEEF
  • badge.foreground#FFFFFF
  • button.background#00AEEF
  • button.foreground#FFFFFF
  • button.hoverBackground#00AEEFCC
  • dropdown.background#FFFFFF
  • dropdown.border#00AEEF
  • dropdown.foreground#2E2E2E
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFB40044
  • editor.findMatchHighlightBackground#FFB40022
  • editor.foreground#2E2E2E
  • editor.lineHighlightBackground#FFB4000D
  • editor.lineHighlightBorder#FFB40033
  • editor.selectionBackground#00AEEF40
  • editor.selectionHighlightBackground#00AEEF22
  • editorBracketMatch.background#00AEEF33
  • editorBracketMatch.border#00AEEF
  • editorCursor.foreground#00AEEF
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#D0D0D0
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#00AEEF
  • editorLineNumber.foreground#8A8A8A
  • editorWhitespace.foreground#C0C0C0
  • focusBorder#00AEEF
  • gitDecoration.conflictingResourceForeground#FFB400
  • gitDecoration.deletedResourceForeground#E53935
  • gitDecoration.modifiedResourceForeground#FFB400
  • gitDecoration.untrackedResourceForeground#28A745
  • input.background#FFFFFF
  • input.border#00AEEF
  • input.foreground#2E2E2E
  • input.placeholderForeground#A0A0A0
  • inputOption.activeBorder#FFB400
  • list.activeSelectionBackground#00AEEF66
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#00AEEF44
  • list.highlightForeground#FFB400
  • list.hoverBackground#00AEEF33
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#00AEEF66
  • minimapSlider.background#00AEEF22
  • minimapSlider.hoverBackground#00AEEF44
  • panel.background#FAFAFA
  • panel.border#00AEEF
  • panelTitle.activeBorder#00AEEF
  • panelTitle.activeForeground#2E2E2E
  • panelTitle.inactiveForeground#6A6A6A
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#00AEEF88
  • scrollbarSlider.background#C0C0C0
  • scrollbarSlider.hoverBackground#A0A0A0
  • sideBar.background#FAFAFA
  • sideBar.foreground#2E2E2E
  • sideBarSectionHeader.background#F5F5F5
  • sideBarSectionHeader.foreground#00AEEF
  • sideBarTitle.foreground#00AEEF
  • statusBar.background#E0E0E0
  • statusBar.debuggingBackground#00AEEF
  • statusBar.foreground#2E2E2E
  • statusBar.noFolderBackground#E0E0E0
  • statusBarItem.hoverBackground#00AEEF33
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#00AEEF
  • tab.activeForeground#2E2E2E
  • tab.border#D0D0D0
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#6A6A6A
  • terminal.ansiBlue#00AEEF
  • terminal.ansiBrightBlue#33B8FF
  • terminal.ansiBrightCyan#33FFFF
  • terminal.ansiBrightGreen#4CD964
  • terminal.ansiBrightMagenta#FF66FF
  • terminal.ansiBrightRed#FF6666
  • terminal.ansiBrightYellow#FFD740
  • terminal.ansiCyan#00CED1
  • terminal.ansiGreen#28A745
  • terminal.ansiMagenta#D255D6
  • terminal.ansiRed#E53935
  • terminal.ansiYellow#FFB400
  • terminal.background#FAFAFA
  • terminal.foreground#2E2E2E
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#2E2E2E
  • titleBar.inactiveBackground#FAFAFA
  • titleBar.inactiveForeground#6A6A6A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A6A6Aitalic
string, string.quoted, string.template#28A745
keyword, storage.type, storage.modifier#00AEEFbold
keyword.operator, punctuation.accessor#FFB400
variable, variable.other#2E2E2E
variable.parameter#FFB400italic
entity.name.function, support.function#FFB400
meta.function-call#FFB400
entity.name.class, entity.name.type.class, support.class#00AEEFbold
entity.name.type, support.type#00AEEF
entity.name.type.interface#FFB400italic
constant.numeric#FFB400
constant, constant.language, constant.character#FFB400
constant.language.boolean#FFB400bold
variable.other.property, support.variable.property#2E2E2E
meta.object-literal.key#FFB400
entity.name.tag, punctuation.definition.tag#00AEEF
entity.other.attribute-name#D255D6italic
punctuation, meta.brace#2E2E2E
string.regexp#FFB400
constant.character.escape#D255D6
meta.decorator, punctuation.decorator#FFB400
invalid, invalid.illegal#E53935strikethrough
markup.heading, entity.name.section#00AEEFbold
markup.bold#FFB400bold
markup.italic#D255D6italic
markup.underline.link#FFB400
markup.inline.raw, markup.fenced_code#28A745
support.type.property-name.json#00AEEF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D255D6
support.type.property-name.css#FFB400
support.constant.property-value.css#28A745