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#232A34
  • activityBar.border#374250
  • activityBar.foreground#E1E7EE
  • activityBar.inactiveForeground#8D9AAA
  • button.background#7BA9F2
  • button.foreground#1D2128
  • button.hoverBackground#91B9F6
  • descriptionForeground#B5C0CD
  • dropdown.background#232A34
  • dropdown.border#374250
  • dropdown.foreground#E1E7EE
  • editor.background#1D2128
  • editor.foreground#E1E7EE
  • editor.inactiveSelectionBackground#2C354066
  • editor.lineHighlightBackground#262D37
  • editor.selectionBackground#2C3540
  • editor.selectionHighlightBackground#2C354099
  • editor.wordHighlightBackground#2C354088
  • editor.wordHighlightStrongBackground#48576A88
  • editorBracketMatch.background#2C354066
  • editorBracketMatch.border#7BA9F2
  • editorCursor.foreground#7BA9F2
  • editorError.foreground#DF7280
  • editorGutter.addedBackground#76C9BC
  • editorGutter.background#1D2128
  • editorGutter.deletedBackground#DF7280
  • editorGutter.modifiedBackground#7BA9F2
  • editorHint.foreground#76C9BC
  • editorIndentGuide.activeBackground1#48576A
  • editorIndentGuide.background1#2C3540
  • editorInfo.foreground#7BA9F2
  • editorLineNumber.activeForeground#B5C0CD
  • editorLineNumber.foreground#748394
  • editorWarning.foreground#5AB6C4
  • editorWhitespace.foreground#374250
  • errorForeground#DF7280
  • focusBorder#48576A
  • foreground#E1E7EE
  • icon.foreground#B5C0CD
  • input.background#232A34
  • input.border#374250
  • input.foreground#E1E7EE
  • input.placeholderForeground#8D9AAA
  • list.activeSelectionBackground#2C3540
  • list.hoverBackground#262D37
  • list.inactiveSelectionBackground#2C354066
  • panel.background#1D2128
  • panel.border#374250
  • panelTitle.activeForeground#E1E7EE
  • panelTitle.inactiveForeground#8D9AAA
  • sideBar.background#232A34
  • sideBar.border#374250
  • sideBar.foreground#B5C0CD
  • sideBarSectionHeader.background#232A34
  • sideBarSectionHeader.foreground#E1E7EE
  • statusBar.background#232A34
  • statusBar.debuggingBackground#7BA9F2
  • statusBar.debuggingForeground#1D2128
  • statusBar.foreground#B5C0CD
  • statusBar.noFolderBackground#232A34
  • statusBarItem.hoverBackground#2C3540
  • tab.activeBackground#1D2128
  • tab.activeBorderTop#7BA9F2
  • tab.activeForeground#E1E7EE
  • tab.border#374250
  • tab.inactiveBackground#232A34
  • tab.inactiveForeground#8D9AAA
  • terminal.ansiBlack#232A34
  • terminal.ansiBlue#7BA9F2
  • terminal.ansiBrightBlack#748394
  • terminal.ansiBrightBlue#7BA9F2
  • terminal.ansiBrightCyan#76C9BC
  • terminal.ansiBrightGreen#76C9BC
  • terminal.ansiBrightMagenta#B49ADF
  • terminal.ansiBrightRed#DF7280
  • terminal.ansiBrightWhite#E1E7EE
  • terminal.ansiBrightYellow#5AB6C4
  • terminal.ansiCyan#76C9BC
  • terminal.ansiGreen#93C582
  • terminal.ansiMagenta#B49ADF
  • terminal.ansiRed#DF7280
  • terminal.ansiWhite#B5C0CD
  • terminal.ansiYellow#5AB6C4
  • terminal.background#1D2128
  • terminal.foreground#E1E7EE
  • titleBar.activeBackground#232A34
  • titleBar.activeForeground#E1E7EE
  • titleBar.border#374250
  • titleBar.inactiveBackground#232A34
  • titleBar.inactiveForeground#8D9AAA

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#748394
keyword, storage, storage.modifier#7BA9F2
keyword.operator, punctuation, meta.brace, meta.delimiter#B5C0CD
string, string.quoted, string.template#93C582
constant.numeric, constant.language, constant.character, constant.other#B49ADF
invalid, invalid.illegal, invalid.deprecated#DF7280
entity.name.function, support.function, meta.function-call, variable.function#76C9BC
entity.name.type, entity.name.class, support.type, support.class, storage.type#5AB6C4
variable, meta.definition.variable.name, support.variable, variable.other.readwrite#E1E7EE
variable.parameter, meta.function.parameters#B5C0CD
variable.language.this, variable.language.self#5AB6C4
markup.heading, markup.heading entity.name#7BA9F2bold
markup.bold, markup.italic, markup.underline, markup.strikethrough#B5C0CD
markup.link, markup.underline.link, markup.inline.raw#76C9BC
markup.fenced_code#E1E7EE
markup.inserted, punctuation.definition.inserted#76C9BC
markup.deleted, punctuation.definition.deleted#DF7280
markup.changed#5AB6C4
meta.diff.header#B5C0CD
entity.name.tag, punctuation.definition.tag#7BA9F2
entity.other.attribute-name#B5C0CD
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.selector#5AB6C4
support.type.property-name.css, support.type.property-name, variable.css, variable.scss, variable.other.less#E1E7EE
variable.css, variable.argument.css#7BA9F2
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted.double, meta.object-literal.key, meta.object-literal.key entity.name.function#7BA9F2
meta.structure.dictionary.value.json string.quoted.double#93C582
constant.numeric.json, constant.language.json#B49ADF
punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json#B5C0CD
entity.name.tag.yaml#7BA9F2
string.quoted.single.yaml, string.quoted.double.yaml, string.unquoted.plain.out.yaml#93C582
constant.language.boolean.yaml, constant.language.null.yaml#B49ADF
constant.numeric.yaml#B49ADF
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#B49ADF
punctuation.definition.block.sequence.item.yaml#B5C0CD
punctuation.definition.document.begin.yaml, punctuation.definition.document.end.yaml#748394
markup.heading.atx.1.markdown, heading.1.markdown#7BA9F2bold
markup.heading.atx.2.markdown, heading.2.markdown#76C9BCbold
markup.heading.atx.3.markdown, markup.heading.atx.4.markdown, markup.heading.atx.5.markdown, markup.heading.atx.6.markdown#B5C0CDbold
markup.bold.markdown#E1E7EEbold
markup.italic.markdown#B5C0CDitalic
markup.inline.raw.string.markdown, code.markdown#76C9BC
markup.fenced_code.block.markdown#E1E7EE
fenced_code.block.language.markdown#5AB6C4
markup.quote.markdown#748394
punctuation.definition.list.begin.markdown#7BA9F2
meta.link.inline.markdown, string.other.link.title.markdown#76C9BC
markup.underline.link.markdown, markup.underline.link.image.markdown#7BA9F2
string.other.link.description.markdown#B5C0CD
meta.separator.markdown#374250
meta.type.annotation, meta.return-type#5AB6C4
support.type.primitive, support.type.builtin#5AB6C4
entity.name.type.module, entity.name.namespace, entity.name.type.interface#5AB6C4
variable.other.constant#B49ADF
variable.other.object.property, meta.property.object#7BA9F2
meta.decorator, punctuation.decorator#B49ADF
keyword.control.import, keyword.control.export, keyword.control.from#7BA9F2
storage.type.function.arrow#7BA9F2
punctuation.accessor, punctuation.separator.key-value#B5C0CD
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#7BA9F2
variable.language.special.self.python, variable.parameter.function.language.special.cls.python#5AB6C4
support.function.magic.python, entity.name.function.magic.python#76C9BC
entity.name.function.decorator.python, meta.function.decorator.python#B49ADF
keyword.operator.logical.python#7BA9F2
support.type.python#5AB6C4
variable.other.constant.python#B49ADF
punctuation.definition.interpolation.begin.python, punctuation.definition.interpolation.end.python#7BA9F2
entity.name.lifetime.rust, storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust#B49ADF
meta.macro.rust, support.macro.rust, entity.name.function.macro.rust#76C9BC
meta.attribute.rust, punctuation.definition.attribute.rust#B49ADF
entity.name.type.alias.rust, entity.name.type.trait.rust#5AB6C4
storage.modifier.unsafe.rust, keyword.other.unsafe.rust#DF7280
meta.path.rust#E1E7EE
support.function.builtin.go#76C9BC
entity.name.package.go#5AB6C4
entity.name.type.go#5AB6C4
keyword.channel.go, keyword.const.go, keyword.var.go, keyword.type.go#7BA9F2
constant.other.placeholder.go#B49ADF
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#5AB6C4
entity.name.type.attribute.cs, meta.attribute.cs#B49ADF
comment.block.documentation.cs, comment.xml.doc.cs#748394
meta.preprocessor.cs, keyword.preprocessor.cs#B49ADF
constant.language.null.cs#B49ADF
punctuation.definition.interpolation.begin.cs, punctuation.definition.interpolation.end.cs#7BA9F2
keyword.query.cs#7BA9F2
string.regexp, constant.regexp, keyword.control.anchor.regexp#B49ADF
BeaDark by ballombert - VS Code Theme