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#202638
  • 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
Soft Blue Theme by Stanislau Dziarhach - VS Code Theme