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#0FFFCF
  • activityBar.background#0C111F
  • activityBar.foreground#0FFFCF
  • activityBarBadge.background#0FFFCF
  • activityBarBadge.foreground#0B0F1A
  • badge.background#0FFFCF
  • badge.foreground#0B0F1A
  • button.background#A07FFF
  • button.foreground#0B0F1A
  • button.hoverBackground#A07FFF88
  • dropdown.background#0C111F
  • dropdown.border#A07FFF
  • dropdown.foreground#C0C5D1
  • editor.background#0B0F1A
  • editor.findMatchBackground#0FFFCF44
  • editor.findMatchHighlightBackground#0FFFCF22
  • editor.foreground#C0C5D1
  • editor.lineHighlightBackground#0FFFCF33
  • editor.lineHighlightBorder#0FFFCF66
  • editor.selectionBackground#A07FFF44
  • editor.selectionHighlightBackground#A07FFF22
  • editorBracketMatch.background#A07FFF33
  • editorBracketMatch.border#A07FFF
  • editorCursor.foreground#0FFFCF
  • editorGroupHeader.tabsBackground#0B0F1A
  • editorIndentGuide.activeBackground#777C88AA
  • editorIndentGuide.background#777C8866
  • editorLineNumber.activeForeground#0FFFCF
  • editorLineNumber.foreground#777C88
  • editorWhitespace.foreground#777C88
  • focusBorder#0FFFCF
  • gitDecoration.conflictingResourceForeground#FFEB5B
  • gitDecoration.deletedResourceForeground#FF5F5F
  • gitDecoration.modifiedResourceForeground#A07FFF
  • gitDecoration.untrackedResourceForeground#7CFF7B
  • input.background#0C111F
  • input.border#A07FFF
  • input.foreground#C0C5D1
  • input.placeholderForeground#777C88
  • inputOption.activeBorder#0FFFCF
  • list.activeSelectionBackground#A07FFF66
  • list.activeSelectionForeground#0B0F1A
  • list.focusBackground#A07FFF44
  • list.highlightForeground#0FFFCF
  • list.hoverBackground#A07FFF33
  • minimap.background#0B0F1A
  • minimapSlider.activeBackground#A07FFF66
  • minimapSlider.background#A07FFF22
  • minimapSlider.hoverBackground#A07FFF44
  • panel.background#0B0F1A
  • panel.border#A07FFF
  • panelTitle.activeBorder#0FFFCF
  • panelTitle.activeForeground#0FFFCF
  • panelTitle.inactiveForeground#777C88
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#0FFFCF88
  • scrollbarSlider.background#777C8866
  • scrollbarSlider.hoverBackground#777C88AA
  • sideBar.background#0C111F
  • sideBar.foreground#C0C5D1
  • sideBarSectionHeader.background#0B101C
  • sideBarSectionHeader.foreground#0FFFCF
  • sideBarTitle.foreground#0FFFCF
  • statusBar.background#A07FFF
  • statusBar.debuggingBackground#0FFFCF
  • statusBar.foreground#0B0F1A
  • statusBar.noFolderBackground#0C111F
  • statusBarItem.hoverBackground#A07FFF44
  • tab.activeBackground#0B0F1A
  • tab.activeBorder#0FFFCF
  • tab.activeForeground#0FFFCF
  • tab.border#0B0F1A
  • tab.inactiveBackground#0C111F
  • tab.inactiveForeground#777C88
  • terminal.ansiBlue#5A9FFF
  • terminal.ansiBrightBlue#8ABFFF
  • terminal.ansiBrightCyan#5AFFD0
  • terminal.ansiBrightGreen#9FFF9F
  • terminal.ansiBrightMagenta#FF99FF
  • terminal.ansiBrightRed#FF9999
  • terminal.ansiBrightYellow#FFFF99
  • terminal.ansiCyan#0FFFCF
  • terminal.ansiGreen#7CFF7B
  • terminal.ansiMagenta#FF66FF
  • terminal.ansiRed#FF5F5F
  • terminal.ansiYellow#FFEB5B
  • terminal.background#0B0F1A
  • terminal.foreground#C0C5D1
  • titleBar.activeBackground#0B101C
  • titleBar.activeForeground#C0C5D1
  • titleBar.inactiveBackground#0B0F1A
  • titleBar.inactiveForeground#777C88

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555A66italic
string, string.quoted, string.template#7CFF7B
keyword, storage.type, storage.modifier#0FFFCFbold
keyword.operator, punctuation.accessor#A07FFF
variable, variable.other#C0C5D1
variable.parameter#7CFF7Bitalic
entity.name.function, support.function#0FFFCF
meta.function-call#C0C5D1
entity.name.class, entity.name.type.class, support.class#0FFFCFbold
entity.name.type, support.type#A07FFF
entity.name.type.interface#A07FFFitalic
constant.numeric#7CFF7B
constant, constant.language, constant.character#7CFF7B
constant.language.boolean#0FFFCFbold
variable.other.property, support.variable.property#C0C5D1
meta.object-literal.key#A07FFF
entity.name.tag, punctuation.definition.tag#0FFFCF
entity.other.attribute-name#A07FFFitalic
punctuation, meta.brace#C0C5D1
string.regexp#7CFF7B
constant.character.escape#0FFFCF
meta.decorator, punctuation.decorator#A07FFF
invalid, invalid.illegal#FF5F5Fstrikethrough
markup.heading, entity.name.section#0FFFCFbold
markup.bold#0FFFCFbold
markup.italic#0FFFCFitalic
markup.underline.link#A07FFF
markup.inline.raw, markup.fenced_code#7CFF7B
support.type.property-name.json#A07FFF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#0FFFCF
support.type.property-name.css#A07FFF
support.constant.property-value.css#7CFF7B