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#E5E2DE
  • activityBar.foreground#BA2659
  • editor.background#F4F1ED
  • editor.foreground#1F1F23
  • editor.selectionBackground#D6E4DC
  • editor.selectionHighlightBackground#E1EEE6
  • editor.wordHighlightBackground#E4F0F9
  • editor.wordHighlightStrongBackground#DDE6F1
  • editorBracketMatch.background#EAE7E2
  • editorBracketMatch.border#009688
  • editorCursor.foreground#009688
  • editorLineHighlightBackground#E9E6E1
  • editorLineNumber.activeForeground#4A4A4A
  • editorLineNumber.foreground#A5A5A5
  • panel.background#F7F6F4
  • panel.border#D6D6D6
  • sideBar.background#F0EEEB
  • sideBar.foreground#3A3A3A
  • statusBar.background#DEDCD9
  • statusBar.foreground#1A1A1A
  • tab.activeBackground#F7F6F4
  • tab.activeForeground#BA2659
  • tab.inactiveBackground#E3E1DD
  • tab.inactiveForeground#6B6B6B
  • terminal.ansiBlack#C1C1C1
  • terminal.ansiBlue#1A75BB
  • terminal.ansiCyan#009688
  • terminal.ansiGreen#558000
  • terminal.ansiMagenta#8E44AD
  • terminal.ansiRed#A94442
  • terminal.ansiWhite#1F1F23
  • terminal.ansiYellow#B88900
  • terminal.background#F4F1ED
  • terminal.foreground#1F1F23
  • terminalCursor.foreground#009688
  • titleBar.activeBackground#EAE7E3
  • titleBar.activeForeground#1F1F23
  • titleBar.inactiveForeground#888888

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8D8D8Ditalic
keyword, storage.type, storage.modifier#BA2659bold
string, string.quoted, string.template#B88900
variable, identifier, meta.definition.variable.name#009688
entity.name.function, support.function#1A75BB
entity.name.class, entity.name.type.class, entity.name.type.interface#A94442
variable.other, variable.parameter, variable.language#009688
constant, constant.language, constant.character, constant.other#8E44AD
keyword.operator, keyword.other#BA2659
punctuation, meta.brace.round, meta.brace.square, meta.brace.curly, punctuation.separator.comma, punctuation.definition.parameters.begin, punctuation.definition.parameters.end#8E44AD
invalid, invalid.deprecated#FFFFFFbold
storage.type.annotation, meta.annotation#BA2659
entity.name.namespace, entity.name.module#1A75BB
entity.name.enum, support.type.enum#B88900
entity.name.type.parameter#1A75BB
entity.name.function.macro#009688
meta.preprocessor#BA2659
comment.documentation#8E44ADitalic
markup.heading#BA2659bold
markup.link#1A75BBunderline
markup.quote#8E44ADitalic
markup.list#B88900
meta.diff, meta.diff.header, meta.diff.header.from, meta.diff.header.to#BA2659bold
meta.diff.line#1F1F23
meta.separator#A5A5A5
entity.name.tag, meta.tag#BA2659
entity.other.attribute-name, entity.other.attribute-name.html#B88900
entity.other.attribute-name.class.css#BA2659
entity.other.attribute-name.id.css#1A75BB
support.type.property-name.css, support.property-name#1A75BB
support.constant.property-value.css, constant.other.color.rgb-value.css, constant.other.color.hex.css#B88900
variable.other.readwrite.js, variable.other.js#009688
entity.name.function, support.function, meta.function-call.js, meta.function.js#1A75BB
keyword, storage.type, storage.modifier, keyword.control.js, keyword.operator.js#BA2659bold
constant.numeric, constant.language.boolean, constant.language.null, constant.numeric.js#8E44AD
punctuation.terminator.statement.js, punctuation.separator.parameter.js#B88900