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#101315
  • activityBar.foreground#E0E0E0
  • activityBarBadge.foreground#E0E0E0
  • badge.foreground#E0E0E0
  • button.background#9fced11f
  • button.foreground#E0E0E0
  • dropdown.background#101315
  • dropdown.border#101315
  • dropdown.foreground#E0E0E0
  • editor.background#191d21
  • editor.foreground#E0E0E0
  • editor.hoverHighlightBackground#F4457D22
  • editor.lineHighlightBackground#191d2122
  • editor.selectionBackground#53A1FA55
  • editor.wordHighlightBackground#53A1FA22
  • editor.wordHighlightStrongBackground#53A1FA22
  • editorBracketMatch.background#F4457D44
  • editorBracketMatch.border#53A1FA
  • editorCursor.foreground#E0E0E0
  • editorGroupHeader.tabsBackground#161616
  • editorGutter.addedBackground#5BD1B9
  • editorGutter.background#191d21
  • editorGutter.deletedBackground#E61F44
  • editorGutter.modifiedBackground#F9C35A
  • editorIndentGuide.background1#191d2188
  • editorInlayHint.background#34393E
  • editorInlayHint.foreground#E0E0E0
  • editorLineNumber.foreground#45505b
  • editorLink.activeForeground#F4457D
  • editorOverviewRuler.addedForeground#5BD1B9
  • editorOverviewRuler.deletedForeground#E61F44
  • editorOverviewRuler.errorForeground#E61F44
  • editorOverviewRuler.findMatchForeground#53A1FA55
  • editorOverviewRuler.infoForeground#B267E6
  • editorOverviewRuler.modifiedForeground#F9C35A
  • editorOverviewRuler.warningForeground#F9C35A
  • editorRuler.foreground#34393E
  • editorSuggestWidget.foreground#E0E0E0
  • editorSuggestWidget.highlightForeground#F4457D
  • editorSuggestWidget.selectedBackground#45505b
  • editorWhitespace.foreground#34393E
  • editorWidget.background#34393E
  • editorWidget.border#45505b
  • extensionButton.prominentBackground#F4457D
  • extensionButton.prominentForeground#E0E0E0
  • extensionButton.prominentHoverBackground#EE808B
  • foreground#E0E0E0
  • input.background#101315
  • input.border#45505b
  • input.foreground#E0E0E0
  • input.placeholderForeground#45505b
  • inputOption.activeBorder#53A1FA
  • list.activeSelectionForeground#E0E0E0
  • list.focusBackground#3A434D
  • list.hoverBackground#1d2226
  • list.inactiveSelectionBackground#191d21
  • panel.background#191d21
  • panel.border#45505b
  • panelTitle.activeBorder#F4457D
  • panelTitle.inactiveForeground#45505b
  • peekView.border#F4457D
  • peekViewEditor.background#101315
  • peekViewEditor.matchHighlightBackground#53A1FA55
  • peekViewEditorGutter.background#101315
  • peekViewResult.background#34393E
  • peekViewResult.fileForeground#E0E0E0
  • peekViewResult.lineForeground#E6E6E6
  • peekViewResult.matchHighlightBackground#53A1FA55
  • peekViewResult.selectionBackground#1d2226
  • peekViewResult.selectionForeground#E0E0E0
  • peekViewTitle.background#101315
  • peekViewTitleDescription.foreground#E0E0E0
  • peekViewTitleLabel.foreground#E6E6E6
  • progressBar.background#53A1FA
  • scrollbar.shadow#101315
  • sideBar.background#14181b
  • sideBar.foreground#E0E0E0
  • sideBarSectionHeader.background#101315
  • sideBarSectionHeader.foreground#E0E0E0
  • statusBar.background#101315
  • statusBar.foreground#E0E0E0
  • statusBar.noFolderBackground#101315
  • tab.activeModifiedBorder#F9C35A
  • tab.inactiveBackground#3A434D44
  • tab.inactiveForeground#E0E0E088
  • tab.inactiveModifiedBorder#53A1FA
  • tab.unfocusedActiveModifiedBorder#F9C35A88
  • tab.unfocusedHoverBackground#4b4b4b
  • tab.unfocusedInactiveModifiedBorder#53A1FA88
  • titleBar.activeBackground#101315

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.numeric,entity.other.keyframe-offset.percentage.css,keyword.other.unit,support.constant.dom,support.constant.property.math,support.constant.ext,support.constant.core,entity.name.function.preprocessor.c,constant.other.js,meta.at-rule.keyframes.scss entity.other.attribute-name.scss,constant,variable.other.enummember,constant.other.enum,entity.name.variable.enum-member,constant.language.infinity,text.log constant.language,meta.attribute.id.html entity.other.attribute-name.html,entity.other.attribute-name.id,entity.name.variable.preprocessor.symbol,variable.other.constant.object,#ffc16a
constant.other.character-class.regexp,constant.other.character-class.range.regexp,constant.other.character-class.set.regexp,support.constant,support.constant.math,support.constant.json,entity.other.attribute-name.id.css punctuation.definition.entity.css,#ffa600
constant.numeric.decimal.cpp#fa6450
keyword.operator.arithmetic.cpp#66c6fa
keyword.operator.logical.cpp, keyword.operator.comparison.cpp#e15dff
source.json meta.structure.dictionary.value.json string.quoted.double.json#98C379
variable.other.property.tsx#ce5d66
meta.body.function.definition#d6d6d6
constant.language.boolean#ae76fcbold
storage.type.built-in.primitive.cpp#f63780
entity.name.type.module,entity.name.package,variable.other.property,variable.other.object.property,variable.other.constant.property,entity.name.type.option,entity.name.label,variable.other.object.property.cs,entity.name.variable.tuple-element.cs,meta.object-literal.key,meta.object-literal.key string.quoted,variable.object.property,support.type.map.key,meta.at-rule.each.scss,meta.attribute.python,support.variable.dom,support.variable.property,support.variable.property.dom,storage.modifier.import,constant.other.php,entity.name.type.namespace,variable.other.member.c,meta.using-namespace-declaration.cpp entity.name.type.cpp,meta.class-struct-block.cpp meta.namespace-block.cpp entity.name.type.cpp,variable.other.source.dart,entity.name.namespace,entity.name.module,entity.name.type.result.rust,entity.name.scope-resolution.namespace,support.class.console,meta.use.rust,keyword.other.preprocessor.extension,entity.other.attribute-name.pseudo-element.css,entity.name.section.markdown,markup.heading,source.json meta.structure.dictionary.json > string.quoted.json,support.type.property-name.json,support.function.section.latex,support.function.general.tex,meta.object-literal.key punctuation.definition.string,#52dad3
entity.name.tag,entity.other.attribute-name.parent-selector.css punctuation.definition.entity.css,punctuation.definition.heading.markdown,support.function.general.tex punctuation.definition.function.tex,support.function.section.latex punctuation.definition.function.latex,punctuation.support.type.property-name.begin.json.comments,punctuation.support.type.property-name.end.json.comments,support.class.component,keyword.operator.optional,punctuation.section.embedded.begin.php,punctuation.section.embedded.end.php,punctuation.section.embedded.end.php source.php,string.regexp keyword.other,#E06C75
variable.parameter,token.variable.parameter,variable.other.jsdoc,variable.language.arguments,function.parameter,entity.name.variable.parameter,meta.function.c,punctuation.vararg-ellipses,variable.other.block.ruby,meta.arguments,entity.name.type.template,meta.type.parameters entity.name.type,meta.parameters,meta.function.parameter variable.other,variable.other.less,variable.other.sass,variable.scss,source.sass variable.other,variable.argument.css,variable.parameter.function.latex,variable.parameter.definition.label.latex,markup.bold.markdown,#E4BF7F
keyword.operator.negetion.regexp,keyword.control.anchor.regexp,punctuation.definition.group.capture.regexp,keyword.operator.quantifier.regexp,punctuation.definition.bold.markdown,#E4BF7F
comment#888888
variable.parameter.url,string,markup.inline.raw.string,text.html.vue-html meta.object-literal.key,meta.preprocessor.cs,text.html.vue-html meta.object-literal.key string.quoted,entity.other.attribute-name.class.css,selector.sass,entity.other.attribute-name.parent-selector.css,meta.at-rule.extend.scss,string.other.math.tex,support.constant.font-name,markup.inline.raw.markdown,markup.underline.link.markdown,markup.underline.link.image.markdown,#98C379
punctuation.definition.metadata.markdown,string.regexp,source.jsonmeta.structure.dictionary.json>value.json>string.quoted.json,source.jsonmeta.structure.array.json>value.json>string.quoted.json,source.jsonmeta.structure.dictionary.json>value.json>string.quoted.json>punctuation,source.jsonmeta.structure.array.json>value.json>string.quoted.json>punctuation,string.quoted source,punctuation.definition.entity.css,meta.attribute-selector.scss,string invalid.illegal,string.other.math.tex,punctuation.definition.string.begin.tex,punctuation.definition.string.end.tex,punctuation.definition.string,text.html.vue-html meta.object-literal.key punctuation.definition.string,string punctuation.attribute-shorthand.bind.html,string punctuation.attribute-shorthand.event.html,#98C379
comment.block.documentation, comment.block.documentation variable.other#888888
comment.block.documentation entity.name.type#1362bc
comment.block.documentation storage.type#E0E0E0
constant.numeric#F9C35A
constant.language#43AAF9
constant.character, constant.other#53A1FA
variable.language.this#43AAF9
keyword, keyword.operator.new, storage.modifier.async, keyword.operator.less#F4457Dbold
keyword.operator#EFEFEF
punctuation#666666
punctuation.definition.comment#888888
punctuation.definition.tag#b0b0b0
string.quoted punctuation.definition.string#666666
string.regexp, string.regexp punctuation.definition.string#5BD1B9
storage#43AAF9
storage.type#F4457Dbold
entity.name.class#53A1FA
entity.name.function, meta.require, support.function.any-method, variable.function, support.function.builtin.python, meta.function-call.generic.python#43AAF9bold
keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.relational, keyword.operator.increment, keyword.operator.decrement, keyword.operator.logical, keyword.operator.comparison, keyword.operator.ternary, keyword.operator.expression, storage.type.function.arrow.tsx#5d5c5cbold
variable.parameter#80ff9d
source.css.scss, source.css#5BD1B9
entity.other.attribute-name,invalid.deprecated.entity.other.attribute-name,entity.name.tag.custom.css,entity.name.tag.custom.scss,storage.type.java,entity.other.attribute-name.pseudo-class.css,support.type.property-name.media.css,support.constant.media.css,source.css.less entity.name.tag.custom.css,keyword.operator.gradient.css,entity.name.type,keyword.operator.expression,entity.other.inherited-class,entity.name.type.class,entity.name.scope-resolution,support.class,entity.name.type.interface,#56B7C3
support.function, support.variable.dom#F9C35A
support.constant#43AAF9
support.type#E0E0E0
support.class#5BD1B9
invalid#E34234
invalid.deprecated#E34234
invalid.illegal#E0E0E0
meta.diff, meta.diff.header#718493
markup.deleted#E61F44
markup.inserted#A6E22E
markup.changed#F9C35A
constant.numeric.line-number.find-in-files - match
entity.name.filename.find-in-files#E6DB74
keyword.other#9CAAB4
meta.property-value, support.constant.property-value, constant.other.color#9FBDE0
meta.property-value punctuation.separator.key-value#E0E0E0
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#F4457D
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#F4457D
source.cpp variable.other#80ff9d
meta.object-literal.key#F4457D
variable.parameter.function.coffee#9FBDE0
markup.deleted.git_gutter#E61F44
markup.inserted.git_gutter
markup.changed.git_gutter#F9C35A
meta.template.expression#9FBDE0
variable.other.constant.property, keyword.operator.ternary, keyword.operator.expression.typeof#B267E6
entity.name.type, support.type.python#F9C35A
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
entity.name.tag.tsx, entity.name.tag.js.jsx, entity.name.tag.html, entity.name.tag.xml, entity.name.tag.script.html.vue, entity.name.tag.template.html.vue, entity.name.tag.style.html.vue, entity.name.tag.style.html.vue, entity.name.tag.script.html, entity.name.tag.template.html, entity.name.tag.style.html, entity.name.tag.block.any.html#E06C75
support.class.component.tsx, support.class.component.jsx#ce5d66
support.type.primitive.tsx, support.type.primitive.ts#43AAF9
storage.modifier.tsx#F4457D
entity.other.inherited-class.tsx#F9C35A
meta.object.member variable.other.readwrite.tsx#E0E0E0
meta.structure.dictionary.json string.quoted.double.json#E0E0E0
meta.structure.dictionary.value.json string.quoted.double.json#5BD1B9
meta.structure.dictionary.json, punctuation.definition.string#5BD1B9
meta.structure.dictionary.json, support.type.property-name.json#E06C75
punctuation.definition.list.begin.markdown, punctuation.definition.list.begin.mdx, punctuation.definition.list.end.markdown, punctuation.definition.list.end.mdx, punctuation.definition.quote.begin.markdown, punctuation.definition.quote.begin.mdx, punctuation.definition.quote.end.markdown, punctuation.definition.quote.end.mdx, meta.separator.markdown, meta.separator.mdx, markup.inline.raw.string.markdown, markup.raw.code.text.mdx#F9C35A
entity.name.section.markdown, entity.name.section.mdx#53A1FA
punctuation.definition.heading.markdown, punctuation.definition.heading.mdx#F4457D
markup.raw.inline.markdown, markup.raw.inline.mdx#9FBDE0
punctuation.definition.bold.markdown, punctuation.definition.bold.mdx, punctuation.definition.italic.markdown, punctuation.definition.italic.mdx, punctuation.definition.entity#F4457D
punctuation.definition.string.begin.markdown, punctuation.definition.string.begin.mdx, punctuation.definition.string.end.markdown, punctuation.definition.string.end.mdx#F4457D
punctuation.definition.metadata.markdown, punctuation.definition.metadata.mdx#F4457D
markup.underline.link.markdown, markup.underline.link.image.markdown, string.other.link.destination.mdx, meta.image.inline.markdown, meta.image.inline.mdx#F4457D
markup.bold.markdown, string.other.strong.asterisk.mdx, markup.italic.markdown, markup.italic.mdx#F4457D
markup.italic.markdown, markup.italic.mdx
markup.bold.markdown, markup.bold.mdx
markup.raw.block.markdown, markup.raw.block.mdx#9FBDE0
keyword.other.rust#B267E6
keyword.other.fn.rust#F4457D
punctuation.section.embedded.begin.php, keyword.other.class.php#F4457D
support.class.php#E0E0E0
meta.use.php#5BD1B9
keyword.other.definition.ini#53A1FA
support.type.primitive.prisma#F9C35A
support.constant.constant.prisma#F4457D
variable.language.relations.prisma#5BD1B9
entity.name.tag.yaml#F4457D
storage.type.java#F9C35Abold
keyword.other.package.java, keyword.other.import.java#F4457Dbold
storage.modifier.package.java#F9C35A
storage.modifier.import.java#E0E0E0
punctuation.separator.java#EFEFEF
meta.tag.xml#43AAF9
keyword.other.declaration-specifier.swift, keyword.other.declaration-specifier.accessibility.swift#F4457Dbold
support.type.swift, meta.function-result.swift, variable.language.swift, keyword.operator.custom.infix.swift#53A1FA
variable.parameter.function.swift#E0E0E0
entity.name.function.swift#53A1FAbold
variable.parameter.function.swift, meta.parameter-clause.swift#E0E0E0
support.function.go#43AAF9bold
keyword.operator.address.go, keyword.operator.pointer.go#53A1FA
keyword.channel.go#B267E6
storage.type.numeric.go, storage.type.string.go, storage.type.error.go, storage.type.boolean.go, storage.type.byte.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.complex.go#F9C35A