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#ECF2F9
  • activityBar.border#C7D5E4
  • activityBar.foreground#1E2936
  • activityBar.inactiveForeground#7B8DA2
  • button.background#2E7ED6
  • button.foreground#F5F8FC
  • button.hoverBackground#4A91DE
  • descriptionForeground#3B4A5B
  • dropdown.background#ECF2F9
  • dropdown.border#C7D5E4
  • dropdown.foreground#1E2936
  • editor.background#F5F8FC
  • editor.foreground#1E2936
  • editor.inactiveSelectionBackground#DCE8F566
  • editor.lineHighlightBackground#E9F0F8
  • editor.selectionBackground#DCE8F5
  • editor.selectionHighlightBackground#DCE8F599
  • editor.wordHighlightBackground#DCE8F588
  • editor.wordHighlightStrongBackground#9CB0C588
  • editorBracketMatch.background#DCE8F566
  • editorBracketMatch.border#2E7ED6
  • editorCursor.foreground#2E7ED6
  • editorError.foreground#C84F65
  • editorGutter.addedBackground#2F9F95
  • editorGutter.background#F5F8FC
  • editorGutter.deletedBackground#C84F65
  • editorGutter.modifiedBackground#2E7ED6
  • editorHint.foreground#2F9F95
  • editorIndentGuide.activeBackground1#9CB0C5
  • editorIndentGuide.background1#DCE8F5
  • editorInfo.foreground#2E7ED6
  • editorLineNumber.activeForeground#3B4A5B
  • editorLineNumber.foreground#647487
  • editorWarning.foreground#3D95A8
  • editorWhitespace.foreground#C7D5E4
  • errorForeground#C84F65
  • focusBorder#9CB0C5
  • foreground#1E2936
  • icon.foreground#3B4A5B
  • input.background#ECF2F9
  • input.border#C7D5E4
  • input.foreground#1E2936
  • input.placeholderForeground#7B8DA2
  • list.activeSelectionBackground#DCE8F5
  • list.hoverBackground#E9F0F8
  • list.inactiveSelectionBackground#DCE8F566
  • panel.background#F5F8FC
  • panel.border#C7D5E4
  • panelTitle.activeForeground#1E2936
  • panelTitle.inactiveForeground#7B8DA2
  • sideBar.background#ECF2F9
  • sideBar.border#C7D5E4
  • sideBar.foreground#3B4A5B
  • sideBarSectionHeader.background#ECF2F9
  • sideBarSectionHeader.foreground#1E2936
  • statusBar.background#ECF2F9
  • statusBar.debuggingBackground#2E7ED6
  • statusBar.debuggingForeground#F5F8FC
  • statusBar.foreground#3B4A5B
  • statusBar.noFolderBackground#ECF2F9
  • statusBarItem.hoverBackground#DCE8F5
  • tab.activeBackground#F5F8FC
  • tab.activeBorderTop#2E7ED6
  • tab.activeForeground#1E2936
  • tab.border#C7D5E4
  • tab.inactiveBackground#ECF2F9
  • tab.inactiveForeground#7B8DA2
  • terminal.ansiBlack#ECF2F9
  • terminal.ansiBlue#2E7ED6
  • terminal.ansiBrightBlack#647487
  • terminal.ansiBrightBlue#2E7ED6
  • terminal.ansiBrightCyan#2F9F95
  • terminal.ansiBrightGreen#2F9F95
  • terminal.ansiBrightMagenta#7B67BF
  • terminal.ansiBrightRed#C84F65
  • terminal.ansiBrightWhite#1E2936
  • terminal.ansiBrightYellow#3D95A8
  • terminal.ansiCyan#2F9F95
  • terminal.ansiGreen#3F9B62
  • terminal.ansiMagenta#7B67BF
  • terminal.ansiRed#C84F65
  • terminal.ansiWhite#3B4A5B
  • terminal.ansiYellow#3D95A8
  • terminal.background#F5F8FC
  • terminal.foreground#1E2936
  • titleBar.activeBackground#ECF2F9
  • titleBar.activeForeground#1E2936
  • titleBar.border#C7D5E4
  • titleBar.inactiveBackground#ECF2F9
  • titleBar.inactiveForeground#7B8DA2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#647487
