Skip to main content
CodingTheme

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#000000
  • activityBar.border#1a1a1a
  • activityBar.foreground#666666
  • activityBarBadge.background#668899
  • activityBarBadge.foreground#000000
  • badge.background#668899
  • badge.foreground#000000
  • breadcrumbPicker.background#1a1a1a
  • button.background#668899
  • button.foreground#000000
  • diffEditor.border#2a2a2a
  • dropdown.background#000000
  • dropdown.listBackground#000000
  • editor.background#000000
  • editor.findMatchBackground#0a0a0a
  • editor.findMatchBorder#668899
  • editor.findMatchHighlightBackground#aa884455
  • editor.foreground#aaaaaa
  • editor.lineHighlightBackground#202020
  • editor.selectionBackground#2a2a2a
  • editorBracketHighlight.foreground1#aa77cc
  • editorBracketHighlight.foreground2#7391b0
  • editorBracketHighlight.foreground3#c9a97a
  • editorBracketHighlight.foreground4#cc77aa
  • editorBracketHighlight.foreground5#9988cc
  • editorBracketHighlight.foreground6#668899
  • editorBracketHighlight.unexpectedBracket.foreground#cc7777
  • editorBracketMatch.background#0a0a0a
  • editorBracketMatch.border#cc77aa
  • editorCursor.foreground#aa77cc
  • editorError.foreground#cc7777
  • editorGroup.dropBackground#1a1a1a
  • editorGroupHeader.tabsBackground#0a0a0a
  • editorHoverWidget.background#000000
  • editorLineNumber.activeForeground#666666
  • editorLineNumber.foreground#444444
  • editorSuggestWidget.background#1a1a1a
  • editorSuggestWidget.highlightForeground#668899
  • editorSuggestWidget.selectedBackground#151515
  • editorWidget.background#000000
  • editorWidget.border#aaaaaa22
  • editorWidget.resizeBorder#aaaaaa33
  • extensionButton.prominentBackground#668899
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#7391b0
  • focusBorder#aa77cc
  • gitDecoration.addedResourceForeground#88ddbb
  • gitDecoration.deletedResourceForeground#cc7777
  • gitDecoration.ignoredResourceForeground#666666
  • gitDecoration.modifiedResourceForeground#aa77cc
  • gitDecoration.untrackedResourceForeground#668899
  • input.background#000000
  • inputOption.activeBorder#668899
  • inputValidation.errorBackground#cc7777
  • inputValidation.errorBorder#cc7777
  • inputValidation.warningBorder#aaaa66
  • list.activeSelectionBackground#25252536
  • list.activeSelectionForeground#aaaaaa
  • list.dropBackground#15151566
  • list.errorForeground#cc7777
  • list.focusBackground#0a0a0a
  • list.focusForeground#aaaaaa
  • list.highlightForeground#cc77aa
  • list.hoverBackground#0a0a0a
  • list.hoverForeground#aaaaaa
  • list.inactiveFocusBackground#2a2a2a99
  • list.inactiveSelectionBackground#1f1f1f66
  • list.inactiveSelectionForeground#aaaaaa
  • list.warningForeground#aaaa66
  • notificationCenter.border#aa77cc
  • notificationCenterHeader.background#0a0a0a
  • notificationCenterHeader.foreground#aaaaaa
  • notificationLink.foreground#668899
  • notifications.background#1a1a1a
  • notifications.border#aa77cc
  • notifications.foreground#aaaaaa
  • notificationToast.border#aa77cc
  • panel.background#0a0a0a
  • peekView.border#1a1a1a
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#1a1a1a
  • peekViewResult.background#000000
  • peekViewResult.matchHighlightBackground#1a1a1a
  • peekViewResult.selectionBackground#2a2a2a
  • scrollbarSlider.activeBackground#55555580
  • scrollbarSlider.background#33333380
  • scrollbarSlider.hoverBackground#44444480
  • sideBar.background#000000
  • sideBar.border#1a1a1a
  • sideBar.foreground#aaaaaa
  • sideBarSectionHeader.background#0a0a0a
  • sideBarSectionHeader.border#1a1a1a
  • statusBar.background#000000
  • statusBar.debuggingBackground#cc7777
  • statusBar.debuggingForeground#cc77aa
  • statusBar.foreground#aaaaaa
  • statusBar.noFolderBackground#000000
  • statusBarItem.hoverBackground#252525
  • statusBarItem.prominentBackground#000000
  • statusBarItem.prominentHoverBackground#000000
  • tab.activeBackground#000000
  • tab.activeBorder#aa77cc
  • tab.border#00000000
  • tab.inactiveBackground#0a0a0a
  • terminal.ansiBlack#444444
  • terminal.ansiBlue#7766aa
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#9988cc
  • terminal.ansiBrightCyan#88ddbb
  • terminal.ansiBrightGreen#88ddbb
  • terminal.ansiBrightMagenta#cc77aa
  • terminal.ansiBrightRed#cc7777
  • terminal.ansiBrightWhite#aaaaaa
  • terminal.ansiBrightYellow#aaaa66
  • terminal.ansiCyan#88ddbb
  • terminal.ansiGreen#88ddbb
  • terminal.ansiMagenta#cc77aa
  • terminal.ansiRed#cc7777
  • terminal.ansiWhite#aaaaaa
  • terminal.ansiYellow#aaaa66
  • terminal.background#000000
  • terminal.foreground#aaaaaa
  • terminal.selectionBackground#313131
  • textLink.activeForeground#7391b0
  • textLink.foreground#668899
  • titleBar.activeBackground#000000
  • titleBar.inactiveBackground#000000
  • welcomePage.background#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string, constant.other.symbol, entity.other.inherited-class, punctuation.definition.string, string.other.link, markup.raw.inline, markup.inserted, markup.inserted.git_gutter, string.other.link.title.markdown, variable.parameter.url.scss, meta.attribute-selector.scss#6aaa91
