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.background#2D2E3D
  • activityBar.foreground#DEE0E3
  • activityBar.inactiveForeground#D4C5EF55
  • activityBarBadge.background#BA6AAB
  • activityBarBadge.foreground#DEE0E3
  • badge.background#3B3D51
  • badge.foreground#DEE0E3
  • button.background#805177
  • button.secondaryBackground#3B3D51
  • debugToolBar.background#37394B
  • diffEditor.diagonalFill#37394B
  • diffEditor.insertedTextBackground#62986D44
  • diffEditor.removedTextBackground#9C605944
  • dropdown.background#37394B
  • editor.background#1E1F29
  • editor.findMatchBackground#87654180
  • editor.findMatchBorder#876541BF
  • editor.findMatchHighlightBackground#87654140
  • editor.findMatchHighlightBorder#87654180
  • editor.foldBackground#6272A459
  • editor.foreground#DEE0E3
  • editor.hoverHighlightBackground#F3AFE633
  • editor.lineHighlightBorder#44475A66
  • editor.rangeHighlightBackground#8765411A
  • editor.selectionBackground#565A6D8C
  • editor.selectionHighlightBackground#565A6D4D
  • editor.stackFrameHighlightBackground#4B4C3B
  • editor.wordHighlightBackground#CAA9FA33
  • editor.wordHighlightStrongBackground#CAA9FA66
  • editorBracketHighlight.foreground1#FFFF3F
  • editorBracketHighlight.foreground2#21FFFF
  • editorBracketHighlight.foreground3#F37BDC
  • editorBracketHighlight.unexpectedBracket.foreground#F36756
  • editorBracketMatch.border#89909B
  • editorCodeLens.foreground#6272A4
  • editorError.foreground#F09489
  • editorGroup.border#252632
  • editorGroup.dropBackground#3B3D5199
  • editorGroupHeader.tabsBackground#252632
  • editorGutter.addedBackground#9AE7A999
  • editorGutter.commentRangeForeground#6272A4
  • editorGutter.deletedBackground#F0948999
  • editorGutter.modifiedBackground#CAA9FA99
  • editorHoverWidget.border#37394B
  • editorIndentGuide.activeBackground#3B3D51
  • editorIndentGuide.background#2D2E3D
  • editorInlayHint.background#0000
  • editorInlayHint.foreground#6272A4
  • editorLineNumber.activeForeground#DEE0E3
  • editorLineNumber.foreground#6272A4
  • editorLink.activeForeground#F3AFE6
  • editorOverviewRuler.addedForeground#9AE7A999
  • editorOverviewRuler.deletedForeground#F0948999
  • editorOverviewRuler.errorForeground#F0948999
  • editorOverviewRuler.findMatchForeground#FFCA9299
  • editorOverviewRuler.infoForeground#B6F6FD99
  • editorOverviewRuler.modifiedForeground#CAA9FA99
  • editorOverviewRuler.warningForeground#F6FACA99
  • editorOverviewRuler.wordHighlightForeground#CAA9FA33
  • editorOverviewRuler.wordHighlightStrongForeground#CAA9FA66
  • editorRuler.foreground#3B3D51
  • editorSuggestWidget.border#252632
  • editorWarning.foreground#9AE7A9
  • editorWhitespace.foreground#3B3D51
  • editorWidget.background#252632
  • focusBorder#BA6AAB
  • gitDecoration.addedResourceForeground#9AE7A9
  • gitDecoration.conflictingResourceForeground#F6FACA
  • gitDecoration.deletedResourceForeground#F09489
  • gitDecoration.ignoredResourceForeground#6272A4
  • gitDecoration.modifiedResourceForeground#CAA9FA
  • gitDecoration.submoduleResourceForeground#CAA9FA
  • gitDecoration.untrackedResourceForeground#FFCA92
  • gitlens.trailingLineForegroundColor#6272A473
  • input.background#37394B
  • input.placeholderForeground#89909B
  • inputOption.activeBorder#BA6AAB
  • inputValidation.errorBackground#574240
  • inputValidation.errorBorder#B45E54
  • inputValidation.errorForeground#DEE0E3CC
  • inputValidation.warningBackground#4B4C3B
  • inputValidation.warningBorder#929663
  • inputValidation.warningForeground#DEE0E3CC
  • list.activeSelectionBackground#AB659E
  • list.activeSelectionIconForeground#DEE0E3
  • list.dropBackground#3B3D51
  • list.errorForeground#F09489
  • list.focusBackground#37394B
  • list.highlightForeground#F3AFE6
  • list.hoverBackground#2D2E3D
  • list.inactiveSelectionBackground#37394B
  • list.warningForeground#9AE7A9
  • menu.background#252632
  • menu.foreground#CCCCCC
  • merge.commonHeaderBackground#89F3FF33
  • merge.currentHeaderBackground#F781E133
  • merge.incomingHeaderBackground#B07AFF33
  • notebook.selectedCellBackground#37394B
  • panel.border#45475E
  • panelTitle.activeBorder#BA6AAB
  • panelTitle.inactiveForeground#6272A4
  • pickerGroup.border#45475E
  • pickerGroup.foreground#F3AFE6
  • progressBar.background#CAA9FA
  • scrollbarSlider.activeBackground#3B3D51C0
  • scrollbarSlider.background#3B3D5166
  • scrollbarSlider.hoverBackground#3B3D51A6
  • settings.modifiedItemIndicator#CAA9FA99
  • sideBar.background#252632
  • sideBarSectionHeader.background#0000
  • sideBarSectionHeader.border#45475E
  • sideBarTitle.foreground#DEE0E3
  • statusBar.background#805177
  • statusBar.debuggingBackground#876541
  • statusBar.foreground#DEE0E3
  • statusBar.noFolderBackground#645180
  • tab.inactiveBackground#2D2E3D
  • tab.lastPinnedBorder#45475E
  • terminal.ansiBlack#303953
  • terminal.ansiBlue#CAA9FA
  • terminal.ansiBrightBlack#343E60
  • terminal.ansiBrightBlue#AA70FF
  • terminal.ansiBrightCyan#79F6FF
  • terminal.ansiBrightGreen#6CE484
  • terminal.ansiBrightMagenta#F37BDC
  • terminal.ansiBrightRed#F36756
  • terminal.ansiBrightWhite#939FC5
  • terminal.ansiBrightYellow#F2FB90
  • terminal.ansiCyan#B6F6FD
  • terminal.ansiGreen#9AE7A9
  • terminal.ansiMagenta#F3AFE6
  • terminal.ansiRed#F09489
  • terminal.ansiWhite#B5BCD4
  • terminal.ansiYellow#F6FACA
  • terminal.findMatchBackground#87654180
  • terminal.findMatchBorder#876541BF
  • terminal.findMatchHighlightBackground#87654140
  • terminal.findMatchHighlightBorder#87654180
  • terminal.foreground#DEE0E3
  • terminal.inactiveSelectionBackground#37394B
  • terminal.selectionBackground#565A6D8C
  • terminalOverviewRuler.findMatchForeground#87654180
  • textBlockQuote.background#2D2E3D
  • textBlockQuote.border#645180
  • textLink.activeForeground#F3AFE6
  • textLink.foreground#F3AFE6
  • titleBar.activeBackground#3B3D51
  • titleBar.inactiveBackground#252632
  • tree.indentGuidesStroke#DEE0E344

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#FFCA92
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#9AE7A9
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#9AE7A9
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#CAA9FA
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#B6F6FD
meta.object-literal.key#B6F6FD
meta.object-literal.key punctuation.separator.key-value#DEE0E3
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.colors.rgb-value, constant.other.rgb-value, support.constant.color#F6FACA
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#F6FACA
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#F09489
keyword.operator.or.regexp, keyword.control.anchor.regexp#FFCA92
keyword.operator.quantifier.regexp#d7ba7d
constant.character#F3AFE6
constant.character.escape#d7ba7d
entity.name.label#C8C8C8
source.css keyword, source.sass keyword#F09489
keyword.control.at-rule.function.scss, keyword.control.at-rule.mixin.scss, keyword.control.at-rule.include.scss, keyword.control.at-rule.extend.scss#9AE7A9
keyword.control.debug.scss, keyword.control.warn.scss, keyword.control.error.scss#F09489
markup.underline.link.markdown, markup.underline.link.image.markdown, punctuation.definition.metadata.markdown#B6F6FD
string.other.link.title.markdown, string.other.link.description.markdown#9AE7A9
entity.other.attribute-name.handlebars, variable.parameter.handlebars#9AE7A9
meta.preprocessor.cs, meta.preprocessor.cs string#F6FACA7F
meta.preprocessor.cs keyword, meta.preprocessor.cs punctuation.separator.hash#CAA9FA7F
meta.preprocessor.cs keyword.operator, meta.preprocessor.cs punctuation.parenthesis#DEE0E37F
meta.preprocessor.cs entity.name.variable.preprocessor.symbol.cs#B6F6FD7F
meta.preprocessor.cs constant.numeric#C8F1BA7F
punctuation.separator.inheritance.php#DEE0E3
entity.other.alias.php, support.other.namespace.php#9AE7A9
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#FFCA92
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#9AE7A9
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#9AE7A9
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#CAA9FA
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#B6F6FD
meta.object-literal.key#B6F6FD
meta.object-literal.key punctuation.separator.key-value#DEE0E3
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.colors.rgb-value, constant.other.rgb-value, support.constant.color#F6FACA
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#F6FACA
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#F09489
keyword.operator.or.regexp, keyword.control.anchor.regexp#FFCA92
keyword.operator.quantifier.regexp#d7ba7d
constant.character#F3AFE6
constant.character.escape#d7ba7d
entity.name.label#C8C8C8
source.css keyword, source.sass keyword#F09489
keyword.control.at-rule.function.scss, keyword.control.at-rule.mixin.scss, keyword.control.at-rule.include.scss, keyword.control.at-rule.extend.scss#9AE7A9
keyword.control.debug.scss, keyword.control.warn.scss, keyword.control.error.scss#F09489
markup.underline.link.markdown, markup.underline.link.image.markdown, punctuation.definition.metadata.markdown#B6F6FD
string.other.link.title.markdown, string.other.link.description.markdown#9AE7A9
entity.other.attribute-name.handlebars, variable.parameter.handlebars#9AE7A9
meta.preprocessor.cs, meta.preprocessor.cs string#F6FACA7F
meta.preprocessor.cs keyword, meta.preprocessor.cs punctuation.separator.hash#CAA9FA7F
meta.preprocessor.cs keyword.operator, meta.preprocessor.cs punctuation.parenthesis#DEE0E37F
meta.preprocessor.cs entity.name.variable.preprocessor.symbol.cs#B6F6FD7F
meta.preprocessor.cs constant.numeric#C8F1BA7F
punctuation.separator.inheritance.php#DEE0E3
entity.other.alias.php, support.other.namespace.php#9AE7A9
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#DEE0E3
emphasisitalic
strongbold
header#000080
comment#6272A4
constant.language#F3AFE6
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#C8F1BA
constant.regexp#646695
entity.name.tag#F3AFE6
entity.name.tag.css#F3AFE6
entity.other.attribute-name#B6F6FD
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#F3AFE6
invalid#F09489
markup.italic#FFCA92italic
markup.strikethroughstrikethrough
markup.underline#FFCA92underline
markup.bold#FFCA92bold
markup.heading#F3AFE6bold
markup.inserted#C8F1BA
markup.deleted, markup.inline.raw#F6FACA
markup.changed#F3AFE6
punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin.markdown#CAA9FA
punctuation.definition.tag#676E79
meta.preprocessor, entity.name.function.preprocessor#F3AFE6
meta.preprocessor.string#F6FACA
meta.preprocessor.numeric#C8F1BA
meta.structure.dictionary.key.python#B6F6FD
meta.diff.header#F3AFE6
storage#F3AFE6
storage.type#F3AFE6
storage.modifier, keyword.operator.noexcept#F3AFE6
string, meta.embedded.assembly#F6FACA
string.tag#F6FACA
string.value#F6FACA
string.regexp#F09489
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#F3AFE6
meta.template.expression#DEE0E3
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#B6F6FD
keyword#F3AFE6
keyword.control#F3AFE6
keyword.operator#DEE0E3
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#F3AFE6
keyword.other.unit, keyword.control.unit#C8F1BA
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#F3AFE6
keyword.operator.type.php#F3AFE6
support.function.git-rebase#B6F6FD
constant.sha.git-rebase#C8F1BA
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#DEE0E3
variable.language#F3AFE6

Shiki preview

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

Loading...