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#c79eff
  • activityBar.background#240f42
  • activityBar.foreground#c79eff
  • activityBarBadge.background#c79eff
  • activityBarBadge.foreground#1a0d2e
  • badge.background#c79eff
  • badge.foreground#1a0d2e
  • button.background#3b1a7a
  • button.foreground#ffffff
  • button.hoverBackground#4c2790
  • dropdown.background#200e38
  • dropdown.border#3b1a7a
  • dropdown.foreground#eae0f5
  • editor.background#1a0d2e
  • editor.findMatchBackground#c79eff44
  • editor.findMatchHighlightBackground#c79eff22
  • editor.foreground#eae0f5
  • editor.lineHighlightBackground#3b1a7a60
  • editor.lineHighlightBorder#3b1a7a80
  • editor.selectionBackground#6a3fdc88
  • editor.selectionHighlightBackground#6a3fdc55
  • editorBracketMatch.background#c79eff33
  • editorBracketMatch.border#c79eff
  • editorCursor.foreground#c79eff
  • editorGroupHeader.tabsBackground#1a0d2e
  • editorIndentGuide.activeBackground#5a3a7a88
  • editorIndentGuide.background#5a3a7a44
  • editorLineNumber.activeForeground#c79eff
  • editorLineNumber.foreground#7a5a9a
  • editorWhitespace.foreground#5a3a7a
  • focusBorder#c79eff
  • gitDecoration.conflictingResourceForeground#ffd880
  • gitDecoration.deletedResourceForeground#ff8c8c
  • gitDecoration.modifiedResourceForeground#c79eff
  • gitDecoration.untrackedResourceForeground#8affc2
  • input.background#200e38
  • input.border#3b1a7a
  • input.foreground#eae0f5
  • input.placeholderForeground#7a5a9a
  • inputOption.activeBorder#c79eff
  • list.activeSelectionBackground#3b1a7a
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#3b1a7a
  • list.highlightForeground#c79eff
  • list.hoverBackground#3b1a7a66
  • minimap.background#1a0d2e
  • minimapSlider.activeBackground#c79eff66
  • minimapSlider.background#c79eff22
  • minimapSlider.hoverBackground#c79eff44
  • panel.background#1a0d2e
  • panel.border#3b1a7a
  • panelTitle.activeBorder#c79eff
  • panelTitle.activeForeground#c79eff
  • panelTitle.inactiveForeground#d8c4ff
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#c79eff88
  • scrollbarSlider.background#7a5a9a44
  • scrollbarSlider.hoverBackground#7a5a9a88
  • sideBar.background#200e38
  • sideBar.foreground#d8c4ff
  • sideBarSectionHeader.background#240f42
  • sideBarSectionHeader.foreground#c79eff
  • sideBarTitle.foreground#c79eff
  • statusBar.background#3b1a7a
  • statusBar.debuggingBackground#c79eff
  • statusBar.foreground#eae0f5
  • statusBar.noFolderBackground#240f42
  • statusBarItem.hoverBackground#4c2790
  • tab.activeBackground#3b1a7a
  • tab.activeBorder#c79eff
  • tab.activeForeground#ffffff
  • tab.border#1a0d2e
  • tab.inactiveBackground#200e38
  • tab.inactiveForeground#d8c4ff
  • terminal.ansiBlue#8aafff
  • terminal.ansiBrightBlue#a5c0ff
  • terminal.ansiBrightCyan#a5f0ff
  • terminal.ansiBrightGreen#a5ffcd
  • terminal.ansiBrightMagenta#d7acff
  • terminal.ansiBrightRed#ffb0b0
  • terminal.ansiBrightYellow#fff0a5
  • terminal.ansiCyan#8aefff
  • terminal.ansiGreen#8affc2
  • terminal.ansiMagenta#c79eff
  • terminal.ansiRed#ff8c8c
  • terminal.ansiYellow#ffd880
  • terminal.background#1a0d2e
  • terminal.foreground#eae0f5
  • titleBar.activeBackground#240f42
  • titleBar.activeForeground#eadff5
  • titleBar.inactiveBackground#1a0d2e
  • titleBar.inactiveForeground#d8c4ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a5a9aitalic
string, string.quoted, string.template#ffb8ff
keyword, storage.type, storage.modifier#c79effbold
keyword.operator, punctuation.accessor#d7acff
variable, variable.other#eae0f5
variable.parameter#ffb880italic
entity.name.function, support.function#bda0ff
meta.function-call#d8c4ff
entity.name.class, entity.name.type.class, support.class#ff9edbbold
entity.name.type, support.type#ff9edb
entity.name.type.interface#9ae8ffitalic
constant.numeric#ff8caa
constant, constant.language, constant.character#ffd880
constant.language.boolean#ff8caabold
variable.other.property, support.variable.property#d8c4ff
meta.object-literal.key#bda0ff
entity.name.tag, punctuation.definition.tag#c79eff
entity.other.attribute-name#ff9edbitalic
punctuation, meta.brace#d7acff
string.regexp#ff8caa
constant.character.escape#8aefff
meta.decorator, punctuation.decorator#ffd880
invalid, invalid.illegal#ff5f5fstrikethrough
markup.heading, entity.name.section#c79effbold
markup.bold#ffd880bold
markup.italic#ff9edbitalic
markup.underline.link#8aefff
markup.inline.raw, markup.fenced_code#8affc2
support.type.property-name.json#c79eff
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffd880
support.type.property-name.css#bda0ff
support.constant.property-value.css#ffb8ff
themesmith by CyberBoost - VS Code Theme