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.activeBorder#22C55E
  • activityBar.background#000000
  • activityBar.border#7a7a7a
  • activityBar.foreground#DCDCDC
  • activityBar.inactiveForeground#6B7280
  • activityBarBadge.background#22C55E
  • activityBarBadge.foreground#000000
  • contrastActiveBorder#00000000
  • contrastBorder#00000000
  • descriptionForeground#9CA3AF
  • diffEditor.insertedTextBackground#22C55E22
  • diffEditor.removedTextBackground#EF444422
  • dropdown.background#0B0B0B
  • dropdown.border#2A2A2A
  • dropdown.foreground#EAEAEA
  • editor.background#000000
  • editor.foreground#EAEAEA
  • editor.hoverHighlightBackground#22C55E22
  • editor.inactiveSelectionBackground#2A2A2A80
  • editor.selectionBackground#22C55E33
  • editor.selectionHighlightBackground#22C55E22
  • editor.wordHighlightBackground#22C55E22
  • editor.wordHighlightStrongBackground#22C55E33
  • editorBracketMatch.border#22C55E
  • editorCursor.foreground#BFBFBF
  • editorError.foreground#EF4444
  • editorGroup.border#7a7a7a
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#1C1C1C
  • editorHint.foreground#9CA3AF
  • editorInfo.foreground#38BDF8
  • editorLineNumber.activeForeground#22C55E
  • editorLineNumber.foreground#3A3A3A
  • editorLink.activeForeground#38BDF8
  • editorWarning.foreground#FACC15
  • errorForeground#EF4444
  • focusBorder#22C55E
  • foreground#EAEAEA
  • icon.foreground#EAEAEA
  • input.background#0B0B0B
  • input.border#2A2A2A
  • input.placeholderForeground#6B7280
  • list.activeSelectionBackground#22C55E33
  • list.activeSelectionForeground#FFFFFF
  • minimap.background#000000
  • minimap.selectionHighlight#22C55E33
  • panel.background#000000
  • panel.border#2A2A2A
  • panelTitle.activeBorder#22C55E
  • panelTitle.activeForeground#FFFFFF
  • scrollbarSlider.activeBackground#22C55E
  • scrollbarSlider.background#2A2A2A
  • scrollbarSlider.hoverBackground#3A3A3A
  • selection.background#22C55E33
  • sideBar.background#000000
  • sideBar.border#7a7a7a
  • sideBar.foreground#DCDCDC
  • sideBarSectionHeader.background#0E0E0E
  • sideBarSectionHeader.border#1A1A1A
  • sideBarSectionHeader.foreground#CFCFCF
  • sideBarTitle.background#000000
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#000000
  • statusBar.border#1C1C1C
  • statusBar.debuggingBackground#22C55E
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#EAEAEA
  • statusBarItem.hoverBackground#22C55E22
  • tab.activeBackground#000000
  • tab.activeForeground#FFFFFF
  • tab.border#7c7c7c
  • tab.inactiveBackground#0B0B0B
  • tab.inactiveForeground#8A8A8A
  • tab.selectedBorderTop#22C55E
  • terminal.background#000000
  • terminal.border#2A2A2A
  • terminal.foreground#EAEAEA
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#1C1C1C
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#8A8A8A
  • widget.shadow#000000
  • window.activeBorder#7a7a7a
  • window.inactiveBorder#7a7a7a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#079726italic
support.type.property-name.css, meta.property-name.css, entity.other.attribute-name.css#818CF8
keyword, storage.type, storage.modifier, keyword.control#C084FC
variable, variable.parameter, string constant.other.placeholder, meta.block variable.other, support.other.variable#DCDCDC
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, entity.name.method.js#60A5FA
entity.name.type, entity.name.class, support.type, support.class#FBBF24
string, constant.other.symbol#86EFAC
constant.numeric, constant.language, support.constant, constant.character, keyword.other.unit#EAB308
keyword.operator, punctuation, meta.tag, constant.character.escape#9CA3AF
entity.name.tag#F472B6
entity.other.attribute-name#F59E0Bitalic
invalid, invalid.illegal#EF4444
Viper Black by MightySnake - VS Code Theme