Skip to main content
CodingTheme

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.activeBorder#00000000
  • activityBar.background#f3f3f3
  • activityBar.dropBorder#00000000
  • activityBar.foreground#FD7C84
  • activityBarBadge.background#9db802
  • activityBarBadge.foreground#ffffff
  • badge.background#9db802
  • badge.foreground#ffffff
  • breadcrumb.background#f6f6f6
  • breadcrumb.foreground#6672a3
  • button.background#9db802
  • button.border#00000000
  • button.hoverBackground#9db80299
  • checkbox.border#00000000
  • diffEditor.insertedTextBackground#9db80222
  • diffEditor.removedTextBackground#fd7c8422
  • dropdown.background#ffffff
  • dropdown.border#00000000
  • dropdown.foreground#002500
  • editor.background#f9f9f9
  • editor.findMatchBackground#c2c7da55
  • editor.findMatchHighlightBackground#fcd87c
  • editor.foldBackground#c2c7da33
  • editor.foreground#002500
  • editor.hoverHighlightBackground#CFCDCB55
  • editor.lineHighlightBackground#FD7C841a
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#c2c7da55
  • editor.selectionHighlightBackground#c2c7da55
  • editor.wordHighlightBackground#c2c7da55
  • editorBracketMatch.background#FD7C8433
  • editorBracketMatch.border#00000000
  • editorCursor.background#9db802
  • editorCursor.foreground#9db802
  • editorGroup.border#00000000
  • editorGroup.dropBackground#f3f3f3
  • editorGutter.addedBackground#9db802
  • editorGutter.deletedBackground#fd7c84
  • editorGutter.modifiedBackground#c2c7da
  • editorIndentGuide.activeBackground#00250044
  • editorIndentGuide.background#00250011
  • editorLineNumber.activeForeground#9db802
  • editorLineNumber.foreground#f0eeef
  • editorLink.activeForeground#6672a3
  • editorOverviewRuler.addedForeground#9db80299
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.bracketMatchForeground#fd7c8499
  • editorOverviewRuler.currentContentForeground#6672a399
  • editorOverviewRuler.deletedForeground#ea3c4299
  • editorOverviewRuler.errorForeground#ea3c4299
  • editorOverviewRuler.incomingContentForeground#9db80299
  • editorOverviewRuler.infoForeground#6672a399
  • editorOverviewRuler.modifiedForeground#c2c7da99
  • editorOverviewRuler.warningForeground#fbc02d99
  • editorUnnecessaryCode.opacity#00000066
  • editorWhitespace.foreground#f9f9f9
  • editorWidget.background#f3f3f3
  • editorWidget.border#00000000
  • errorForeground#ea3c42
  • focusBorder#00000000
  • foreground#002500
  • gitDecoration.addedResourceForeground#9db802
  • gitDecoration.conflictingResourceForeground#fbc02d
  • gitDecoration.deletedResourceForeground#fd7c84
  • gitDecoration.ignoredResourceForeground#a6a6a6
  • gitDecoration.modifiedResourceForeground#6672a3
  • gitDecoration.renamedResourceForeground#6672a3
  • gitDecoration.stageDeletedResourceForeground#fd7c84
  • gitDecoration.stageModifiedResourceForeground#6672a3
  • gitDecoration.untrackedResourceForeground#a6a6a6
  • input.border#00000000
  • keybindingLabel.background#9db802
  • keybindingLabel.foreground#ffffff
  • list.activeSelectionBackground#E6EAD2
  • list.activeSelectionForeground#002500
  • list.activeSelectionIconForeground#002500
  • list.deemphasizedForeground#445544
  • list.dropBackground#9db80210
  • list.errorForeground#ea3c42
  • list.filterMatchBackground#c2c7da
  • list.focusBackground#f3f3f3
  • list.highlightForeground#9db802
  • list.hoverBackground#f0eeef
  • list.inactiveSelectionBackground#E6EAD2
  • list.invalidItemForeground#ea3c42
  • list.warningForeground#fbc02d
  • listFilterWidget.background#c2c7da
  • menu.border#00000000
  • merge.border#00000000
  • merge.currentContentBackground#c2c7da33
  • merge.currentHeaderBackground#c2c7da77
  • merge.incomingContentBackground#9db80233
  • merge.incomingHeaderBackground#9db80277
  • minimap.background#f3f3f3
  • minimap.errorHighlight#ea3c42
  • minimap.findMatchHighlight#c2c7da
  • minimap.warningHighlight#fbc02d
  • minimapGutter.addedBackground#9db802
  • minimapGutter.deletedBackground#fd7c84
  • minimapGutter.modifiedBackground#c2c7da
  • notificationLink.foreground#6672a3
  • notifications.background#f3f3f3
  • notificationsErrorIcon.foreground#fd7c84
  • notificationsInfoIcon.foreground#9db802
  • notificationsWarningIcon.foreground#fbc02d
  • panel.background#f3f3f3
  • panel.border#00000000
  • peekView.border#00000000
  • peekViewEditor.background#f3f3f3
  • peekViewResult.matchHighlightBackground#c2c7da
  • peekViewTitle.background#fd7c8499
  • peekViewTitleDescription.foreground#ffffff
  • progressBar.background#fd7c84
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#9db80233
  • scrollbarSlider.background#CFCDCB55
  • scrollbarSlider.hoverBackground#9db80233
  • selection.background#c2c7da
  • sideBar.background#f3f3f3
  • sideBar.border#00000000
  • sideBarSectionHeader.background#f3f3f3
  • statusBar.background#FD7C84
  • statusBar.border#00000000
  • statusBar.debuggingBackground#FD7C84
  • statusBar.noFolderBackground#FD7C84
  • statusBarItem.remoteBackground#FD7C84
  • symbolIcon.arrayForeground#fd7c84
  • symbolIcon.booleanForeground#fd7c84
  • symbolIcon.classForeground#fbc02d
  • symbolIcon.colorForeground#6672a3
  • symbolIcon.constantForeground#fe9da3
  • symbolIcon.constructorForeground#fbc02d
  • symbolIcon.enumeratorForeground#6672a3
  • symbolIcon.enumeratorMemberForeground#6672a3
  • symbolIcon.eventForeground#fe9da3
  • symbolIcon.fieldForeground#445544
  • symbolIcon.fileForeground#445544
  • symbolIcon.folderForeground#445544
  • symbolIcon.functionForeground#9db802
  • symbolIcon.interfaceForeground#fbc02d
  • symbolIcon.keyForeground#fbc02d
  • symbolIcon.keywordForeground#fe9da3
  • symbolIcon.methodForeground#9db802
  • symbolIcon.moduleForeground#6672a3
  • symbolIcon.namespaceForeground#6672a3
  • symbolIcon.nullForeground#fd7c84
  • symbolIcon.numberForeground#fe9da3
  • symbolIcon.objectForeground#fd7c84
  • symbolIcon.operatorForeground#6672a3
  • symbolIcon.packageForeground#fe9da3
  • symbolIcon.propertyForeground#445544
  • symbolIcon.referenceForeground#445544
  • symbolIcon.snippetForeground#fe9da3
  • symbolIcon.stringForeground#788d01
  • symbolIcon.structForeground#6672a3
  • symbolIcon.textForeground#788d01
  • symbolIcon.typeParameterForeground#6672a3
  • symbolIcon.unitForeground#fbc02d
  • symbolIcon.variableForeground#445544
  • tab.activeBackground#f9f9f9
  • tab.border#00000000
  • tab.hoverBorder#00000000
  • tab.inactiveBackground#f3f3f3
  • terminal.ansiBlack#002500
  • terminal.ansiBlue#6672a3
  • terminal.ansiBrightBlack#445544
  • terminal.ansiBrightBlue#c2c7da
  • terminal.ansiBrightCyan#cbc65e
  • terminal.ansiBrightGreen#9db802
  • terminal.ansiBrightMagenta#ed555a
  • terminal.ansiBrightRed#fe9da3
  • terminal.ansiBrightWhite#f3f3f3
  • terminal.ansiBrightYellow#fcd87c
  • terminal.ansiCyan#788d01
  • terminal.ansiGreen#025b0e
  • terminal.ansiMagenta#ea3c42
  • terminal.ansiRed#fd7c84
  • terminal.ansiWhite#f0eeef
  • terminal.ansiYellow#fbc02d
  • terminal.background#f3f3f3
  • terminal.border#00000000
  • terminal.foreground#002500
  • terminal.selectionBackground#c2c7da
  • terminalCursor.background#025b0e
  • textLink.activeForeground#c2c7da
  • textLink.foreground#6672a3
  • titleBar.activeBackground#f3f3f3
  • titleBar.border#00000000
  • titleBar.inactiveBackground#f3f3f3
  • tree.indentGuidesStroke#00250011
  • tree.tableColumnsBorder#00250011
  • welcomePage.tileShadow.#00000000
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, meta.var.expr storage.type, keyword.control.flow, keyword.control.return, meta.directive.vue punctuation.separator.key-value.html, meta.directive.vue entity.other.attribute-name.html, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, storage.modifieritalic
comment, comment.block.documentation, punctuation.definition.comment, comment.block.documentation punctuation#a6a6a6
comment.block.documentation variable, comment.block.documentation storage, comment.block.documentation keyword, comment.block.documentation support, comment.block.documentation markup, comment.block.documentation markup.inline.raw.string.markdown, meta.other.type.phpdoc.php keyword.other.type.php, meta.other.type.phpdoc.php support.other.namespace.php, meta.other.type.phpdoc.php punctuation.separator.inheritance.php, meta.other.type.phpdoc.php support.class, keyword.other.phpdoc.php, log.date#a6a6a6
meta.other.type.phpdoc.php support.class, comment.block.documentation storage.type, comment.block.documentation punctuation.definition.block.tag, comment.block.documentation entity.name.type.instance#a6a6a6
variable.other.constant, punctuation.definition.constant, constant.language, constant.numeric, support.constant, constant.language.null, constant.language.undefined, constant.language.go, constant.language.boolean, constant.language.json, constant.language.infinity, constant.language.nan#fbc02d
string, constant.other.symbol, constant.other.key, meta.attribute-selector#9db802
constant.other.color, constant.other.color.rgb-value.hex punctuation.definition.constant#fbc02d
invalid, invalid.illegal#ea3c42
invalid.deprecated#fe9da3
storage.type#fe9da3
meta.var.expr storage.type, storage.modifier#fe9da3
punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line.tag.smarty, support.constant.handlebars, punctuation.section.tag.twig#6672a3
keyword.control.smarty, keyword.control.twig, support.constant.handlebars keyword.control, keyword.operator.comparison.twig, keyword.blade, entity.name.function.blade#025b0e
keyword.operator.spread, keyword.operator.rest#fe9da3bold
keyword.operator, keyword.control.as, keyword.other, keyword.operator.bitwise.shift, punctuation, text.html.twig meta.tag.inline.any.html, meta.tag.template.value.twig meta.function.arguments.twig, meta.directive.vue punctuation.separator.key-value.html, punctuation.definition.constant.markdown, punctuation.definition.string, punctuation.support.type.property-name, text.html.vue-html meta.tag, punctuation.definition.keyword, punctuation.terminator.rule, punctuation.definition.entity, punctuation.separator.inheritance.php, keyword.other.template, keyword.other.substitution, entity.name.operator, meta.property-list punctuation.separator.key-value, meta.at-rule.mixin punctuation.separator.key-value, meta.at-rule.function variable.parameter.url#cbc65e
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, meta.import keyword.other#6672a3
keyword, keyword.control, keyword.other.important#fe9da3
keyword.other.DML#6672a3
keyword.operator.logical, storage.type.function, keyword.operator.bitwise, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.relational, keyword.operator.or.regexp#fe9da3
entity.name.tag#fe9da3
entity.name.tag support.class.component, meta.tag#fe9da3
punctuation.definition.tag#fe9da3
constant.other.php, variable.other.global.safer, variable.other.global.safer punctuation.definition.variable, variable.other.global, variable.other.global punctuation.definition.variable, constant.other.haskell#fcd87c
variable, support.variable, string constant.other.placeholder, variable.parameter.handlebars#6672a3
variable.other.object#ea3c42
meta.array.literal variable#6672a3
meta.object-literal.key, string.alias.graphql, string.unquoted.graphql, string.unquoted.alias.graphql, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, meta.field.declaration.ts variable.object.property#788d01
variable.other.property, support.variable.property, support.variable.property.dom, meta.function-call variable.other.object.property, variable.other.object.property.cs#6672a3
variable.other.object.property#ea3c42
meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key#788d01
source.cpp meta.block variable.other#fe9da3
support.other.variable#fe9da3
meta.class-method.js entity.name.function.js, entity.name.method.js, variable.function.constructor, keyword.other.special-method, storage.type.cs, entity.name.function.member, support.function#6672a3
entity.name.function, meta.function-call, meta.function-call entity.name.function, variable.function, meta.definition.method entity.name.function, meta.object-literal entity.name.function#6672a3
variable.parameter.function.language.special, variable.parameter, meta.function.parameters punctuation.definition.variable, meta.function.parameter variable#788d01
keyword.other.type.php, storage.type.php, constant.character, constant.escape, keyword.other.unit#fe9da3
meta.definition.variable variable.other.constant, meta.definition.variable variable.other.readwrite, variable.other.declaration#fe9da3
entity.other.inherited-class#fe9da3
support.class, support.type, variable.other.readwrite.alias, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types, support.variable.dom, support.constant.math, support.type.object.module, support.constant.json, entity.name.namespace, meta.import.qualifier#025b0e
entity.name#ea3c42
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, support.type.property-name.css, support.type.vendored.property-name, support.type.map.key#025b0e
support.constant.font-name, meta.definition.variable#9db802
entity.other.attribute-name.class, meta.at-rule.mixin.scss entity.name.function.scss#9db802
entity.other.attribute-name.id#fe9da3
entity.name.tag.css#025b0e
entity.other.attribute-name.pseudo-class punctuation.definition.entity, entity.other.attribute-name.pseudo-element punctuation.definition.entity, entity.other.attribute-name.class punctuation.definition.entity, entity.name.tag.reference#fcd87c
meta.property-list#9abdf5
meta.property-list meta.at-rule.if, meta.at-rule.return variable.parameter.url, meta.property-list meta.at-rule.else#fe9da3
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity.css#788d01
meta.property-list meta.property-list#6672a3
meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.include entity.name.function.scss, meta.at-rule.include keyword.control.at-rule.include#fe9da3
keyword.control.at-rule.include punctuation.definition.keyword, keyword.control.at-rule.mixin punctuation.definition.keyword, meta.at-rule.include keyword.control.at-rule.include, keyword.control.at-rule.extend punctuation.definition.keyword, meta.at-rule.extend keyword.control.at-rule.extend, entity.other.attribute-name.placeholder.css punctuation.definition.entity.css, meta.at-rule.media keyword.control.at-rule.media, meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.function keyword.control.at-rule.function, keyword.control punctuation.definition.keyword#fe9da3
meta.property-list meta.at-rule.include#ea3c42
support.constant.property-value#fbc02d
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ea3c42
variable.language#fe9da3
variable.other punctuation.definition.variable#ea3c42
source.js constant.other.object.key.js string.unquoted.label.js, variable.language.this punctuation.definition.variable, keyword.other.this#fe9da3
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#fe9da3
text.html constant.character.entity#025b0e
entity.other.attribute-name.id.html, meta.directive.vue entity.other.attribute-name.html#fe9da3
source.sass keyword.control#6672a3
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.placeholder, meta.property-list meta.property-value#fe9da3
markup.inserted#788d01
markup.deleted#fe9da3
markup.changed#6672a3
string.regexp#cbc65e
punctuation.definition.group#fe9da3
constant.other.character-class.regexp#fe9da3
constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp#fcd87c
keyword.operator.quantifier.regexp#cbc65e
constant.character.escape.backslash#ea3c42
constant.character.escape#cbc65e
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#6672a3
keyword.other.unit#fe9da3
source.json meta.structure.dictionary.json support.type.property-name.json#6672a3
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#025b0e
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#cbc65e
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fe9da3
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fcd87c
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#025b0e
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#788d01
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fe9da3
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9db802
punctuation.definition.list_item.markdown#6672a3
meta.block, meta.brace, punctuation.definition.block, punctuation.definition.use, punctuation.definition.class, punctuation.definition.begin.bracket, punctuation.definition.end.bracket, punctuation.definition.switch-expression.begin.bracket, punctuation.definition.switch-expression.end.bracket, punctuation.definition.section.switch-block.begin.bracket, punctuation.definition.section.switch-block.end.bracket, punctuation.definition.group.shell, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.dictionary, punctuation.definition.array, punctuation.section#6672a3
meta.jsx.children, meta.embedded.block#ea3c42
text.html#ad555a
text.html.markdown markup.inline.raw.markdown#fe9da3
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#ad555a
heading.1.markdown entity.name, heading.1.markdown punctuation.definition.heading.markdown#cbc65ebold
heading.2.markdown entity.name, heading.2.markdown punctuation.definition.heading.markdown#025b0ebold
heading.3.markdown entity.name, heading.3.markdown punctuation.definition.heading.markdown#6672a3bold
heading.4.markdown entity.name, heading.4.markdown punctuation.definition.heading.markdown#6672a3bold
heading.5.markdown entity.name, heading.5.markdown punctuation.definition.heading.markdown#ad555abold
heading.6.markdown entity.name, heading.6.markdown punctuation.definition.heading.markdown#ad555abold
markup.italic, markup.italic punctuation#ea3c42italic
markup.bold, markup.bold punctuation#ea3c42bold
markup.bold markup.italic, markup.bold markup.italic punctuation#fe9da3bold italic
markup.underline, markup.underline punctuationunderline
markup.quote punctuation.definition.blockquote.markdown#ad555a
markup.quoteitalic
string.other.link, markup.underline.link, constant.other.reference.link.markdown, string.other.link.description.title.markdown#788d01
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.language.fenced.markdown#cbc65e
meta.separator#a6a6a6bold
markup.table#ea3c42
token.info-token#0db9d7
token.warn-token#fcd87c
token.error-token#fe9da3
token.debug-token#fe9da3
entity.tag.apacheconf#fe9da3
meta.preprocessor#788d01
source.env#6672a3

Shiki preview

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

Loading...

White Peach Theme by MagdalenaLipka - VS Code Theme