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#202020
  • activityBar.border#30353D
  • activityBar.foreground#E6EAF0
  • activityBar.inactiveForeground#8C95A3
  • button.background#7AA2F7
  • button.foreground#191919
  • button.hoverBackground#8AAFF8
  • descriptionForeground#B5BDC9
  • dropdown.background#202020
  • dropdown.border#30353D
  • dropdown.foreground#E6EAF0
  • editor.background#191919
  • editor.foreground#E6EAF0
  • editor.inactiveSelectionBackground#2B313A66
  • editor.lineHighlightBackground#24272E
  • editor.selectionBackground#2B313A
  • editor.selectionHighlightBackground#2B313A99
  • editor.wordHighlightBackground#2B313A88
  • editor.wordHighlightStrongBackground#3A425088
  • editorBracketMatch.background#2B313A66
  • editorBracketMatch.border#7AA2F7
  • editorCursor.foreground#7AA2F7
  • editorError.foreground#E06C75
  • editorGutter.addedBackground#7CD4B8
  • editorGutter.background#191919
  • editorGutter.deletedBackground#E06C75
  • editorGutter.modifiedBackground#7AA2F7
  • editorHint.foreground#7CD4B8
  • editorIndentGuide.activeBackground1#3A4250
  • editorIndentGuide.background1#2B313A
  • editorInfo.foreground#7AA2F7
  • editorLineNumber.activeForeground#B5BDC9
  • editorLineNumber.foreground#6F7A89
  • editorWarning.foreground#66C2CC
  • editorWhitespace.foreground#30353D
  • errorForeground#E06C75
  • focusBorder#3A4250
  • foreground#E6EAF0
  • icon.foreground#B5BDC9
  • input.background#202020
  • input.border#30353D
  • input.foreground#E6EAF0
  • input.placeholderForeground#8C95A3
  • list.activeSelectionBackground#2B313A
  • list.hoverBackground#24272E
  • list.inactiveSelectionBackground#2B313A66
  • panel.background#191919
  • panel.border#30353D
  • panelTitle.activeForeground#E6EAF0
  • panelTitle.inactiveForeground#8C95A3
  • sideBar.background#202020
  • sideBar.border#30353D
  • sideBar.foreground#B5BDC9
  • sideBarSectionHeader.background#202020
  • sideBarSectionHeader.foreground#E6EAF0
  • statusBar.background#202020
  • statusBar.debuggingBackground#7AA2F7
  • statusBar.debuggingForeground#191919
  • statusBar.foreground#B5BDC9
  • statusBar.noFolderBackground#202020
  • statusBarItem.hoverBackground#2B313A
  • tab.activeBackground#191919
  • tab.activeBorderTop#7AA2F7
  • tab.activeForeground#E6EAF0
  • tab.border#30353D
  • tab.inactiveBackground#202020
  • tab.inactiveForeground#8C95A3
  • terminal.ansiBlack#202020
  • terminal.ansiBlue#7AA2F7
  • terminal.ansiBrightBlack#6F7A89
  • terminal.ansiBrightBlue#7AA2F7
  • terminal.ansiBrightCyan#7CD4B8
  • terminal.ansiBrightGreen#7CD4B8
  • terminal.ansiBrightMagenta#C792EA
  • terminal.ansiBrightRed#E06C75
  • terminal.ansiBrightWhite#E6EAF0
  • terminal.ansiBrightYellow#66C2CC
  • terminal.ansiCyan#7CD4B8
  • terminal.ansiGreen#98C379
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#E06C75
  • terminal.ansiWhite#B5BDC9
  • terminal.ansiYellow#66C2CC
  • terminal.background#191919
  • terminal.foreground#E6EAF0
  • titleBar.activeBackground#202020
  • titleBar.activeForeground#E6EAF0
  • titleBar.border#30353D
  • titleBar.inactiveBackground#202020
  • titleBar.inactiveForeground#8C95A3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6F7A89