keyword, keyword.operator.expression.typeof, variable.language.this, storage, support.function.construct.output.php, keyword.operator.new, markup.inline.raw.string.markdown, keyword.operator.expression.import.js#aa77cc
entity.other.attribute-name, entity.other.attribute-name.class.css, markup.heading punctuation.definition.heading, entity.name.section, entity.other.attribute-name.class.css, string.unquoted.alias.graphql, support.type.property-name.json, entity.name.tag.yaml, variable.other.property.js.jsx, meta.object-literal.key.js.jsx, variable.other.property.js#668899
meta.object-literal.key.js, meta.object-literal.key.ts, meta.object-literal.key.tsx, meta.object-literal.key.jsx, variable.other.object.property.js, variable.other.object.property.ts, variable.other.object.property.tsx#668899
variable.other.property.php, variable.other.member.php, entity.name.function.php, meta.function-call, meta.property-value, meta.selector, entity.name.function.ts, entity.name.function.js, entity.name.function.tsx, entity.name.function.go, entity.name.function.java, entity.name.function.python#cc77aa
entity.name.tag.js, entity.name.tag.tsx, entity.name.tag.jsx#9988cc
support.class.component, meta.tag.js support.class.component, meta.tag.tsx support.class.component, meta.tag.jsx support.class.component#6983b1
support.class, entity.name.type.class, meta.entity.new.name.expr, entity.name.tag.structure.any.html, meta.tag.structure.any.html, punctuation.definition.tag.html, meta.tag.sgml.doctype.html, keyword.other.special-method, entity.name.type, support.variable.dom.js, meta.tag.structure.any.html, markup.bold, punctuation.definition.bold, entity.name.type.ts, support.variable.dom.ts, entity.name.function.graphql#9988cc
meta.type.annotation.ts, meta.type.annotation.tsx, support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx, entity.name.type.ts, entity.name.type.tsx, meta.type.annotation.ts, variable.other.jsdoc, keyword.type.ts, keyword.type.tsx, support.type.ts, support.type.tsx, entity.name.type.interface.ts, entity.name.type.interface.tsx, entity.name.type.class.ts, entity.name.type.class.tsx, constant.language.null.ts, constant.language.null.tsx, keyword.constant.null.ts, keyword.constant.null.tsx, constant.language.boolean.ts, constant.language.boolean.tsx#8572be
meta.jsx.children, meta.jsx.children.tsx, meta.jsx.children.js, meta.embedded.expression.js#aaaaaa
variable.parameter.ts, variable.parameter.js, variable.parameter.tsx, variable.parameter.jsx, entity.tag.tagbraces.nunjucks, string.unquoted.filter-pipe.nunjucks, punctuation.colon.graphql, string.unquoted.graphql, variable.parameter#7391b0
comment, punctuation.definition.comment, punctuation.separator.key-value, punctuation.separator, meta.template.expression.js, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js, punctuation.definition.metadata.markdown#666666
punctuation.definition.variable, variable, variable.language.this.php, markup.deleted, markup.deleted.git_gutter, invalid.illegal, string.unquoted.tag-string.nunjucks, keyword.other.unit.percentage.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.rem.css, keyword.other.unit.s.css#cc7777
constant.numeric, keyword.other.unit, markup.quote, support.constant.color.w3c-standard-color-name.css#cc9966
support.function, constant, entity.other.attribute-name.id, markup.italic, punctuation.definition.italic, markup.changed, markup.changed.git_gutter, support.constant.property-value#aaaa66
keyword.operator, constant.character.escape, constant.character.escape.json, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css, keyword.operator, punctuation.accessor.js, punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc#c9a97a
punctuation.definition.block, meta.parameters, punctuation.definition.parameters, meta.brace.round, punctuation.definition.dictionary, constant.character.escape.backslash.regexp, punctuation.section, punctuation.terminator.statement, punctuation.definition.parameters, punctuation.definition.array, entity.name.function, meta.require, support.function.any-method, meta.tag.sgml.html, punctuation.section.embedded, variable.interpolation, meta.brace.square, punctuation.definition.array, punctuation.definition.binding-pattern.object.js, meta.selectionset.graphql#a7aaaf
entity.other.attribute-name.pseudo-class.css, constant.other.php, punctuation.definition.italic.markdown, string.regexp, entity.other.attribute-name.pseudo-element.css, meta.image.inline.markdown#414b37
entity.name.tag.reference, meta.embedded.block.php, meta.embedded.line.php, keyword.other.phpdoc.php, meta.separator, variable.object.property.ts, variable.object.property.tsx, variable.other.property.js, support.variable.property.dom.js, support.variable.property, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.instance.jsdoc, variable.graphql#7391b0
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.postcss, meta.property-name.css, support.type.property-name.media.css, support.type.property-name.media-query.scss#7391b0
entity.name.tag.css, entity.name.tag.scss, entity.name.tag.postcss, entity.name.tag.html.css, entity.name.tag.wildcard.css, entity.name.tag.wildcard.scss, entity.name.tag#9988cc
meta.property-list.css entity.name.tag, meta.property-list.scss entity.name.tag#7391b0
support.constant.media.css, support.constant.media.scss, support.constant.media-type.css, support.constant.media-type.scss#668899
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss, entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss, entity.other.attribute-name.class.postcss, entity.other.attribute-name.id.postcss#668899
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss#c9a97a
keyword.control.at-rule.css, keyword.control.at-rule.scss, keyword.control.at-rule.postcss, keyword.at-rule.css, keyword.at-rule.scss, punctuation.definition.keyword.css, punctuation.definition.keyword.scss#aa77cc
meta.property-value.css, meta.property-value.scss, support.constant.property-value.css, support.constant.property-value.scss, support.constant.font-name.css, support.constant.font-name.scss#cc9966
constant.other.color.rgb-value.hex.css, constant.other.color.rgb-value.hex.scss, constant.other.color.css, support.constant.color.w3c-standard-color-name.css, support.constant.color.w3c-standard-color-name.scss#6aaa91
support.function.misc.css, support.function.misc.scss, support.function.calc.css, support.function.calc.scss, support.function.gradient.css, support.function.gradient.scss, entity.name.function.scss, entity.name.function.css#cc77aa
variable.css, variable.other.custom-property.css, support.type.custom-property.css, support.type.custom-property.scss#cc7777
variable.scss, variable.other.scss, variable.parameter.scss, punctuation.definition.variable.scss#cc7777
entity.name.function.scss, support.function.scss#cc77aa
punctuation.definition.interpolation.begin.bracket.curly.scss, punctuation.definition.interpolation.end.bracket.curly.scss#c9a97a
keyword.other.important.css, keyword.other.important.scss#aa77cc
punctuation.section.property-list.css, punctuation.section.property-list.scss, punctuation.separator.key-value.css, punctuation.separator.key-value.scss, punctuation.terminator.rule.css, punctuation.terminator.rule.scss#a7aaaf
comment.block.css, comment.block.scss, comment.line.scss, comment.block.postcss#666666
meta.function-call.ts.tagged-template, entity.name.function.tagged-template, support.function.sql#cc7777
keyword.sql, keyword.other.create.sql, keyword.other.select.sql, keyword.other.insert.sql, keyword.other.update.sql, keyword.other.delete.sql, keyword.other.drop.sql, keyword.other.alter.sql, keyword.other.join.sql, keyword.other.dml.sql#aa77cc
storage.type.sql, keyword.type.sql, support.type.sql#9988cc
source.sql variable, source.sql entity, source.sql meta.identifier, source.sql support.other#cc7777
string.sql, string.quoted.single.sql, string.quoted.double.sql#6aaa91
constant.numeric.sql#cc9966
keyword.operator.sql, keyword.operator.comparison.sql#c9a97a
support.function.sql, entity.name.function.sql#cc77aa
comment.line.double-dash.sql, comment.line.sql, comment.block.sql#666666
source.sql#cc7777
markup.heading.markdown, punctuation.definition.heading.markdown#9988cc
markup.bold.markdown, punctuation.definition.bold.markdown#cc77aa
markup.italic.markdown, punctuation.definition.italic.markdown#7391b0
markup.underline.link.markdown, string.other.link.markdown#668899
string.other.link.description.markdown, markup.underline.link.image.markdown#aaaaaa
markup.inline.raw.string.markdown#cc9966
markup.list.unnumbered.markdown, markup.list.numbered.markdown, punctuation.definition.list.markdown#666666
markup.quote.markdown, punctuation.definition.quote.markdown#7391b0
meta.separator.markdown#414b37
keyword.prisma, storage.type.prisma#aa77cc
keyword.block.prisma#aa77cc
support.type.primitive.prisma#9988cc
storage.type.prisma, support.type.prisma#9988cc
entity.name.type.prisma, entity.name.class.prisma#cc77aa
variable.other.property.prisma, variable.other.member.prisma#7391b0
entity.name.function.attribute.prisma#668899
entity.other.attribute-name.prisma, support.function.attribute.prisma, punctuation.definition.annotation.prisma#668899
meta.attribute.prisma#668899
string.prisma, string.quoted.double.prisma, string.quoted.single.prisma#6aaa91
comment.prisma, comment.line.prisma, comment.block.prisma, punctuation.definition.comment.prisma#666666
constant.numeric.prisma#cc9966
support.type.prisma.relation#cc77aa
keyword.operator.prisma, punctuation.separator.prisma#c9a97a
punctuation.definition.block.prisma, punctuation.section.prisma#a7aaaf
support.function.prisma#cc77aa
entity.name.enum.prisma#cc77aa
constant.enum.prisma#aaaa66
keyword.modifier.prisma, storage.modifier.prisma#aa77cc
keyword.control.python, keyword.control.flow.python, keyword.control.import.python, keyword.operator.logical.python, keyword.operator.wordlike.python, keyword.statement.python#aa77cc
storage.type.function.python, storage.type.class.python, storage.type.python#aa77cc
entity.name.function.python, meta.function.python entity.name.function.python#cc77aa
support.function.magic.python, entity.name.function.magic.python#cc77aa
entity.name.type.class.python, entity.name.class.python, entity.name.type.python#9988cc
entity.other.inherited-class.python#9988cc
variable.parameter.python, meta.function.parameters.python variable.parameter.python#7391b0
variable.language.special.self.python, variable.language.special.cls.python, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#aa77cc
entity.name.function.decorator.python, meta.function.decorator.python entity.name.function.python, support.type.python#668899
punctuation.definition.decorator.python#668899
support.function.builtin.python, support.function.python#cc77aa
support.type.exception.python, support.class.exception.python, support.class.builtin.python#9988cc
meta.type.annotation.python, support.type.typing.python, meta.function.annotation.python, support.class.typing.python#8572be
constant.language.python#8572be
meta.attribute.python, meta.member.access.python variable.other.python, variable.other.property.python#7391b0
meta.function-call.python meta.attribute.python, meta.function-call.generic.python, meta.function-call.python variable.other.python#cc77aa
meta.fstring.python source.python, meta.interpolation.python#7391b0
punctuation.definition.interpolation.begin.python, punctuation.definition.interpolation.end.python#c9a97a
comment.line.number-sign.python, punctuation.definition.comment.python#666666
keyword.operator.arithmetic.python, keyword.operator.comparison.python, keyword.operator.assignment.python, keyword.operator.bitwise.python, keyword.operator.python#c9a97a
punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, punctuation.definition.dict.begin.python, punctuation.definition.dict.end.python, punctuation.definition.parameters.begin.python, punctuation.definition.parameters.end.python, punctuation.section.function.begin.python, punctuation.section.class.begin.python#a7aaaf
keyword.operator.unpacking.arguments.python#c9a97a
variable.other.python, variable.other.readwrite.python, variable.other.global.python, variable.other.nonlocal.python#cc7777
meta.item-access.arguments.python, meta.indexed-name.python, meta.item-access.python#cc7777
source.python#cc7777
keyword.control.go, keyword.control.flow.go, keyword.operator.go, keyword.other.go, keyword.package.go, keyword.import.go, keyword.function.go, keyword.type.go, keyword.var.go, keyword.const.go, keyword.map.go, keyword.chan.go, keyword.interface.go, keyword.struct.go#aa77cc
storage.type.go, storage.type.function.go, storage.type.keyword.go#aa77cc
entity.name.function.go#cc77aa
entity.name.function.support.go, support.function.go, support.function.builtin.go#cc77aa
meta.function-call.go#cc77aa
entity.name.type.go, storage.type.numeric.go, storage.type.string.go, storage.type.boolean.go, storage.type.byte.go, storage.type.rune.go, storage.type.error.go, storage.type.uintptr.go#9988cc
entity.name.type.struct.go, entity.name.type.interface.go#9988cc
entity.name.package.go, entity.name.import.go#668899
variable.parameter.go, variable.other.go#7391b0
variable.receiver.go, entity.name.variable.receiver.go#aa77cc
constant.language.go#8572be
keyword.operator.arithmetic.go, keyword.operator.comparison.go, keyword.operator.assignment.go, keyword.operator.logical.go, keyword.operator.bitwise.go, keyword.operator.address.go, keyword.operator.channel.go#c9a97a
comment.line.double-slash.go, comment.block.go, punctuation.definition.comment.go#666666
entity.name.field.go, variable.other.field.go, variable.object.property.go#7391b0
meta.type.assertion.go, meta.type.conversion.go#8572be
source.go#cc7777
keyword.control.java, keyword.control.flow.java, keyword.other.java, keyword.operator.instanceof.java, keyword.operator.new.java#aa77cc
storage.type.java, storage.modifier.java, storage.type.function.java, storage.type.primitive.java, storage.type.generic.java, storage.type.annotation.java#aa77cc
entity.name.type.class.java, entity.name.type.interface.java, entity.name.type.enum.java, entity.name.type.java#9988cc
entity.name.type.class.java storage.type.java, support.class.java, storage.type.generic.java entity.name.type.class.java#9988cc
entity.name.function.java, meta.method.java entity.name.function.java#cc77aa
meta.function-call.java, meta.method-call.java#cc77aa
variable.parameter.java#7391b0
variable.language.this.java, variable.language.super.java#aa77cc
constant.language.java#8572be
meta.declaration.annotation.java, storage.type.annotation.java, punctuation.definition.annotation.java#668899
entity.name.package.java, storage.modifier.import.java, storage.modifier.package.java#668899
keyword.operator.java, keyword.operator.arithmetic.java, keyword.operator.comparison.java, keyword.operator.assignment.java, keyword.operator.logical.java, keyword.operator.bitwise.java, keyword.operator.ternary.java#c9a97a
comment.line.double-slash.java, comment.block.java, comment.block.documentation.java, punctuation.definition.comment.java#666666
punctuation.bracket.angle.java, storage.type.generic.java#8572be
variable.other.java, variable.other.field.java, variable.other.object.java, variable.other.definition.java#cc7777
source.java#cc7777
keyword.control.cs, keyword.control.flow.cs, keyword.other.cs, keyword.operator.cs, keyword.operator.new.cs, keyword.operator.is.cs, keyword.operator.as.cs, keyword.operator.await.cs#aa77cc
storage.type.cs, storage.modifier.cs, storage.type.modifier.cs#aa77cc
entity.name.type.class.cs, entity.name.type.struct.cs, entity.name.type.interface.cs, entity.name.type.enum.cs, entity.name.type.delegate.cs, entity.name.type.cs#9988cc
entity.name.function.cs, meta.method.cs entity.name.function.cs#cc77aa
meta.function-call.cs, meta.method-call.cs#cc77aa
variable.parameter.cs#7391b0
keyword.other.this.cs, keyword.other.base.cs, keyword.other.value.cs, variable.language.this.cs#aa77cc
constant.language.cs, constant.language.boolean.cs, constant.language.null.cs#8572be
entity.name.type.class.cs meta.attribute.cs, meta.attribute.cs entity.name.type.attribute.cs, entity.name.type.attribute.cs, storage.type.cs meta.attribute.cs#668899
punctuation.squarebracket.open.cs, punctuation.squarebracket.close.cs, meta.attribute.cs#668899
entity.name.type.namespace.cs, keyword.other.using.cs, keyword.other.namespace.cs#668899
punctuation.definition.typeparameters.begin.cs, punctuation.definition.typeparameters.end.cs#8572be
entity.name.type.type-parameter.cs#8572be
keyword.type.cs, storage.type.cs#8572be
variable.other.object.property.cs, variable.other.field.cs, variable.other.cs#7391b0
keyword.query.cs, keyword.other.linq.cs#aa77cc
meta.preprocessor.cs, keyword.preprocessor.cs, keyword.control.directive.cs, punctuation.separator.hash.cs#aaaa66
keyword.operator.arithmetic.cs, keyword.operator.comparison.cs, keyword.operator.assignment.cs, keyword.operator.logical.cs, keyword.operator.bitwise.cs, keyword.operator.null-conditional.cs, keyword.operator.null-coalescing.cs, keyword.operator.arrow.cs, keyword.operator.lambda.cs#c9a97a
punctuation.definition.interpolation.begin.cs, punctuation.definition.interpolation.end.cs#c9a97a
comment.line.double-slash.cs, comment.block.cs, comment.block.documentation.cs, punctuation.definition.comment.cs, keyword.other.documentation.cs#666666
comment.block.documentation.cs entity.name.tag, comment.block.documentation.cs punctuation.definition.tag#444444
source.cs#cc7777

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Spaceland Dark by LukeDavies12 - VS Code Theme