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.activeBorder#DD7596
  • activityBar.background#2E3A48
  • activityBar.foreground#B7C3F3
  • activityBar.inactiveForeground#4F6272
  • activityBarBadge.background#D05786
  • breadcrumb.background#404E5C
  • breadcrumb.foreground#B7C3F3
  • editor.background#404E5C
  • editor.foreground#B7C3F3
  • editor.selectionBackground#4F627266
  • editor.wordHighlightBackground#BCB6FF33
  • editor.wordHighlightStrongBackground#B8E1FF33
  • editorBracketHighlight.foreground1#63C5EA
  • editorBracketHighlight.foreground2#9F7EBE
  • editorBracketHighlight.foreground3#83AFDF
  • editorBracketHighlight.foreground4#BCB6FF
  • editorBracketHighlight.foreground5#B8E1FF
  • editorBracketHighlight.foreground6#A9FFF7
  • editorError.foreground#D05786
  • editorGroupHeader.tabsBackground#363E4A
  • editorHint.foreground#82ABA1
  • editorInfo.foreground#A9FFF7
  • editorLineHighlight.background#4F627233
  • editorWarning.foreground#ECDA90
  • editorWidget.background#363E4A
  • editorWidget.foreground#B7C3F3
  • menu.background#363E4A
  • menu.foreground#B7C3F3
  • menu.selectionBackground#4F6272
  • menu.selectionForeground#B7C3F3
  • menubar.selectionBackground#4F6272
  • menubar.selectionForeground#B7C3F3
  • notifications.background#363E4A
  • notifications.foreground#B7C3F3
  • progressBar.background#DD7596
  • quickInput.background#363E4A
  • quickInput.foreground#B7C3F3
  • sideBar.background#363E4A
  • sideBar.foreground#B7C3F3
  • sideBarSectionHeader.background#4F6272
  • sideBarSectionHeader.foreground#B7C3F3
  • sideBarTitle.foreground#B7C3F3
  • statusBar.background#2E3A48
  • statusBar.debuggingBackground#D05786
  • statusBar.foreground#B7C3F3
  • statusBar.noFolderBackground#2E3A48
  • tab.activeBackground#404E5C
  • tab.activeBorderTop#DD7596
  • tab.activeForeground#B7C3F3
  • tab.inactiveBackground#363E4A
  • tab.inactiveForeground#4F6272
  • terminal.ansiBlack#363E4A
  • terminal.ansiBlue#B8E1FF
  • terminal.ansiBrightBlue#B8E1FF
  • terminal.ansiBrightCyan#A9FFF7
  • terminal.ansiBrightGreen#94FBAB
  • terminal.ansiBrightMagenta#BCB6FF
  • terminal.ansiCyan#A9FFF7
  • terminal.ansiGreen#94FBAB
  • terminal.ansiMagenta#BCB6FF
  • terminal.ansiRed#D05786
  • terminal.ansiWhite#B7C3F3
  • terminal.ansiYellow#DD7596
  • terminal.background#404E5C
  • terminal.foreground#B7C3F3
  • titleBar.activeBackground#2E3A48
  • titleBar.activeForeground#B7C3F3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#82ABA1
string, constant.other.symbol#83AFDF
keyword, storage.type, storage.modifier#DD7596
entity.name.function, meta.function-call#63C5EA
variable.parameter, meta.parameter#AED6F1
variable.function, meta.function-call.generic#63C5EAitalic
variable, support.variable#B7C3F3
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#DD7596
constant.numeric#A9FFF7
constant#D05786
entity.name.tag#DD7596
entity.other.attribute-name#B7C3F3
support.type.property-name.json#ECDA90
string.quoted.double.json#83AFDF
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, punctuation.separator.dictionary.key-value.json, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.array.begin.json, punctuation.definition.array.end.json#9F7EBE
keyword.operator#9F7EBE
meta.method-call entity.name.function#63C5EA
meta.method entity.name.function#63C5EA
meta.definition.function entity.name.function#63C5EA
keyword.control.flow.sql, keyword.control.import.sql, keyword.operator.logical.sql#DD7596bold
support.function.builtin.sql#63C5EA
variable.parameter.function.sql#AED6F1
constant.language.sql#D05786bold
keyword.operator.sql#9F7EBE
entity.name.type.table.sql#DD7596bold
entity.name.type.column.sql#B7C3F3
string.quoted.single.sql, string.quoted.double.sql#83AFDF
comment.line.sql, punctuation.definition.comment.sql#82ABA1
punctuation.definition.sql#9F7EBE
SQL Variables
meta.decorator.python, entity.name.function.decorator.python#9F7EBEitalic
variable.parameter.function.python#AED6F1
meta.function-call.python, meta.function-call.generic.python#63C5EA
support.function.builtin.python#83AFDFitalic
variable.parameter.function.language.special.self.python, variable.language.special.self.python#DD7596italic
entity.name.type.class.python#DD7596bold
meta.import.python, entity.name.namespace.python#9F7EBE
meta.fstring.python, constant.character.format.placeholder.other.python#83AFDF
string.quoted.docstring.multi.python#82ABA1italic
support.function.magic.python#83AFDFbold italic
meta.function.annotation.return.python, meta.function.parameters.annotation.python, support.type.python#83AFDF
constant.language.python#D05786bold
support.type.exception.python#D05786italic
keyword.control.flow.python, keyword.control.import.python, keyword.operator.logical.python#DD7596bold
constant.character.format.placeholder.other.python#ECDA90
meta.comprehension.python#B7C3F3
meta.lambda-function.python#9F7EBE
entity.name.type.interface#B8E1FFbold
entity.name.type.enum#BCB6FFbold
entity.other.attribute-name.html, entity.other.attribute-name.xml#94FBAB
support.type.property-name.css, support.type.property-name.scss#A9FFF7
support.constant.property-value.css#82ABA1
markup.heading#BCB6FFbold
markup.underline.link#B8E1FF
markup.fenced_code.block#A9FFF7
markup.list#94FBAB
markup.italic#82ABA1italic