Skip to main content
Coding Theme

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.activeBackground#252530
  • activityBar.activeBorder#00ff88
  • activityBar.background#151520
  • activityBar.foreground#c0c0d0
  • activityBar.inactiveForeground#6a6a80
  • activityBarBadge.background#ff0066
  • activityBarBadge.foreground#ffffff
  • button.background#00ff88
  • button.foreground#0a0a0f
  • button.hoverBackground#44ffaa
  • diffEditor.insertedTextBackground#00ff8822
  • diffEditor.removedTextBackground#ff336622
  • dropdown.background#1a1a25
  • dropdown.border#4a4a60
  • dropdown.foreground#c0c0d0
  • editor.background#0a0a0f
  • editor.foreground#e8e8f0
  • editor.lineHighlightBackground#1a1a25
  • editor.selectionBackground#264f78
  • editor.selectionHighlightBackground#264f7855
  • editorCursor.foreground#00ff88
  • editorGroupHeader.tabsBackground#151520
  • editorIndentGuide.activeBackground1#4a4a60
  • editorIndentGuide.background1#2a2a35
  • editorLineNumber.activeForeground#00ff88
  • editorLineNumber.foreground#4a4a60
  • gitDecoration.addedResourceForeground#00ff88
  • gitDecoration.conflictingResourceForeground#ff9933
  • gitDecoration.deletedResourceForeground#ff3366
  • gitDecoration.modifiedResourceForeground#ffdd33
  • gitDecoration.untrackedResourceForeground#cc66ff
  • input.background#1a1a25
  • input.border#4a4a60
  • input.foreground#e8e8f0
  • inputOption.activeBorder#00ff88
  • inputValidation.errorBackground#ff336655
  • inputValidation.warningBackground#ffdd3355
  • list.activeSelectionBackground#00ff8822
  • list.activeSelectionForeground#00ff88
  • list.focusBackground#00ff8811
  • list.highlightForeground#00d4ff
  • list.hoverBackground#252530
  • list.inactiveSelectionBackground#252530
  • menu.background#1a1a25
  • menu.foreground#c0c0d0
  • menu.selectionBackground#00ff8822
  • menu.selectionForeground#00ff88
  • menubar.selectionBackground#252530
  • menubar.selectionForeground#00ff88
  • notificationCenter.border#4a4a60
  • notifications.background#1a1a25
  • notifications.foreground#c0c0d0
  • notificationsErrorIcon.foreground#ff3366
  • notificationsInfoIcon.foreground#00d4ff
  • notificationsWarningIcon.foreground#ffdd33
  • panel.background#151520
  • panel.border#2a2a35
  • panelTitle.activeForeground#00d4ff
  • panelTitle.inactiveForeground#8a8aa0
  • scrollbarSlider.activeBackground#8a8aa055
  • scrollbarSlider.background#4a4a6055
  • scrollbarSlider.hoverBackground#6a6a8055
  • sideBar.background#1a1a25
  • sideBar.foreground#c0c0d0
  • sideBarSectionHeader.background#252530
  • sideBarSectionHeader.foreground#00d4ff
  • sideBarTitle.foreground#00ff88
  • statusBar.background#0a0a0f
  • statusBar.debuggingBackground#ff0066
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#c0c0d0
  • statusBar.noFolderBackground#4a1a8a
  • tab.activeBackground#0a0a0f
  • tab.activeBorder#00ff88
  • tab.activeForeground#00ff88
  • tab.border#2a2a35
  • tab.inactiveBackground#1a1a25
  • tab.inactiveForeground#8a8aa0
  • terminal.ansiBlack#0a0a0f
  • terminal.ansiBlue#0099ff
  • terminal.ansiBrightBlack#4a4a60
  • terminal.ansiBrightBlue#44aaff
  • terminal.ansiBrightCyan#44ddff
  • terminal.ansiBrightGreen#44ffaa
  • terminal.ansiBrightMagenta#dd88ff
  • terminal.ansiBrightRed#ff5588
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffee55
  • terminal.ansiCyan#00d4ff
  • terminal.ansiGreen#00ff88
  • terminal.ansiMagenta#cc66ff
  • terminal.ansiRed#ff3366
  • terminal.ansiWhite#e8e8f0
  • terminal.ansiYellow#ffdd33
  • terminal.background#0a0a0f
  • terminal.foreground#e8e8f0
  • titleBar.activeBackground#151520
  • titleBar.activeForeground#c0c0d0
  • titleBar.inactiveBackground#0a0a0f
  • titleBar.inactiveForeground#6a6a80

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a6a80italic
variable, string constant.other.placeholder#e8e8f0
invalid, invalid.illegal#ff3366
keyword, storage.type, storage.modifier#ff0066bold
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop#cc66ffbold
keyword.operator, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#00d4ff
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#00ff88bold
entity.name.class, entity.name.type, support.type, support.class#ffdd33bold
string, constant.other.symbol, constant.other.key#66ff99
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit#ff9933
entity.name.tag, meta.tag.sgml#ff0066
entity.other.attribute-name#00d4ffitalic
support.type.property-name#00ff88
support.constant.property-value#66ff99
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffdd33
variable.other.object#cc66ff
variable.language.this#ff0066italic
support.type.property-name.json#00d4ff
string.regexp#ff9933
markup.heading#00ff88bold
markup.bold#ffdd33bold
markup.italic#cc66ffitalic
markup.inline.raw#00d4ff
markup.underline.link#0099ffunderline
VIII-III-MMV by VIII-III-MMV-The-Theme - VS Code Theme