Skip to main content
Coding Theme

Color themes

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#0e1512
  • activityBar.border#a3f5cb40
  • activityBar.foreground#c7ffd0
  • activityBarBadge.background#a3f5cb
  • activityBarBadge.foreground#08100d
  • breadcrumb.activeSelectionForeground#a3f5cb
  • breadcrumb.background#0b100e
  • breadcrumb.foreground#6c7a74
  • dropdown.background#101613
  • dropdown.border#2a332f
  • editor.background#0b100e
  • editor.foreground#d0e7d5
  • editor.lineHighlightBackground#18201d
  • editor.selectionBackground#aaffdd38
  • editor.selectionHighlightBackground#a3f5cb30
  • editor.symbolHighlightBackground#e1c98c22
  • editor.wordHighlightBackground#ddf6ff20
  • editor.wordHighlightStrongBackground#ffaad120
  • editor.wordHighlightTextBackground#ddf6ff11
  • editorBracketMatch.border#c2ffc240
  • editorCursor.background#0b100e
  • editorCursor.foreground#ffd76f
  • editorHoverWidget.background#101613f0
  • editorHoverWidget.border#a3f5cb40
  • editorIndentGuide.background1#2c332f
  • editorLineNumber.activeForeground#a8e8c0
  • editorLineNumber.foreground#49564f
  • editorWhitespace.foreground#3d453f
  • editorWidget.background#121915ee
  • editorWidget.border#a3f5cb30
  • gitDecoration.deletedResourceForeground#ff5f5f
  • gitDecoration.modifiedResourceForeground#e1c98c
  • gitDecoration.untrackedResourceForeground#a3f5cb
  • panel.background#121915
  • panel.border#2a332f
  • peekViewEditor.background#101613
  • peekViewEditor.matchHighlightBackground#a3f5cb30
  • peekViewResult.background#18201d
  • peekViewResult.selectionBackground#ddf6ff30
  • peekViewResult.selectionForeground#0b100e
  • quickInput.background#101613
  • quickInput.foreground#d0e7d5
  • sideBar.background#101613
  • sideBar.border#82f0e040
  • sideBar.dropBackground#a3f5cb20
  • sideBar.foreground#cadcc7
  • sideBarSectionHeader.background#18201d
  • sideBarSectionHeader.border#a3f5cb40
  • sideBarSectionHeader.foreground#a3f5cb
  • sideBarTitle.foreground#ddf6ff
  • statusBar.background#0e1512
  • statusBar.debuggingBackground#e1c98c
  • statusBar.foreground#ccebdd
  • tab.activeBackground#18201d
  • tab.activeForeground#ddf6ff
  • tab.border#141c19
  • tab.inactiveBackground#0b100e
  • tab.inactiveForeground#6c7a74
  • terminal.ansiBlue#98e6ff
  • terminal.ansiGreen#b8ffce
  • terminal.ansiMagenta#ffaad1
  • terminal.ansiYellow#e1c98c
  • terminal.background#0b100e
  • terminal.foreground#d0e7d5
  • titleBar.activeBackground#101613
  • titleBar.activeForeground#e2ffe7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5d675eitalic
string, constant.other.symbol#b8ffce
keyword, storage.type, keyword.control.import#e1c98c
entity.name.function, support.function#ddf6ff
variable, identifier#ffaad1
constant, constant.numeric#98e6ff
entity.name.class, entity.name.tag#baffc9
support.class, support.constant#c2f5ff
entity.name.type, support.type#9ed8ba
invalid, invalid.deprecated#ffffff
meta.brace#c2ffc2