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#1B2030
  • activityBar.border#2C3E50
  • activityBar.foreground#85C1E9
  • activityBar.inactiveForeground#5D6D7E
  • activityBarBadge.background#3498DB
  • activityBarBadge.foreground#FFFFFF
  • button.background#3498DB
  • button.foreground#FFFFFF
  • button.hoverBackground#2980B9
  • debugConsole.errorForeground#E74C3C
  • debugConsole.infoForeground#85C1E9
  • debugConsole.warningForeground#E67E22
  • debugToolBar.background#252B3D
  • dropdown.background#252B3D
  • dropdown.border#2C3E50
  • dropdown.foreground#E8F4F8
  • editor.background#242B3D
  • editor.findMatchBackground#17A2B860
  • editor.findMatchHighlightBackground#5DADE240
  • editor.foreground#E8F4F8
  • editor.lineHighlightBackground#232938
  • editor.selectionBackground#3498DB40
  • editor.selectionHighlightBackground#2980B930
  • editorCursor.foreground#5DADE2
  • editorGroup.border#2C3E50
  • editorGroupHeader.noTabsBackground#1A1F2E
  • editorGroupHeader.tabsBackground#1E2332
  • editorIndentGuide.activeBackground1#3498DB
  • editorIndentGuide.background1#2C3E50
  • editorLineNumber.activeForeground#85C1E9
  • editorLineNumber.foreground#5D6D7E
  • input.background#252B3D
  • input.border#2C3E50
  • input.foreground#E8F4F8
  • list.activeSelectionBackground#3498DB40
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#3498DB30
  • list.hoverBackground#2C3E5020
  • list.inactiveSelectionBackground#2C3E5030
  • notifications.background#252B3D
  • notifications.border#2C3E50
  • notifications.foreground#E8F4F8
  • pickerGroup.border#2C3E50
  • pickerGroup.foreground#85C1E9
  • quickInput.background#252B3D
  • quickInput.foreground#E8F4F8
  • scrollbar.shadow#1A1F2E
  • scrollbarSlider.activeBackground#3498DB80
  • scrollbarSlider.background#3498DB40
  • scrollbarSlider.hoverBackground#3498DB60
  • sideBar.background#232938
  • sideBar.border#2C3E50
  • sideBar.foreground#B8D4E3
  • sideBarSectionHeader.background#252B3D
  • sideBarSectionHeader.foreground#AED6F1
  • sideBarTitle.foreground#85C1E9
  • statusBar.background#2C3E50
  • statusBar.debuggingBackground#2980B9
  • statusBar.foreground#AED6F1
  • statusBar.noFolderBackground#34495E
  • tab.activeBackground#2A3548
  • tab.activeBorder#00000000
  • tab.activeBorderTop#85C1E9
  • tab.activeForeground#E8F4F8
  • tab.border#00000000
  • tab.inactiveBackground#252B3D
  • tab.inactiveForeground#85929E
  • terminal.ansiBlue#5DADE2
  • terminal.ansiCyan#30D5C8
  • terminal.ansiGreen#30D5C8
  • terminal.ansiMagenta#17A2B8
  • terminal.ansiRed#E74C3C
  • terminal.ansiYellow#FFEDA1
  • terminal.background#242B3D
  • terminal.foreground#E8F4F8
  • titleBar.activeBackground#1E2332
  • titleBar.activeForeground#AED6F1
  • titleBar.inactiveBackground#16171A
  • titleBar.inactiveForeground#5D6D7E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7B8794italic
variable, string constant.other.placeholder#E1F0FF
keyword, storage.type, storage.modifier#B19CD9
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#85C1E9
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, punctuation.separator.operator, keyword.operator.increment, keyword.operator.decrement#FFFFFF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#E74C3C
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#30D5C8italic
variable.parameter, meta.function.parameters variable.other#D4E9FFitalic
variable.language, variable.language.this, variable.language.super, variable.language.self#9DC4E0italic
entity.name.method, meta.method-call#66E5FFitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#98D8C8
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#FFEDA1
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#C8A8E9italic
entity.other.attribute-name#FFEDA1
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFEDA1italic
invalid, invalid.illegal#E74C3C
source.json meta.structure.dictionary.json support.type.property-name.json#85C1E9
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#85C1E9bold
markup.bold, markup.bold string#E8F4F8bold
markup.italic#D5DBDBitalic
string.other.link.title.markdown#5DADE2underline
support.type.property-name.css#30D5C8
support.constant.property-value.css#17A2B8
string.regexp#A8C8E1
constant.character.escape#A8C8E1
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison#7FB3B3
keyword.control.flow, keyword.control.conditional, keyword.control.loop#8FC4C4
keyword.control.import, keyword.control.export, keyword.control.from#B8A3D1
entity.name.type.enum, support.type.enum#30D5C8
variable.other.enummember, constant.other.enum, variable.other.constant.property#A3D4C7
variable.other.object, variable.other.readwrite, support.variable#E8F4F9
entity.name.type, support.type, entity.name.type.class#9BD4C1italic
meta.annotation variable.function, meta.annotation variable.annotation.function, meta.annotation punctuation.definition.annotation, meta.decorator, punctuation.decorator#D4A5E8italic
support.function.magic.python#30D5C8italic
variable.parameter.function.language.special.self.python, variable.language.special.self.python#87C5C5italic
entity.name.function.decorator.python, punctuation.definition.decorator.python#FFEDA1italic
meta.annotation.rust, meta.annotation.rust punctuation, meta.attribute.rust, punctuation.definition.attribute.rust#85C1E9italic
support.macro.rust, meta.macro.rust support.function.rust, entity.name.function.macro.rust#30D5C8italic
storage.modifier.lifetime.rust, entity.name.type.lifetime#A8C8E1italic
support.function.macro.julia#30D5C8italic