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#E0F2FF
  • activityBar.border#C7DDF0
  • activityBar.foreground#2980B9
  • activityBar.inactiveForeground#7FB3D3
  • activityBarBadge.background#3498DB
  • activityBarBadge.foreground#FFFFFF
  • button.background#3498DB
  • button.foreground#FFFFFF
  • button.hoverBackground#2980B9
  • debugConsole.errorForeground#E74C3C
  • debugConsole.infoForeground#2980B9
  • debugConsole.warningForeground#E67E22
  • debugToolBar.background#F0F8FF
  • dropdown.background#FFFFFF
  • dropdown.border#D6E9FF
  • dropdown.foreground#2C3E50
  • editor.background#EEFAFF
  • editor.findMatchBackground#17A2B899
  • editor.findMatchHighlightBackground#5DADE266
  • editor.foreground#2C3E50
  • editor.lineHighlightBackground#F8FBFE
  • editor.selectionBackground#D6E9FF99
  • editor.selectionHighlightBackground#E8F4F899
  • editorCursor.foreground#2980B9
  • editorIndentGuide.activeBackground1#D6E9FF
  • editorIndentGuide.background1#E8F4F8
  • editorLineNumber.activeForeground#2980B9
  • editorLineNumber.foreground#85929E
  • input.background#FFFFFF
  • input.border#D6E9FF
  • input.foreground#2C3E50
  • notifications.background#FAFBFC
  • notifications.border#D6E9FF
  • notifications.foreground#2C3E50
  • pickerGroup.border#D6E9FF
  • pickerGroup.foreground#2980B9
  • quickInput.background#FAFBFC
  • quickInput.foreground#2C3E50
  • scrollbar.shadow#E8F4F8
  • scrollbarSlider.activeBackground#85C1E999
  • scrollbarSlider.background#D6E9FF99
  • scrollbarSlider.hoverBackground#AED6F199
  • sideBar.background#E0F2FF
  • sideBar.border#E0F2FF
  • sideBar.foreground#34495E
  • sideBarSectionHeader.background#DCE8F5
  • sideBarSectionHeader.foreground#2471A3
  • sideBarTitle.foreground#2980B9
  • statusBar.background#85C1E9
  • statusBar.debuggingBackground#5DADE2
  • statusBar.foreground#1B4F72
  • statusBar.noFolderBackground#AED6F1
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#00000000
  • tab.activeBorderTop#3498DB
  • tab.activeForeground#2C3E50
  • tab.border#00000000
  • tab.inactiveBackground#E8F4F8
  • tab.inactiveForeground#5D6D7E
  • terminal.ansiBlue#3498DB
  • terminal.ansiCyan#17A2B8
  • terminal.ansiGreen#20B2AA
  • terminal.background#DDEFF8
  • terminal.foreground#2C3E50
  • titleBar.activeBackground#AED6F1
  • titleBar.activeForeground#1B4F72
  • titleBar.inactiveBackground#D5DBDB
  • titleBar.inactiveForeground#85929E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5B8FB9italic
variable, string constant.other.placeholder#1E5A8A—
keyword, storage.type, storage.modifier#8B5A96—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#5DADE2—
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, punctuation.separator.operator, keyword.operator.increment, keyword.operator.decrement#708090—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#C0392B—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#20B2AAitalic
variable.parameter, meta.function.parameters variable.other#17A2B8italic
variable.language, variable.language.this, variable.language.super, variable.language.self#C0392Bitalic
entity.name.method, meta.method-call#3498DBitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#1F5582—
string.regexp#17A2B8—
constant.character.escape#17A2B8—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison#B7472A—
keyword.control.flow, keyword.control.conditional, keyword.control.loop#8E44AD—
keyword.control.import, keyword.control.export, keyword.control.from#9B59B6—
entity.name.type, support.type, entity.name.type.class#27AE60—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#17A2B8—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#CC9900—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#9B4F96italic
entity.other.attribute-name#CC9900—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#CC9900italic
invalid, invalid.illegal#C0392B—
source.json meta.structure.dictionary.json support.type.property-name.json#5DADE2—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#2980B9bold
markup.bold, markup.bold string#34495Ebold
markup.italic#5D6D7Eitalic
string.other.link.title.markdown#3498DBunderline
entity.name.type.enum, support.type.enum#20B2AA—
variable.other.enummember, constant.other.enum, variable.other.constant.property#A0522D—
entity.name.type, support.type, entity.name.type.class#228B22italic
meta.annotation variable.function, meta.annotation variable.annotation.function, meta.annotation punctuation.definition.annotation, meta.decorator, punctuation.decorator#8E5A9Eitalic
support.function.magic.python#20B2AAitalic
variable.parameter.function.language.special.self.python, variable.language.special.self.python#CD5C5Citalic
entity.name.function.decorator.python, punctuation.definition.decorator.python#CD853Fitalic
meta.annotation.rust, meta.annotation.rust punctuation, meta.attribute.rust, punctuation.definition.attribute.rust#5DADE2italic
support.macro.rust, meta.macro.rust support.function.rust, entity.name.function.macro.rust#20B2AAitalic
storage.modifier.lifetime.rust, entity.name.type.lifetime#4682B4italic
support.function.macro.julia#20B2AAitalic