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.activeBackground#c2e0f5
  • activityBar.activeBorder#3daee9
  • activityBar.background#ffffff
  • activityBar.border#aaaaaa
  • activityBar.foreground#1c2225
  • activityBar.inactiveForeground#666666
  • activityBarBadge.background#3daee9
  • activityBarBadge.foreground#ffffff
  • dropdown.background#ffffff
  • dropdown.border#aaaaaa
  • dropdown.foreground#1c2225
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.foreground#1c2225
  • editorGroupHeader.tabsBackground#eff0f1
  • editorGroupHeader.tabsBorder#aaaaaa
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.foreground#1c2225
  • editorSuggestWidget.highlightForeground#1c2225
  • editorSuggestWidget.selectedBackground#3daee9
  • editorSuggestWidget.selectedForeground#ffffff
  • list.activeSelectionBackground#3daee9
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#fff
  • list.highlightForeground#c2e0f5
  • list.hoverBackground#c2e0f5
  • list.inactiveFocusOutline#3daee9
  • list.inactiveSelectionBackground#c2e0f5
  • list.inactiveSelectionForeground#1c2225
  • panelTitle.activeBorder#3daee9
  • panelTitle.activeForeground#3daee9
  • panelTitle.inactiveForeground#1c2225
  • sideBar.background#ffffff
  • sideBar.border#aaaaaa
  • sideBar.foreground#1c2225
  • sideBarSectionHeader.background#eff0f1
  • sideBarSectionHeader.border#aaaaaa
  • sideBarSectionHeader.foreground#666666
  • statusBar.background#eff0f1
  • statusBar.border#aaaaaa
  • statusBar.foreground#1c2225
  • tab.activeBackground#ffffff
  • tab.activeBorder#ffffff
  • tab.activeForeground#1c2225
  • tab.border#aaaaaa
  • tab.hoverBackground#c2e0f5
  • tab.hoverForeground#1c2225
  • tab.inactiveBackground#eff0f1
  • tab.inactiveBorder#aaaaaa
  • tab.inactiveForeground#1c2225
  • tab.inactiveModifiedBorder#aaaaaa
  • terminal.ansiBlack#1c2225
  • terminal.ansiBlue#5050ff
  • terminal.ansiBrightBlack#1c2225
  • terminal.ansiBrightBlue#5050ff
  • terminal.ansiBrightCyan#50ffff
  • terminal.ansiBrightGreen#50ff50
  • terminal.ansiBrightMagenta#ff50ff
  • terminal.ansiBrightRed#ff2020
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff50
  • terminal.ansiCyan#50ffff
  • terminal.ansiGreen#50ff50
  • terminal.ansiMagenta#ff50ff
  • terminal.ansiRed#ff2020
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffff50
  • terminal.background#1c2225
  • terminal.border#1c2225
  • terminal.foreground#FFFFFF
  • terminal.selectionBackground#c2e0f5
  • terminalCursor.background#505050
  • terminalCursor.foreground#eeeeee

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant#810000
storage.modifier, keyword.other.binding, entity.name.namespace#1e2af3
keyword.control, keyword.function, variable.language.self#1e2af3bold
keyword.type, meta.type_params, keyword.other, invalid, support.type, entity.name.type.enumeration, meta.type-parameters, entity.name.function, keyword.local.lua, support.function.general.tex#3f90f6
storage.type, entity.name.type#2ebfcc
support.type.primitive, entity.name.type.numeric#2ebfccbold
keyword.operator.borrow.and, storage.modifier.lifetime, keyword.operator.dereference, entity.name.type.core, meta.attribute#fa4a18
punctuation.definition.interpolation, constant.character.escape#fa4a18bold
constant.numeric, string#ed8817
#ed8817bold
_entity.name.namespace#d0a200
comment, comment.line, comment.line.double-slash, comment.block, comment.line.double-dash, punctuation.definition.comment, comment.line.percentage, comment.linecomment#1f6829italic
comment.line.documentation, comment.line.double-dash.doc.lua#7e7e7eitalic
#00ff00
Xanthron Light by Xanthron Writer - VS Code Theme