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.background#0a0c0f
  • activityBar.foreground#c7cdd3
  • badge.background#1f2a3b
  • badge.foreground#c7cdd3
  • dropdown.background#0e1116
  • dropdown.foreground#c7cdd3
  • editor.background#0b0d10
  • editor.foreground#c7cdd3
  • editor.inactiveSelectionBackground#141a22
  • editor.lineHighlightBackground#101317
  • editor.selectionBackground#1d2633
  • editor.selectionHighlightBackground#1d263399
  • editor.wordHighlightBackground#24304066
  • editor.wordHighlightStrongBackground#2a364966
  • editorBracketHighlight.foreground1#90b4f8
  • editorBracketHighlight.foreground2#9fd3a6
  • editorBracketHighlight.foreground3#e6c07b
  • editorBracketHighlight.foreground4#c7a6f2
  • editorBracketHighlight.foreground5#7ad1e6
  • editorBracketHighlight.foreground6#f0b8d0
  • editorBracketHighlight.unexpectedBracket.foreground#ff6b6b
  • editorBracketMatch.background#1b2433
  • editorBracketMatch.border#1b2433
  • editorCursor.foreground#d6e4ff
  • editorGutter.addedBackground#8ccf7e
  • editorGutter.background#0a0c0f
  • editorGutter.deletedBackground#e27d7d
  • editorGutter.modifiedBackground#5fb3f3
  • editorIndentGuide.activeBackground#2b3441
  • editorIndentGuide.background#1a2029
  • editorLineNumber.activeForeground#9aa4b2
  • editorLineNumber.foreground#3c4450
  • editorSuggestWidget.background#0e1116
  • editorSuggestWidget.foreground#c7cdd3
  • editorSuggestWidget.selectedBackground#162030
  • editorWhitespace.foreground#2a323c
  • editorWidget.background#0e1116
  • list.activeSelectionBackground#131a24
  • list.focusBackground#121922
  • list.hoverBackground#0f141c
  • list.inactiveSelectionBackground#10161f
  • panel.background#0a0c0f
  • scrollbarSlider.activeBackground#2a324299
  • scrollbarSlider.background#2a324255
  • scrollbarSlider.hoverBackground#2a324277
  • sideBar.background#0a0c0f
  • sideBar.foreground#99a3af
  • statusBar.background#0a0c0f
  • statusBar.foreground#a6adb7
  • tab.activeBackground#0e1116
  • tab.activeForeground#e5e7eb
  • tab.border#0a0c0f
  • tab.inactiveBackground#090b0e
  • tab.inactiveForeground#9aa4b2
  • terminal.ansiBlack#0b0d10
  • terminal.ansiBlue#8fb4f4
  • terminal.ansiBrightBlack#1b1f26
  • terminal.ansiBrightBlue#a0c2ff
  • terminal.ansiBrightCyan#9ae2e2
  • terminal.ansiBrightGreen#a8d9a8
  • terminal.ansiBrightMagenta#d6b8ff
  • terminal.ansiBrightRed#f08f8f
  • terminal.ansiBrightWhite#e8edf3
  • terminal.ansiBrightYellow#f1d19c
  • terminal.ansiCyan#86d1d1
  • terminal.ansiGreen#9dc49d
  • terminal.ansiMagenta#c7a6f2
  • terminal.ansiRed#e27d7d
  • terminal.ansiWhite#d5dbe1
  • terminal.ansiYellow#e3c18a
  • terminal.background#0b0d10
  • terminal.foreground#c7cdd3
  • titleBar.activeBackground#0a0c0f
  • titleBar.activeForeground#c7cdd3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b7280italic
keyword, storage.type, storage.modifier#89a7f2
entity.name.function, support.function, variable.function#c4a7e7
string, punctuation.definition.string#a7d4a0
constant.numeric, constant.character.numeric#e8c28c
constant.language, support.constant#d5b0cf
variable, meta.definition.variable.name#cfd6dc
variable.parameter#b8c2cc
entity.name.type, support.type, entity.other.inherited-class#a6d0d6
entity.name.class, support.class#a6d0d6bold
punctuation, meta.brace, meta.delimiter#8a93a4
invalid, invalid.illegal#ffffff
Absolute Night (Ashish Verma) by ashish-verma - VS Code Theme