Skip to main content
Coding Theme

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.activeBorder#c6c6c600
  • activityBar.background#2D2E2F
  • activityBar.inactiveForeground#C9CED690
  • activityBarBadge.background#2480DB
  • badge.background#FAFAFA20
  • breadcrumb.background#2D2E2F
  • breadcrumb.foreground#C9CED690
  • button.background#2367B2
  • commandCenter.background#C9CED610
  • commandCenter.border#C9CED630
  • commandCenter.foreground#C9CED6
  • debugToolBar.background#343536
  • diffEditor.border#444444
  • diffEditor.insertedTextBackground#9FCF9F44
  • diffEditor.removedTextBackground#F16D8544
  • dropdown.background#3A3B3C
  • dropdown.border#FAFAFA00
  • dropdown.foreground#C9CED6
  • dropdown.listBackground#3A3B3C
  • editor.background#252627
  • editor.findMatchBackground#252627
  • editor.findMatchBorder#E0BB70
  • editor.foreground#C9CED6
  • editor.lineHighlightBackground#FAFAFA09
  • editorBracketMatch.background#00000090
  • editorBracketMatch.border#FAFAFA90
  • editorCursor.foreground#E0D399
  • editorError.foreground#F16D85
  • editorGroupHeader.tabsBackground#252627
  • editorIndentGuide.activeBackground#666666
  • editorLineNumber.activeForeground#b2b2b2
  • editorLineNumber.foreground#606060
  • editorSuggestWidget.highlightForeground#E0BB70
  • editorWidget.background#343536
  • editorWidget.border#FAFAFA20
  • focusBorder#2480DB
  • foreground#C9CED6
  • input.background#FAFAFA10
  • inputValidation.errorBackground#7F1D1D
  • inputValidation.errorBorder#DC2626
  • list.activeSelectionBackground#00000000
  • list.dropBackground#9970C290
  • list.hoverBackground#FAFAFA08
  • list.inactiveSelectionBackground#FAFAFA10
  • notificationCenterHeader.background#2D2E2F
  • notifications.background#2D2E2F
  • panel.background#232425
  • panel.border#FAFAFA20
  • panelTitle.activeBorder#ff000000
  • panelTitle.inactiveForeground#C9CED690
  • peekView.border#333333
  • peekViewEditor.background#252627
  • peekViewEditor.matchHighlightBackground#2d2d2d
  • peekViewResult.background#252627
  • peekViewResult.matchHighlightBackground#2d2d2d
  • peekViewResult.selectionBackground#444444
  • scrollbar.shadow#252627
  • scrollbarSlider.activeBackground#88888880
  • scrollbarSlider.background#44444480
  • scrollbarSlider.hoverBackground#66666680
  • selection.background#28639899
  • settings.dropdownBorder#FAFAFA00
  • settings.focusedRowBackground#2D2E2F
  • settings.focusedRowBorder#00000000
  • settings.modifiedItemIndicator#2367B2
  • sideBar.background#2D2E2F
  • sideBar.dropBackground#009dff50
  • sideBarSectionHeader.background#22222200
  • sideBarSectionHeader.border#404040
  • statusBar.background#4E4F50
  • statusBar.debuggingBackground#734181
  • statusBar.debuggingForeground#C9CED6
  • statusBar.focusBorder#ff000000
  • statusBar.foreground#C9CED6
  • statusBar.noFolderBackground#4E4F50
  • statusBarItem.hoverBackground#25262760
  • statusBarItem.remoteBackground#734181
  • tab.activeBackground#252627
  • tab.border#252627
  • tab.inactiveBackground#252627
  • tab.inactiveForeground#C9CED690
  • terminal.ansiBlack#666666
  • terminal.ansiBlue#80B0E8
  • terminal.ansiBrightBlack#777777
  • terminal.ansiBrightBlue#80B2E8
  • terminal.ansiBrightCyan#62cfcf
  • terminal.ansiBrightGreen#9FCF9F
  • terminal.ansiBrightMagenta#CC97DB
  • terminal.ansiBrightRed#E8808C
  • terminal.ansiBrightWhite#FAFAFA
  • terminal.ansiBrightYellow#E4C586
  • terminal.ansiCyan#72C4CF
  • terminal.ansiGreen#9FCF9F
  • terminal.ansiMagenta#CC97DB
  • terminal.ansiRed#E8808C
  • terminal.ansiWhite#FAFAFA
  • terminal.ansiYellow#E4C586
  • terminal.background#232425
  • terminal.findMatchBorder#E0BB70
  • terminal.foreground#C9CED6
  • textLink.foreground#4B95F7
  • titleBar.activeBackground#4E4F50
  • titleBar.activeForeground#C9CED6
  • titleBar.inactiveBackground#4E4F50
  • toolbar.hoverBackground#C9CED620
  • widget.shadow#1f1f1f70

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string, string.other.link, constant.other.symbol, entity.other.inherited-class, markup.underline.link.image.markdown, markup.raw.inline, markup.inserted, markup.inserted.git_gutter, variable.parameter.url.scss, support.constant.vendored.property-value.css, meta.attribute-selector.scss#99D1AC—
punctuation.definition.string#649064—
storage, keyword.operator.expression.typeof, keyword.operator.expression.import.js, entity.name.tag.variable.liquid, variable.language.this.js, punctuation.definition.binding-pattern.object.js, punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc, storage.type.class.jsdoc#A99DEB—
entity.name.section, markup.heading, entity.name.tag.wildcard.css, keyword.other.unit, entity.name.tag.wildcard.scss, entity.other.attribute-name.css, entity.other.attribute-name.id.css, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.class.css, punctuation.definition.raw.markdown, punctuation.definition.markdown, fenced_code.block.language, punctuation.definition.quote.begin.markdown#E4C586—
meta.tag, entity.name.function.graphql, entity.name.function.js, entity.name.function.ts, entity.name.function.scss, support.function.transform.css, support.function.url.css, support.function.misc.css, support.function.misc.scss, support.function.calc.css, entity.name.function.shell, entity.name.tag.css, punctuation.definition.heading.markdown, punctuation.definition.bold.markdown, punctuation.definition.list.begin.markdown, entity.name.section.markdown, punctuation.definition.markdown, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.italic.markdown, punctuation.definition.quote.begin.markdown, string.other.link.title.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown, punctuation.definition.strikethrough.markdown, punctuation.definition.link.markdown, meta.link.inet.markdown, meta.link.email.lt-gt.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, meta.separator.markdown, entity.name.tag.template.html.vue, entity.name.tag.script.html.vue, entity.name.tag.style.html.vue, punctuation.definition.tag.begin.html.vue, punctuation.definition.tag.end.html.vue, entity.name.section.markdown, meta.tag-stuff, invalid.illegal.unrecognized-tag.html#80B0E8—
comment, punctuation.separator, punctuation.definition.comment, meta.template.expression.js, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, punctuation.definition.metadata.markdown, keyword.operator.scss, keyword.operator.pattern.css, punctuation.definition.interpolation.begin.bracket.curly.scss, punctuation.definition.interpolation.end.bracket.curly.scss, markup.underline.link.image.markdown, meta.link.reference.def.markdown#7A8085—
constant.numeric, keyword.other.unit, constant.other.reference.link.markdown, punctuation.definition.constant.markdown, meta.link.reference.markdown#EB9F6C—
meta.separator, entity.name.tag.reference, support.variable.property.dom.js, support.type.property-name.json, variable.graphql, meta.object-literal.key.js, keyword.other.definition, entity.name.type.instance.jsdoc, entity.name.tag.yaml, meta.tag.metadata.doctype.html, support.type.property-name.css, punctuation.terminator, variable.parameter.js, support.variable.property.js, punctuation.accessor.js, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, support.type.property-name.media.css, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, meta.brace.round.js, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js, punctuation.section.function.scss, punctuation.definition.begin.bracket.round.scss, punctuation.definition.end.bracket.round.scss, punctuation.definition.parameters.begin.bracket.round.css, punctuation.definition.parameters.end.bracket.round.css, punctuation.definition.block.js, punctuation.definition.parameters.begin.bracket.round.scss, punctuation.definition.parameters.end.bracket.round.scss, keyword.operator.combinator.css, markup.fenced_code.block.markdown, markup.underline.link.image.markdown, meta.link.reference.def.markdown, meta.link.inline.markdown, markup.fenced_code.block.markdown, meta.tag-stuff, meta.brace.round.ts, entity.name.label.ts, meta.object-literal.key.ts, entity.other.attribute-name.html.vue#A5ADBB—
meta.paragraph.markdown, variable.other.liquid, variable.other.member.liquid, variable.language.liquid, punctuation.output.liquid, variable.other.njk, support.class.njk, support.variable.njk, variable.parameter.njk, string.unquoted.tag-string.nunjucks, support.class.liquid, support.variable.liquid, constant.other.color.rgb-value.hex.css, punctuation.definition.attribute-selector.begin.bracket.square.scss, punctuation.definition.attribute-selector.end.bracket.square.scss, entity.other.attribute-name.attribute.scss, support.constant.color.w3c-standard-color-name.css, fenced_code.block.language, markup.italic.markdown, string.unquoted.plain.out.yaml, string.other.link.description.markdown, entity.name.section.markdown, variable.other.object.ts, variable.other.property.ts, variable.other.readwrite.ts, meta.attribute.directive.vue#C9CED6—
support.type.object.module.js, constant.other.reference.link.markdown, punctuation.definition.constant.markdown#72C4CF—
entity.name.type.class.js#DFD49E—
keyword.other.important.css#F396BF—
invalid.illegal, keyword.other.important.css#E8808C—
keyword, meta.embedded.block.liquid, meta.embedded.block.frontmatter.njk, punctuation.definition.tag.begin.liquid, punctuation.definition.tag.end.liquid, punctuation.definition.tag.begin.njk, punctuation.definition.tag.end.njk, punctuation.output.njk, punctuation.tag.njk, punctuation.tag.liquid, keyword.operator.njk, keyword.operator.nunjucks, keyword.operator.liquid, keyword.other.dot.liquid, keyword.operator.logical.liquid, entity.name.tag.variable.liquid, entity.name.tag.iteration.liquid, entity.name.tag.conditional.liquid, entity.name.tag.control.liquid, entity.name.tag.method.liquid, entity.name.tag.other.liquid, keyword.operator.assignment.augmented.liquid, keyword.operator.equality.liquid, constant.language.undefined.js, constant.language.boolean.true.js, constant.language.json.comments, source.editorconfig, support.function.filter.liquid, entity.name.tag.liquid, entity.name.tag.njk, support.function.liquid, meta.entity.tag.liquid, punctuation.accessor.liquid, keyword.operator.expression.liquid, entity.other.njk.delimiter.tag, entity.other.njk.delimiter.variable, punctuation.other.njk, entity.tag.tagbraces.nunjucks, string.unquoted.filter-pipe.nunjucks, constant.language.boolean.false.js, punctuation.definition.block.js, constant.language.json, punctuation.section.media.begin.bracket.curly.css, punctuation.section.media.end.bracket.curly.css, punctuation.accessor.js, punctuation.section.keyframes.begin.bracket.curly.css, punctuation.section.keyframes.end.bracket.curly.css, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.section.property-list.begin.bracket.curly.scss, punctuation.section.property-list.end.bracket.curly.scss, punctuation.section.layer.begin.bracket.curly.tailwind, punctuation.section.layer.end.bracket.curly.tailwind, constant.language.null.js, punctuation.definition.group.shell, meta.structure.dictionary.json.comments, meta.array.literal.js, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.interpolation.begin.html.vue, punctuation.definition.interpolation.end.html.vue, punctuation.attribute-shorthand.event.html.vue, punctuation.definition.block.ts, punctuation.accessor.ts, punctuation.attribute-shorthand.bind.html.vue, entity.other.attribute-name.html.vue, punctuation.definition.block.sequence.item.yaml, constant.language.boolean.yaml, punctuation.definition.mapping.begin.yaml, punctuation.definition.mapping.end.yaml, punctuation.definition.sequence.begin.yaml, punctuation.definition.sequence.end.yaml, punctuation.definition.array.begin.json, punctuation.definition.array.end.json, entity.other.document.begin.yaml#CC97DB—
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—
Graymium Theme by olegfedak - VS Code Theme