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#FFB300
  • activityBar.background#F2E7FF
  • activityBar.foreground#FFB300
  • activityBarBadge.background#FFB300
  • activityBarBadge.foreground#FAF4FF
  • badge.background#FFB300
  • badge.foreground#FAF4FF
  • button.background#D8C9FF
  • button.foreground#3B2C5F
  • button.hoverBackground#A75FFF
  • dropdown.background#F2E7FF
  • dropdown.border#D8C9FF
  • dropdown.foreground#3B2C5F
  • editor.background#FAF4FF
  • editor.findMatchBackground#A75FFF30
  • editor.findMatchHighlightBackground#A75FFF15
  • editor.foreground#3B2C5F
  • editor.lineHighlightBackground#D8C9FF30
  • editor.lineHighlightBorder#D8C9FF80
  • editor.selectionBackground#FFB30040
  • editor.selectionHighlightBackground#FFB30020
  • editorBracketMatch.background#A75FFF20
  • editorBracketMatch.border#A75FFF
  • editorCursor.foreground#FFB300
  • editorGroupHeader.tabsBackground#FAF4FF
  • editorIndentGuide.activeBackground#A75FFF
  • editorIndentGuide.background#B0A0C0
  • editorLineNumber.activeForeground#FFB300
  • editorLineNumber.foreground#A0A0B0
  • editorWhitespace.foreground#B0A0C0
  • focusBorder#FFB300
  • gitDecoration.conflictingResourceForeground#FFB300
  • gitDecoration.deletedResourceForeground#D95C5C
  • gitDecoration.modifiedResourceForeground#6A8DFF
  • gitDecoration.untrackedResourceForeground#6A8D6A
  • input.background#F2E7FF
  • input.border#D8C9FF
  • input.foreground#3B2C5F
  • input.placeholderForeground#A0A0B0
  • inputOption.activeBorder#FFB300
  • list.activeSelectionBackground#D8C9FF
  • list.activeSelectionForeground#3B2C5F
  • list.focusBackground#D8C9FF
  • list.highlightForeground#FFB300
  • list.hoverBackground#D8C9FF66
  • minimap.background#FAF4FF
  • minimapSlider.activeBackground#A75FFF66
  • minimapSlider.background#A75FFF22
  • minimapSlider.hoverBackground#A75FFF44
  • panel.background#FAF4FF
  • panel.border#D8C9FF
  • panelTitle.activeBorder#FFB300
  • panelTitle.activeForeground#3B2C5F
  • panelTitle.inactiveForeground#A0A0B0
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#FFB30088
  • scrollbarSlider.background#B0A0C066
  • scrollbarSlider.hoverBackground#B0A0C0AA
  • sideBar.background#F5EEF9
  • sideBar.foreground#5A3F99
  • sideBarSectionHeader.background#F2E7FF
  • sideBarSectionHeader.foreground#FFB300
  • sideBarTitle.foreground#3B2C5F
  • statusBar.background#E6D8FF
  • statusBar.debuggingBackground#FFB300
  • statusBar.foreground#3B2C5F
  • statusBar.noFolderBackground#F2E7FF
  • statusBarItem.hoverBackground#D4C1FF
  • tab.activeBackground#E6D8FF
  • tab.activeBorder#FFB300
  • tab.activeForeground#3B2C5F
  • tab.border#FAF4FF
  • tab.inactiveBackground#FAF4FF
  • tab.inactiveForeground#A0A0B0
  • terminal.ansiBlue#6A8DFF
  • terminal.ansiBrightBlue#9F7DFF
  • terminal.ansiBrightCyan#C9B3FF
  • terminal.ansiBrightGreen#A0D8A0
  • terminal.ansiBrightMagenta#D0A0FF
  • terminal.ansiBrightRed#FF6C6C
  • terminal.ansiBrightYellow#FFDA33
  • terminal.ansiCyan#6A3DFF
  • terminal.ansiGreen#6A8D6A
  • terminal.ansiMagenta#A75FFF
  • terminal.ansiRed#D95C5C
  • terminal.ansiYellow#FFB300
  • terminal.background#FAF4FF
  • terminal.foreground#3B2C5F
  • titleBar.activeBackground#F2E7FF
  • titleBar.activeForeground#3B2C5F
  • titleBar.inactiveBackground#FAF4FF
  • titleBar.inactiveForeground#5A3F99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A0A0B0italic
string, string.quoted, string.template#6A3DFF
keyword, storage.type, storage.modifier#FFB300bold
keyword.operator, punctuation.accessor#3B2C5F
variable, variable.other#5A3F99
variable.parameter#3B2C5Fitalic
entity.name.function, support.function#FFB300
meta.function-call#6A8DFF
entity.name.class, entity.name.type.class, support.class#3B2C5Fbold
entity.name.type, support.type#3B2C5F
entity.name.type.interface#3B2C5Fitalic
constant.numeric#FFB300
constant, constant.language, constant.character#FFB300
constant.language.boolean#FFB300bold
variable.other.property, support.variable.property#6A8DFF
meta.object-literal.key#6A8DFF
entity.name.tag, punctuation.definition.tag#FFB300
entity.other.attribute-name#3B2C5Fitalic
punctuation, meta.brace#3B2C5F
string.regexp#A75FFF
constant.character.escape#A75FFF
meta.decorator, punctuation.decorator#FFB300
invalid, invalid.illegal#D95C5Cstrikethrough
markup.heading, entity.name.section#FFB300bold
markup.bold#FFB300bold
markup.italic#3B2C5Fitalic
markup.underline.link#6A8DFF
markup.inline.raw, markup.fenced_code#6A3DFF
support.type.property-name.json#FFB300
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#3B2C5F
support.type.property-name.css#6A8DFF
support.constant.property-value.css#6A3DFF