keyword, storage, storage.modifier#7AA2F7
keyword.operator, punctuation, meta.brace, meta.delimiter#B5BDC9
string, string.quoted, string.template#98C379
constant.numeric, constant.language, constant.character, constant.other#C792EA
invalid, invalid.illegal, invalid.deprecated#E06C75
entity.name.function, support.function, meta.function-call, variable.function#7CD4B8
entity.name.type, entity.name.class, support.type, support.class, storage.type#66C2CC
variable, meta.definition.variable.name, support.variable, variable.other.readwrite#E6EAF0
variable.parameter, meta.function.parameters#B5BDC9
variable.language.this, variable.language.self#66C2CC
markup.heading, markup.heading entity.name#7AA2F7bold
markup.bold, markup.italic, markup.underline, markup.strikethrough#B5BDC9
markup.link, markup.underline.link, markup.inline.raw#7CD4B8
markup.fenced_code#E6EAF0
markup.inserted, punctuation.definition.inserted#7CD4B8
markup.deleted, punctuation.definition.deleted#E06C75
markup.changed#66C2CC
meta.diff.header#B5BDC9
entity.name.tag, punctuation.definition.tag#7AA2F7
entity.other.attribute-name#B5BDC9
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.selector#66C2CC
support.type.property-name.css, support.type.property-name, variable.css, variable.scss, variable.other.less#E6EAF0
variable.css, variable.argument.css#7AA2F7
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted.double, meta.object-literal.key, meta.object-literal.key entity.name.function#7AA2F7
meta.structure.dictionary.value.json string.quoted.double#98C379
constant.numeric.json, constant.language.json#C792EA
punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json#B5BDC9
entity.name.tag.yaml#7AA2F7
string.quoted.single.yaml, string.quoted.double.yaml, string.unquoted.plain.out.yaml#98C379
constant.language.boolean.yaml, constant.language.null.yaml#C792EA
constant.numeric.yaml#C792EA
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#C792EA
punctuation.definition.block.sequence.item.yaml#B5BDC9
punctuation.definition.document.begin.yaml, punctuation.definition.document.end.yaml#6F7A89
markup.heading.atx.1.markdown, heading.1.markdown#7AA2F7bold
markup.heading.atx.2.markdown, heading.2.markdown#7CD4B8bold
markup.heading.atx.3.markdown, markup.heading.atx.4.markdown, markup.heading.atx.5.markdown, markup.heading.atx.6.markdown#B5BDC9bold
markup.bold.markdown#E6EAF0bold
markup.italic.markdown#B5BDC9italic
markup.inline.raw.string.markdown, code.markdown#7CD4B8
markup.fenced_code.block.markdown#E6EAF0
fenced_code.block.language.markdown#66C2CC
markup.quote.markdown#6F7A89
punctuation.definition.list.begin.markdown#7AA2F7
meta.link.inline.markdown, string.other.link.title.markdown#7CD4B8
markup.underline.link.markdown, markup.underline.link.image.markdown#7AA2F7
string.other.link.description.markdown#B5BDC9
meta.separator.markdown#30353D
meta.type.annotation, meta.return-type#66C2CC
support.type.primitive, support.type.builtin#66C2CC
entity.name.type.module, entity.name.namespace, entity.name.type.interface#66C2CC
variable.other.constant#C792EA
variable.other.object.property, meta.property.object#7AA2F7
meta.decorator, punctuation.decorator#C792EA
keyword.control.import, keyword.control.export, keyword.control.from#7AA2F7
storage.type.function.arrow#7AA2F7
punctuation.accessor, punctuation.separator.key-value#B5BDC9
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#7AA2F7
variable.language.special.self.python, variable.parameter.function.language.special.cls.python#66C2CC
support.function.magic.python, entity.name.function.magic.python#7CD4B8
entity.name.function.decorator.python, meta.function.decorator.python#C792EA
keyword.operator.logical.python#7AA2F7
support.type.python#66C2CC
variable.other.constant.python#C792EA
punctuation.definition.interpolation.begin.python, punctuation.definition.interpolation.end.python#7AA2F7
entity.name.lifetime.rust, storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust#C792EA
meta.macro.rust, support.macro.rust, entity.name.function.macro.rust#7CD4B8
meta.attribute.rust, punctuation.definition.attribute.rust#C792EA
entity.name.type.alias.rust, entity.name.type.trait.rust#66C2CC
storage.modifier.unsafe.rust, keyword.other.unsafe.rust#E06C75
meta.path.rust#E6EAF0
support.function.builtin.go#7CD4B8
entity.name.package.go#66C2CC
entity.name.type.go#66C2CC
keyword.channel.go, keyword.const.go, keyword.var.go, keyword.type.go#7AA2F7
constant.other.placeholder.go#C792EA
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#66C2CC
entity.name.type.attribute.cs, meta.attribute.cs#C792EA
comment.block.documentation.cs, comment.xml.doc.cs#6F7A89
meta.preprocessor.cs, keyword.preprocessor.cs#C792EA
constant.language.null.cs#C792EA
punctuation.definition.interpolation.begin.cs, punctuation.definition.interpolation.end.cs#7AA2F7
keyword.query.cs#7AA2F7
string.regexp, constant.regexp, keyword.control.anchor.regexp#C792EA