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#24283b
  • activityBar.foreground#a9b1d6
  • activityBarBadge.background#bb9af7
  • activityBarBadge.foreground#ffffff
  • editor.background#1a1b26
  • editor.foreground#a9b1d6
  • editor.lineHighlightBackground#24283b
  • editor.selectionBackground#3e4451
  • editor.selectionForeground#a9b1d6
  • editorCursor.foreground#ffffff
  • list.activeSelectionBackground#56b6c2
  • list.activeSelectionForeground#ffffff
  • list.hoverBackground#3e4451
  • sideBar.background#24283b
  • sideBar.foreground#a9b1d6
  • statusBar.background#24283b
  • statusBar.foreground#a9b1d6
  • statusBarItem.hoverBackground#3e4451
  • terminal.background#414868
  • terminal.foreground#c0caf5
  • titleBar.activeBackground#1a1b26
  • titleBar.activeForeground#a9b1d6
  • titleBar.inactiveBackground#1a1b26
  • titleBar.inactiveForeground#6b8290

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#565f89
string, entity.other.attribute-name.class#9ece6a
constant.numeric, constant.language#ff9e64
keyword, entity.name.tag, constant.other.regexp, keyword.unit#f7768e
variable.parameter, constant.other.character.regexp#e0af68
variable.parameter.function#cfc9c2
support.type.property-name, markup.underline.link#73daca
string.regexp#b4f9f8
support.function, entity.name.tag.css#2ac3de
entity.name.property, constant.regexp.quantifier, constant.regexp.flag, markup.heading, markup.fenced_code.block, keyword.import, keyword.export#7dcfff
entity.name.function#7aa2f7
keyword.control, storage, constant.regexp.symbol, keyword.operator.regexp, entity.other.attribute-name#bb9af7
variable, entity.name.class#c0caf5
markup.raw, markup.inline#9aa5ce
Rainforest Kong Dev Theme by sitamim - VS Code Theme