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#ff00e6
  • activityBar.background#0c001f
  • activityBar.foreground#c8c8ff
  • activityBarBadge.background#ff00e6
  • activityBarBadge.foreground#0b001a
  • badge.background#ff00e6
  • badge.foreground#0b001a
  • button.background#260033
  • button.foreground#ffffff
  • button.hoverBackground#1a001f
  • dropdown.background#0c001f
  • dropdown.border#260033
  • dropdown.foreground#c8c8ff
  • editor.background#0b001a
  • editor.findMatchBackground#ff00e666
  • editor.findMatchHighlightBackground#ff00e622
  • editor.foreground#c8c8ff
  • editor.lineHighlightBackground#26003344
  • editor.lineHighlightBorder#26003388
  • editor.selectionBackground#33004d88
  • editor.selectionHighlightBackground#33004d44
  • editorBracketMatch.background#ff00e633
  • editorBracketMatch.border#ff00e6
  • editorCursor.foreground#ff00e6
  • editorGroupHeader.tabsBackground#0b001a
  • editorIndentGuide.activeBackground#1a001f88
  • editorIndentGuide.background#1a001f44
  • editorLineNumber.activeForeground#ff00e6
  • editorLineNumber.foreground#5a0066
  • editorWhitespace.foreground#1a001f
  • focusBorder#ff00e6
  • gitDecoration.conflictingResourceForeground#ffea00
  • gitDecoration.deletedResourceForeground#ff4d6a
  • gitDecoration.modifiedResourceForeground#ff00e6
  • gitDecoration.untrackedResourceForeground#00ff80
  • input.background#0c001f
  • input.border#260033
  • input.foreground#c8c8ff
  • input.placeholderForeground#5a0066
  • inputOption.activeBorder#ff00e6
  • list.activeSelectionBackground#260033
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#260033
  • list.highlightForeground#ff00e6
  • list.hoverBackground#26003366
  • minimap.background#0b001a
  • minimapSlider.activeBackground#ff00e666
  • minimapSlider.background#ff00e622
  • minimapSlider.hoverBackground#ff00e644
  • panel.background#0b001a
  • panel.border#260033
  • panelTitle.activeBorder#ff00e6
  • panelTitle.activeForeground#ff00e6
  • panelTitle.inactiveForeground#a0a0d0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#ff00e688
  • scrollbarSlider.background#5a006644
  • scrollbarSlider.hoverBackground#5a006688
  • sideBar.background#0c001f
  • sideBar.foreground#a0a0d0
  • sideBarSectionHeader.background#0c001f
  • sideBarSectionHeader.foreground#00ffe5
  • sideBarTitle.foreground#00ffe5
  • statusBar.background#12002b
  • statusBar.debuggingBackground#ff00e6
  • statusBar.foreground#c8c8ff
  • statusBar.noFolderBackground#0c001f
  • statusBarItem.hoverBackground#260033
  • tab.activeBackground#12002b
  • tab.activeBorder#ff00e6
  • tab.activeForeground#ffffff
  • tab.border#0b001a
  • tab.inactiveBackground#0b001a
  • tab.inactiveForeground#a0a0d0
  • terminal.ansiBlue#7b1fa2
  • terminal.ansiBrightBlue#9d00ff
  • terminal.ansiBrightCyan#00ffe0
  • terminal.ansiBrightGreen#00ff9f
  • terminal.ansiBrightMagenta#ff66ff
  • terminal.ansiBrightRed#ff6666
  • terminal.ansiBrightYellow#ffff66
  • terminal.ansiCyan#00fff5
  • terminal.ansiGreen#00ff80
  • terminal.ansiMagenta#ff00e6
  • terminal.ansiRed#ff4d6a
  • terminal.ansiYellow#ffea00
  • terminal.background#0b001a
  • terminal.foreground#c8c8ff
  • titleBar.activeBackground#0c001f
  • titleBar.activeForeground#c8c8ff
  • titleBar.inactiveBackground#0b001a
  • titleBar.inactiveForeground#a0a0d0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777799italic
string, string.quoted, string.template#00ff99
keyword, storage.type, storage.modifier#ff00e6bold
keyword.operator, punctuation.accessor#00ffe5
variable, variable.other#c8c8ff
variable.parameter#ff66e6italic
entity.name.function, support.function#7b1fa2
meta.function-call#00ffe5
entity.name.class, entity.name.type.class, support.class#ff33ffbold
entity.name.type, support.type#ff33ff
entity.name.type.interface#00fff5italic
constant.numeric#00ffe5
constant, constant.language, constant.character#ff99ff
constant.language.boolean#00ffe5bold
variable.other.property, support.variable.property#c8c8ff
meta.object-literal.key#7b1fa2
entity.name.tag, punctuation.definition.tag#ff00e6
entity.other.attribute-name#00fff5italic
punctuation, meta.brace#00ffe5
string.regexp#ff4d6a
constant.character.escape#00fff5
meta.decorator, punctuation.decorator#ffea00
invalid, invalid.illegal#ff4d6astrikethrough
markup.heading, entity.name.section#ff00e6bold
markup.bold#ff66e6bold
markup.italic#00fff5italic
markup.underline.link#00ffe5
markup.inline.raw, markup.fenced_code#00ff80
support.type.property-name.json#ff00e6
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffea00
support.type.property-name.css#7b1fa2
support.constant.property-value.css#00ff80
themesmith by CyberBoost - VS Code Theme