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#0c0a09
  • activityBar.foreground#e9e3d7
  • badge.background#2a2118
  • badge.foreground#e8e1d4
  • dropdown.background#14110d
  • dropdown.foreground#d9d3c6
  • editor.background#0e0c0a
  • editor.foreground#d9d3c6
  • editor.inactiveSelectionBackground#1f1913
  • editor.lineHighlightBackground#14100d
  • editor.selectionBackground#2a2118
  • editor.selectionHighlightBackground#2a2118aa
  • editor.wordHighlightBackground#3a2f25aa
  • editor.wordHighlightStrongBackground#45372baa
  • editorBracketHighlight.foreground1#ffd49a
  • editorBracketHighlight.foreground2#cfe69b
  • editorBracketHighlight.foreground3#e7b48e
  • editorBracketHighlight.foreground4#d7bfe3
  • editorBracketHighlight.foreground5#bfe3d7
  • editorBracketHighlight.foreground6#f0b8d0
  • editorBracketHighlight.unexpectedBracket.foreground#ff6b6b
  • editorBracketMatch.background#2a2118
  • editorBracketMatch.border#2a2118
  • editorCursor.foreground#ffe3a2
  • editorGutter.addedBackground#b7d58b
  • editorGutter.background#0d0b09
  • editorGutter.deletedBackground#e4958c
  • editorGutter.modifiedBackground#f2b17b
  • editorIndentGuide.activeBackground#2e241b
  • editorIndentGuide.background#201a15
  • editorLineNumber.activeForeground#b7aa98
  • editorLineNumber.foreground#5a5248
  • editorSuggestWidget.background#14110d
  • editorSuggestWidget.foreground#d9d3c6
  • editorSuggestWidget.selectedBackground#241c13
  • editorWhitespace.foreground#2c2620
  • editorWidget.background#14110d
  • list.activeSelectionBackground#1b160f
  • list.focusBackground#1a140f
  • list.hoverBackground#17130e
  • list.inactiveSelectionBackground#16120d
  • panel.background#0c0a09
  • scrollbarSlider.activeBackground#3a2f2599
  • scrollbarSlider.background#3a2f2555
  • scrollbarSlider.hoverBackground#3a2f2577
  • sideBar.background#0c0a09
  • sideBar.foreground#c9c2b6
  • statusBar.background#0c0a09
  • statusBar.foreground#bfb7a7
  • tab.activeBackground#14110d
  • tab.activeForeground#f1ece1
  • tab.border#0c0a09
  • tab.inactiveBackground#0b0a09
  • tab.inactiveForeground#b7aa98
  • terminal.ansiBlack#0e0c0a
  • terminal.ansiBlue#c6b7ff
  • terminal.ansiBrightBlack#1c1815
  • terminal.ansiBrightBlue#d5c9ff
  • terminal.ansiBrightCyan#d7f0ea
  • terminal.ansiBrightGreen#c8e7a6
  • terminal.ansiBrightMagenta#f0ccff
  • terminal.ansiBrightRed#f0a49b
  • terminal.ansiBrightWhite#f4efe6
  • terminal.ansiBrightYellow#ffd296
  • terminal.ansiCyan#c3e1da
  • terminal.ansiGreen#b7d58b
  • terminal.ansiMagenta#e6b8ff
  • terminal.ansiRed#e4958c
  • terminal.ansiWhite#e8e1d4
  • terminal.ansiYellow#f2c17b
  • terminal.background#0e0c0a
  • terminal.foreground#d9d3c6
  • titleBar.activeBackground#0c0a09
  • titleBar.activeForeground#e9e3d7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8b7e6aitalic
keyword, storage.type, storage.modifier#f2c17b
entity.name.function, support.function, variable.function#e8c7a1
string, punctuation.definition.string#d9d58a
constant.numeric, constant.character.numeric#e9b77a
constant.language, support.constant#e5b8c9
variable, meta.definition.variable.name#e6e1d5
variable.parameter#d3c8b6
entity.name.type, support.type, entity.other.inherited-class#d6bfa5
entity.name.class, support.class#d6bfa5bold
punctuation, meta.brace, meta.delimiter#9a8e7c
invalid, invalid.illegal#ffffff
Amber Night (Ashish Verma) by ashish-verma - VS Code Theme