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#00D1FF
  • activityBar.background#F0F0F0
  • activityBar.foreground#FF5EAA
  • activityBarBadge.background#FF5EAA
  • activityBarBadge.foreground#FAFAFA
  • badge.background#FF5EAA
  • badge.foreground#FAFAFA
  • button.background#00D1FF
  • button.foreground#FAFAFA
  • button.hoverBackground#00D1FF88
  • dropdown.background#F5F5F5
  • dropdown.border#00D1FF
  • dropdown.foreground#2B2B2B
  • editor.background#FAFAFA
  • editor.findMatchBackground#FF5EAA44
  • editor.findMatchHighlightBackground#FF5EAA22
  • editor.foreground#2B2B2B
  • editor.lineHighlightBackground#00D1FF20
  • editor.lineHighlightBorder#00D1FF80
  • editor.selectionBackground#FF5EAA40
  • editor.selectionHighlightBackground#FF5EAA20
  • editorBracketMatch.background#00D1FF33
  • editorBracketMatch.border#00D1FF
  • editorCursor.foreground#FF8C00
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#A0A0A0
  • editorIndentGuide.background#C0C0C0
  • editorLineNumber.activeForeground#FF5EAA
  • editorLineNumber.foreground#6A737D
  • editorWhitespace.foreground#C0C0C0
  • focusBorder#FF5EAA
  • gitDecoration.conflictingResourceForeground#FF8C00
  • gitDecoration.deletedResourceForeground#FF5EAA
  • gitDecoration.modifiedResourceForeground#00D1FF
  • gitDecoration.untrackedResourceForeground#6ABF00
  • input.background#F5F5F5
  • input.border#00D1FF
  • input.foreground#2B2B2B
  • input.placeholderForeground#6A737D
  • inputOption.activeBorder#FF5EAA
  • list.activeSelectionBackground#00D1FF66
  • list.activeSelectionForeground#FAFAFA
  • list.focusBackground#00D1FF44
  • list.highlightForeground#FF5EAA
  • list.hoverBackground#00D1FF33
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#00D1FF66
  • minimapSlider.background#00D1FF22
  • minimapSlider.hoverBackground#00D1FF44
  • panel.background#FAFAFA
  • panel.border#00D1FF
  • panelTitle.activeBorder#FF5EAA
  • panelTitle.activeForeground#2B2B2B
  • panelTitle.inactiveForeground#6A737D
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#FF5EAA88
  • scrollbarSlider.background#C0C0C0
  • scrollbarSlider.hoverBackground#A0A0A0
  • sideBar.background#F5F5F5
  • sideBar.foreground#2B2B2B
  • sideBarSectionHeader.background#F0F0F0
  • sideBarSectionHeader.foreground#00D1FF
  • sideBarTitle.foreground#FF5EAA
  • statusBar.background#F0F0F0
  • statusBar.debuggingBackground#FF5EAA
  • statusBar.foreground#2B2B2B
  • statusBar.noFolderBackground#E8E8E8
  • statusBarItem.hoverBackground#00D1FF30
  • tab.activeBackground#FAFAFA
  • tab.activeBorder#FF5EAA
  • tab.activeForeground#2B2B2B
  • tab.border#E0E0E0
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#6A737D
  • terminal.ansiBlue#00D1FF
  • terminal.ansiBrightBlue#5ECFFF
  • terminal.ansiBrightCyan#30E6C0
  • terminal.ansiBrightGreen#8EDB30
  • terminal.ansiBrightMagenta#FF99CC
  • terminal.ansiBrightRed#FF9999
  • terminal.ansiBrightYellow#FFB84D
  • terminal.ansiCyan#00BFA5
  • terminal.ansiGreen#6ABF00
  • terminal.ansiMagenta#FF5EAA
  • terminal.ansiRed#FF5EAA
  • terminal.ansiYellow#FF8C00
  • terminal.background#FAFAFA
  • terminal.foreground#2B2B2B
  • titleBar.activeBackground#F0F0F0
  • titleBar.activeForeground#2B2B2B
  • titleBar.inactiveBackground#E8E8E8
  • titleBar.inactiveForeground#6A737D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A737Ditalic
string, string.quoted, string.template#FF8C00
keyword, storage.type, storage.modifier#FF5EAAbold
keyword.operator, punctuation.accessor#00D1FF
variable, variable.other#3A3A3A
variable.parameter#FF5EAAitalic
entity.name.function, support.function#6ABF00
meta.function-call#00D1FF
entity.name.class, entity.name.type.class, support.class#FF5EAAbold
entity.name.type, support.type#00D1FF
entity.name.type.interface#00D1FFitalic
constant.numeric#FF8C00
constant, constant.language, constant.character#D4AF37
constant.language.boolean#FF5EAAbold
variable.other.property, support.variable.property#6ABF00
meta.object-literal.key#FF5EAA
entity.name.tag, punctuation.definition.tag#FF5EAA
entity.other.attribute-name#00D1FFitalic
punctuation, meta.brace#3A3A3A
string.regexp#FF8C00
constant.character.escape#FF5EAA
meta.decorator, punctuation.decorator#D4AF37
invalid, invalid.illegal#FF5EAAstrikethrough
markup.heading, entity.name.section#FF5EAAbold
markup.bold#FF5EAAbold
markup.italic#00D1FFitalic
markup.underline.link#00D1FF
markup.inline.raw, markup.fenced_code#FF8C00
support.type.property-name.json#FF5EAA
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#00D1FF
support.type.property-name.css#6ABF00
support.constant.property-value.css#FF8C00