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#F0EAF8
  • activityBar.foreground#6A4FB3
  • button.background#9B6FC9
  • button.foreground#FAFAFA
  • editor.background#FAFAFA
  • editor.findMatchBackground#CBB6E2
  • editor.findMatchForeground#2A2A2A
  • editor.findMatchHighlightBackground#DDD3EB
  • editor.foreground#2A2A2A
  • editor.lineHighlightBackground#EEE8F6
  • editor.selectionBackground#DDD3EB
  • editor.selectionForeground#A0A0A0
  • editorCursor.foreground#9B6FC9
  • editorGutter.background#FAFAFA
  • editorLineNumber.foreground#7F7F7F
  • editorWhitespace.foreground#CFCFCF
  • focusBorder#9B6FC9
  • input.background#F5F2FA
  • input.border#DDD3EB
  • input.foreground#2A2A2A
  • inputOption.activeBorder#9B6FC9
  • list.activeSelectionBackground#DDD3EB
  • list.activeSelectionForeground#2A2A2A
  • list.hoverBackground#EEE8F6
  • panel.background#F5F2FA
  • panelTitle.activeForeground#6A4FB3
  • scrollbarSlider.activeBackground#9B6FC9
  • scrollbarSlider.background#DDD3EB
  • scrollbarSlider.hoverBackground#C8B8E0
  • selection.background#DDD3EB
  • sideBar.background#F5F2FA
  • sideBar.foreground#2A2A2A
  • sideBarTitle.foreground#6A4FB3
  • statusBar.background#9B6FC9
  • statusBar.foreground#FAFAFA
  • tab.activeBackground#FAFAFA
  • tab.activeForeground#2A2A2A
  • tab.inactiveBackground#EEE8F6
  • tab.inactiveForeground#8E8E8E
  • terminal.ansiBlue#3F6F8F
  • terminal.ansiCyan#2F7F7A
  • terminal.ansiGreen#5F7F3A
  • terminal.ansiMagenta#8C3A6A
  • terminal.ansiRed#A04A2F
  • terminal.ansiYellow#6B5CA5
  • terminal.background#FAFAFA
  • terminal.foreground#2A2A2A
  • titleBar.activeBackground#EEE8F6
  • titleBar.activeForeground#2A2A2A
  • titleBar.inactiveBackground#F0EAF8
  • titleBar.inactiveForeground#8E8E8E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8E8E8Eitalic
keyword, storage.type, storage.modifier, punctuation.definition.keyword#6A4FB3bold
keyword.operator, punctuation.accessor, punctuation.separator, punctuation.terminator#4E4E4E
entity.name.function, support.function, meta.function-call, variable.function#3F6F8F
entity.name.type, support.type, storage.type.class, storage.type.interface#A04A2F
entity.other.attribute-name, meta.attribute-name, variable.parameter, variable.other.member#8C3A6A
variable, variable.other, variable.language#2F7F7A
constant.numeric, constant.language.numeric#6B5CA5
string, string.quoted, string.unquoted, punctuation.definition.string#5F7F3A
constant.other.color, support.constant.color, constant.other.rgb-value#B3476D
constant.language, support.constant, constant.character, constant.other#6B5CA5
entity.name.tag, punctuation.definition.tag#6A4FB3
entity.name.tag.custom#3F6F8F
punctuation.section.embedded.begin, punctuation.section.embedded.end#8C3A6A
Rafaella Lilac Plain by Rafaella Erbella - VS Code Theme