keyword, storage, storage.modifier#2E7ED6
keyword.operator, punctuation, meta.brace, meta.delimiter#3B4A5B
string, string.quoted, string.template#3F9B62
constant.numeric, constant.language, constant.character, constant.other#7B67BF
invalid, invalid.illegal, invalid.deprecated#C84F65
entity.name.function, support.function, meta.function-call, variable.function#2F9F95
entity.name.type, entity.name.class, support.type, support.class, storage.type#3D95A8
variable, meta.definition.variable.name, support.variable, variable.other.readwrite#1E2936
variable.parameter, meta.function.parameters#3B4A5B
variable.language.this, variable.language.self#3D95A8
markup.heading, markup.heading entity.name#2E7ED6bold
markup.bold, markup.italic, markup.underline, markup.strikethrough#3B4A5B
markup.link, markup.underline.link, markup.inline.raw#2F9F95
markup.fenced_code#1E2936
markup.inserted, punctuation.definition.inserted#2F9F95
markup.deleted, punctuation.definition.deleted#C84F65
markup.changed#3D95A8
meta.diff.header#3B4A5B
entity.name.tag, punctuation.definition.tag#2E7ED6
entity.other.attribute-name#3B4A5B
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.selector#3D95A8
support.type.property-name.css, support.type.property-name, variable.css, variable.scss, variable.other.less#1E2936
variable.css, variable.argument.css#2E7ED6
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted.double, meta.object-literal.key, meta.object-literal.key entity.name.function#2E7ED6
meta.structure.dictionary.value.json string.quoted.double#3F9B62
constant.numeric.json, constant.language.json#7B67BF
punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json#3B4A5B
entity.name.tag.yaml#2E7ED6
string.quoted.single.yaml, string.quoted.double.yaml, string.unquoted.plain.out.yaml#3F9B62
constant.language.boolean.yaml, constant.language.null.yaml#7B67BF
constant.numeric.yaml#7B67BF
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#7B67BF
punctuation.definition.block.sequence.item.yaml#3B4A5B
punctuation.definition.document.begin.yaml, punctuation.definition.document.end.yaml#647487
markup.heading.atx.1.markdown, heading.1.markdown#2E7ED6bold
markup.heading.atx.2.markdown, heading.2.markdown#2F9F95bold
markup.heading.atx.3.markdown, markup.heading.atx.4.markdown, markup.heading.atx.5.markdown, markup.heading.atx.6.markdown#3B4A5Bbold
markup.bold.markdown#1E2936bold
markup.italic.markdown#3B4A5Bitalic
markup.inline.raw.string.markdown, code.markdown#2F9F95
markup.fenced_code.block.markdown#1E2936
fenced_code.block.language.markdown#3D95A8
markup.quote.markdown#647487
punctuation.definition.list.begin.markdown#2E7ED6
meta.link.inline.markdown, string.other.link.title.markdown#2F9F95
markup.underline.link.markdown, markup.underline.link.image.markdown#2E7ED6
string.other.link.description.markdown#3B4A5B
meta.separator.markdown#C7D5E4
meta.type.annotation, meta.return-type#3D95A8
support.type.primitive, support.type.builtin#3D95A8
entity.name.type.module, entity.name.namespace, entity.name.type.interface#3D95A8
variable.other.constant#7B67BF
variable.other.object.property, meta.property.object#2E7ED6
meta.decorator, punctuation.decorator#7B67BF
keyword.control.import, keyword.control.export, keyword.control.from#2E7ED6
storage.type.function.arrow#2E7ED6
punctuation.accessor, punctuation.separator.key-value#3B4A5B
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#2E7ED6
variable.language.special.self.python, variable.parameter.function.language.special.cls.python#3D95A8
support.function.magic.python, entity.name.function.magic.python#2F9F95
entity.name.function.decorator.python, meta.function.decorator.python#7B67BF
keyword.operator.logical.python#2E7ED6
support.type.python#3D95A8
variable.other.constant.python#7B67BF
punctuation.definition.interpolation.begin.python, punctuation.definition.interpolation.end.python#2E7ED6
entity.name.lifetime.rust, storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust#7B67BF
meta.macro.rust, support.macro.rust, entity.name.function.macro.rust#2F9F95
meta.attribute.rust, punctuation.definition.attribute.rust#7B67BF
entity.name.type.alias.rust, entity.name.type.trait.rust#3D95A8
storage.modifier.unsafe.rust, keyword.other.unsafe.rust#C84F65
meta.path.rust#1E2936
support.function.builtin.go#2F9F95
entity.name.package.go#3D95A8
entity.name.type.go#3D95A8
keyword.channel.go, keyword.const.go, keyword.var.go, keyword.type.go#2E7ED6
constant.other.placeholder.go#7B67BF
entity.name.type.class.cs, entity.name.type.struct.cs, entity.name.type.enum.cs, entity.name.type.interface.cs, entity.name.type.delegate.cs, source.cs storage.type#3D95A8
entity.name.type.attribute.cs, meta.attribute.cs#7B67BF
comment.block.documentation.cs, comment.xml.doc.cs#647487
meta.preprocessor.cs, keyword.preprocessor.cs#7B67BF
constant.language.null.cs#7B67BF
punctuation.definition.interpolation.begin.cs, punctuation.definition.interpolation.end.cs#2E7ED6
keyword.query.cs#2E7ED6
string.regexp, constant.regexp, keyword.control.anchor.regexp#7B67BF