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#505050
  • activityBar.background#1a1a1a
  • activityBar.foreground#b4b4b4
  • activityBarBadge.background#505050
  • activityBarBadge.foreground#ffffff
  • button.background#30303090
  • button.foreground#ffffff
  • button.hoverBackground#404040b0
  • dropdown.background#121212e6
  • dropdown.border#20202090
  • dropdown.foreground#d4d4d4
  • editor.background#181818
  • editor.findMatchBackground#515c6a
  • editor.findMatchBorder#74879f
  • editor.findMatchHighlightBackground#ea5c0055
  • editor.foreground#d4d4d4
  • editor.lineHighlightBackground#2a2a2a30
  • editor.selectionBackground#404040
  • editor.selectionHighlightBackground#353535
  • editorCursor.foreground#d4d4d4
  • editorError.foreground#e28d78
  • editorGroupHeader.tabsBackground#1a1a1a
  • editorHoverWidget.background#121212e6
  • editorHoverWidget.border#20202090
  • editorInfo.foreground#a1ccdd
  • editorLineNumber.activeForeground#b4b4b4
  • editorLineNumber.foreground#5a5a5a
  • editorSuggestWidget.background#121212e6
  • editorSuggestWidget.border#20202090
  • editorSuggestWidget.foreground#d4d4d4
  • editorSuggestWidget.highlightForeground#8bb3a3
  • editorSuggestWidget.selectedBackground#35353575
  • editorWarning.foreground#e8c090
  • editorWidget.background#121212e6
  • editorWidget.border#20202090
  • editorWidget.foreground#d4d4d4
  • focusBorder#a1ccdd60
  • gitDecoration.addedResourceForeground#b8d1a1
  • gitDecoration.deletedResourceForeground#e28d78
  • gitDecoration.ignoredResourceForeground#545454
  • gitDecoration.modifiedResourceForeground#a1ccdd
  • gitDecoration.untrackedResourceForeground#b8d1a1
  • input.background#121212e0
  • input.border#20202090
  • input.foreground#d4d4d4
  • input.placeholderForeground#808080
  • list.activeSelectionBackground#2a2a2aa0
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#202020a0
  • list.focusForeground#d4d4d4
  • list.hoverBackground#1a1a1aa0
  • list.hoverForeground#d4d4d4
  • list.inactiveSelectionBackground#20202085
  • list.inactiveSelectionForeground#d4d4d4
  • panel.background#181818
  • panel.border#50505050
  • panelTitle.activeForeground#d4d4d4
  • panelTitle.inactiveForeground#808080
  • scrollbarSlider.activeBackground#70707090
  • scrollbarSlider.background#50505050
  • scrollbarSlider.hoverBackground#60606070
  • selection.background#a1ccdd60
  • sideBar.background#181818
  • sideBar.foreground#a0a0a0
  • sideBarSectionHeader.background#1a1a1a
  • sideBarSectionHeader.foreground#d4d4d4
  • sideBarTitle.foreground#d4d4d4
  • statusBar.background#1a1a1a
  • statusBar.debuggingBackground#1a1a1a
  • statusBar.debuggingForeground#d4d4d4
  • statusBar.foreground#a0a0a0
  • tab.activeBackground#2a2a2a
  • tab.activeForeground#ffffff
  • tab.border#00000000
  • tab.inactiveBackground#1e1e1e
  • tab.inactiveForeground#808080
  • terminal.ansiBlack#181818
  • terminal.ansiBlue#a1ccdd
  • terminal.ansiBrightBlack#545454
  • terminal.ansiBrightBlue#a1ccdd
  • terminal.ansiBrightCyan#91B4D5
  • terminal.ansiBrightGreen#b8d1a1
  • terminal.ansiBrightMagenta#CEB0D3
  • terminal.ansiBrightRed#e28d78
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e8c090
  • terminal.ansiCyan#91B4D5
  • terminal.ansiGreen#b8d1a1
  • terminal.ansiMagenta#CEB0D3
  • terminal.ansiRed#e28d78
  • terminal.ansiWhite#d4d4d4
  • terminal.ansiYellow#e8c090
  • terminal.background#181818
  • terminal.foreground#d4d4d4
  • titleBar.activeBackground#1a1a1a
  • titleBar.activeForeground#d4d4d4
  • titleBar.inactiveBackground#1a1a1a
  • titleBar.inactiveForeground#808080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a6a6aitalic
variable, variable.parameter, variable.other, entity.name.variable#d4d4d4
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new#e8c090
string, string.quoted, string.template#b8d1a1
constant.numeric, constant.language, constant.character, constant.other#f0cc9a
entity.name.function, support.function, meta.function-call, variable.function#a1ccdd
entity.name.class, entity.name.type, support.type, support.class#f0cc9a
entity.name.tag#e28d78
punctuation.definition.tag#A0A0A0
entity.other.attribute-name#f0cc9a
support.type.property-name.css, meta.property-name.css#a1ccdd
meta.property-value.css, support.constant.property-value.css#b8d1a1
keyword.operator, punctuation#91B4D5
keyword.control.import, keyword.control.export, keyword.control.from#e8c090
support.type.property-name.json, meta.object-literal.key#a1ccdd
markup.heading, entity.name.section.markdown#e28d78bold
markup.bold#f0cc9abold
markup.italic#e8c090italic
markup.inline.raw, markup.fenced_code#91B4D5
string.regexp#91B4D5
constant.character.escape#a1ccdd
invalid#e28d78underline
Noirzen by e108 - VS Code Theme