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#181825
  • activityBar.foreground#cdd6f4
  • editor.background#1e1e2e
  • editor.foreground#cdd6f4
  • editor.inactiveSelectionBackground#313244
  • editor.lineHighlightBackground#313244
  • editor.selectionBackground#45475a
  • editorBracketMatch.background#45475a
  • editorBracketMatch.border#89b4fa
  • editorCursor.foreground#f5e0dc
  • editorIndentGuide.activeBackground#45475a
  • editorIndentGuide.background#313244
  • editorLineNumber.activeForeground#f5e0dc
  • editorLineNumber.foreground#6c7086
  • editorWhitespace.foreground#45475a
  • panel.background#1e1e2e
  • sideBar.background#181825
  • sideBar.foreground#cdd6f4
  • sideBarSectionHeader.background#1e1e2e
  • statusBar.background#181825
  • statusBar.foreground#cdd6f4
  • terminal.background#1e1e2e
  • terminal.foreground#cdd6f4
  • titleBar.activeBackground#181825
  • titleBar.activeForeground#cdd6f4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6c7086italic
keyword.control, keyword.other, storage.modifier#cba6f7bold
keyword.control.import, keyword.control.from#f38ba8bold
storage.type.component, entity.name.tag.component#89dcebbold
support.function.hook, support.function.lifecycle#f9e2afitalic
support.function.event#fab387italic
support.type.property-name.css, support.type.property-name.flexbox, support.type.property-name.grid#94e2d5
support.function.gradient, support.function.transform, support.function.filter#a6e3a1
support.type.layout, support.type.animation#89b4fa
entity.name.tag.jsx, punctuation.definition.tag#89dceb
entity.other.attribute-name.jsx#f9e2af
string.quoted, string.template#a6e3a1
constant.numeric#fab387
constant.language.boolean, constant.language.null#f38ba8
entity.name.function, support.function.builtin#89b4fa
storage.type.primitive, entity.name.type#f9e2af
keyword.operator#94e2d5
variable.parameter#cdd6f4
punctuation#bac2de
meta.embedded.expression#f5c2e7
L# by Moude AI - VS Code Theme