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#00E5FF
  • activityBar.background#FFF2E0
  • activityBar.foreground#FF6EC7
  • activityBarBadge.background#00E5FF
  • activityBarBadge.foreground#FFFAF5
  • badge.background#00E5FF
  • badge.foreground#FFFAF5
  • button.background#00E5FF
  • button.foreground#FFFAF5
  • button.hoverBackground#33E8FF
  • dropdown.background#FFFAF5
  • dropdown.border#00E5FF
  • dropdown.foreground#2B3B4E
  • editor.background#FFFAF5
  • editor.findMatchBackground#FF6EC733
  • editor.findMatchHighlightBackground#FF6EC722
  • editor.foreground#2B3B4E
  • editor.lineHighlightBackground#FFE8D1
  • editor.lineHighlightBorder#00E5FF55
  • editor.selectionBackground#00E5FF33
  • editor.selectionHighlightBackground#00E5FF22
  • editorBracketMatch.background#FF6EC733
  • editorBracketMatch.border#FF6EC7
  • editorCursor.foreground#00E5FF
  • editorGroupHeader.tabsBackground#FFF2E0
  • editorIndentGuide.activeBackground#C0D0DF66
  • editorIndentGuide.background#C0D0DF33
  • editorLineNumber.activeForeground#00E5FF
  • editorLineNumber.foreground#A8B2C0
  • editorWhitespace.foreground#A8B2C0
  • focusBorder#00E5FF
  • gitDecoration.conflictingResourceForeground#FFD96E
  • gitDecoration.deletedResourceForeground#FF6E6E
  • gitDecoration.modifiedResourceForeground#00E5FF
  • gitDecoration.untrackedResourceForeground#88D57F
  • input.background#FFFAF5
  • input.border#00E5FF
  • input.foreground#2B3B4E
  • input.placeholderForeground#A8B2C0
  • inputOption.activeBorder#00E5FF
  • list.activeSelectionBackground#FFE8D1
  • list.activeSelectionForeground#FF6EC7
  • list.focusBackground#FFE8D1
  • list.highlightForeground#00E5FF
  • list.hoverBackground#FFE8D166
  • minimap.background#FFFAF5
  • minimapSlider.activeBackground#00E5FF66
  • minimapSlider.background#00E5FF22
  • minimapSlider.hoverBackground#00E5FF44
  • panel.background#FFF2E0
  • panel.border#FFE8D1
  • panelTitle.activeBorder#00E5FF
  • panelTitle.activeForeground#FF6EC7
  • panelTitle.inactiveForeground#A8B2C0
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#00E5FF88
  • scrollbarSlider.background#A8B2C066
  • scrollbarSlider.hoverBackground#A8B2C099
  • sideBar.background#FFF2E0
  • sideBar.foreground#2B3B4E
  • sideBarSectionHeader.background#FFF2E0
  • sideBarSectionHeader.foreground#00E5FF
  • sideBarTitle.foreground#FF6EC7
  • statusBar.background#FFF2E0
  • statusBar.debuggingBackground#FF6EC7
  • statusBar.foreground#2B3B4E
  • statusBar.noFolderBackground#FFFAF5
  • statusBarItem.hoverBackground#00E5FF44
  • tab.activeBackground#FFFAF5
  • tab.activeBorder#00E5FF
  • tab.activeForeground#FF6EC7
  • tab.border#FFF2E0
  • tab.inactiveBackground#FFF2E0
  • tab.inactiveForeground#A8B2C0
  • terminal.ansiBlue#00E5FF
  • terminal.ansiBrightBlue#66F0FF
  • terminal.ansiBrightCyan#AAFFFF
  • terminal.ansiBrightGreen#AAEFA0
  • terminal.ansiBrightMagenta#FF9ED2
  • terminal.ansiBrightRed#FF9999
  • terminal.ansiBrightYellow#FFE599
  • terminal.ansiCyan#00FFFF
  • terminal.ansiGreen#88D57F
  • terminal.ansiMagenta#FF6EC7
  • terminal.ansiRed#FF6E6E
  • terminal.ansiYellow#FFD96E
  • terminal.background#FFFAF5
  • terminal.foreground#2B3B4E
  • titleBar.activeBackground#FFF2E0
  • titleBar.activeForeground#2B3B4E
  • titleBar.inactiveBackground#FFFAF5
  • titleBar.inactiveForeground#A8B2C0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A8B2C0italic
string, string.quoted, string.template#FF6EC7
keyword, storage.type, storage.modifier#00E5FFbold
keyword.operator, punctuation.accessor#00E5FF
variable, variable.other#2B3B4E
variable.parameter#FF6EC7italic
entity.name.function, support.function#00E5FF
meta.function-call#FF6EC7
entity.name.class, entity.name.type.class, support.class#00E5FFbold
entity.name.type, support.type#00E5FF
entity.name.type.interface#00E5FFitalic
constant.numeric#FFD96E
constant, constant.language, constant.character#FF6EC7
constant.language.boolean#00E5FFbold
variable.other.property, support.variable.property#FF6EC7
meta.object-literal.key#00E5FF
entity.name.tag, punctuation.definition.tag#00E5FF
entity.other.attribute-name#FF6EC7italic
punctuation, meta.brace#2B3B4E
string.regexp#FF6EC7
constant.character.escape#FF6EC7
meta.decorator, punctuation.decorator#FFD96E
invalid, invalid.illegal#FF6E6Estrikethrough
markup.heading, entity.name.section#00E5FFbold
markup.bold#FF6EC7bold
markup.italic#FF6EC7italic
markup.underline.link#00E5FF
markup.inline.raw, markup.fenced_code#FF6EC7
support.type.property-name.json#00E5FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFD96E
support.type.property-name.css#00E5FF
support.constant.property-value.css#88D57F