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#3B2C3F
  • activityBar.foreground#F06292
  • editor.background#232026
  • editor.foreground#F8F5F0
  • editor.selectionBackground#4B3B4F
  • editor.selectionHighlightBackground#3B2C3F
  • editor.wordHighlightBackground#3B2C3F
  • editor.wordHighlightStrongBackground#4B3B4F
  • editorBracketMatch.background#3B2C3F
  • editorBracketMatch.border#8E24AA
  • editorCursor.foreground#F06292
  • editorLineHighlightBackground#2C2530
  • editorLineNumber.activeForeground#FFB300
  • editorLineNumber.foreground#8D7B8A
  • panel.background#232026
  • panel.border#4B3B4F
  • sideBar.background#2C2530
  • sideBar.foreground#E1BEE7
  • statusBar.background#4B3B4F
  • statusBar.foreground#FFD54F
  • tab.activeBackground#2C2530
  • tab.activeForeground#F06292
  • tab.inactiveBackground#232026
  • tab.inactiveForeground#BCAAA4
  • terminal.ansiBlack#8D7B8A
  • terminal.ansiBlue#1E88E5
  • terminal.ansiCyan#00ACC1
  • terminal.ansiGreen#43A047
  • terminal.ansiMagenta#8E24AA
  • terminal.ansiRed#F06292
  • terminal.ansiWhite#F8F5F0
  • terminal.ansiYellow#FFB300
  • terminal.background#232026
  • terminal.foreground#F8F5F0
  • terminalCursor.foreground#F06292
  • titleBar.activeBackground#2C2530
  • titleBar.activeForeground#FFD54F
  • titleBar.inactiveForeground#8D7B8A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.documentation#8D7B8Aitalic
keyword, storage.type, storage.modifier, keyword.control.js, keyword.operator.js#F06292bold
string, string.quoted, string.template, string.quoted.double.html, string.quoted.single.html#FFB300
variable, identifier, meta.definition.variable.name, variable.other.readwrite.js, variable.other.js, variable.other, variable.parameter, variable.language#00ACC1
entity.name.function, support.function, meta.function-call.js, meta.function.js#1E88E5
entity.name.class, entity.name.type.class, entity.name.type.interface, entity.other.attribute-name.class.css#8E24AA
entity.name.tag, meta.tag#F06292
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.id.css#43A047
support.type.property-name.css, support.property-name#1E88E5
support.constant.property-value.css, constant.other.color.rgb-value.css, constant.other.color.hex.css#FFB300
constant, constant.language, constant.character, constant.other, constant.numeric, constant.language.boolean, constant.language.null, constant.numeric.js#8E24AA
keyword.operator, keyword.other#F06292
punctuation, meta.brace.round, meta.brace.square, meta.brace.curly, punctuation.separator.comma, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.tag, punctuation.separator.key-value#8E24AA
invalid, invalid.deprecated#232026bold
storage.type.annotation, meta.annotation#F06292
entity.name.namespace, entity.name.module#1E88E5
entity.name.enum, support.type.enum#FFB300
entity.name.type.parameter#1E88E5
entity.name.function.macro#00ACC1
meta.preprocessor#F06292
markup.heading#F06292bold
markup.link#1E88E5underline
markup.quote#8E24AAitalic
markup.list#FFB300
meta.diff, meta.diff.header, meta.diff.header.from, meta.diff.header.to#F06292bold
meta.diff.line#F8F5F0
meta.separator#8D7B8A