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.activeBackground#B38CF520
  • activityBar.activeBorder#1B1D2C
  • activityBar.background#1B1D2C
  • activityBar.foreground#908AFF
  • activityBar.inactiveForeground#536087BF
  • activityBarBadge.background#908AFF
  • activityBarBadge.foreground#F8F8F2
  • badge.background#44475A
  • badge.foreground#F8F8F2
  • breadcrumb.activeSelectionForeground#F8F8F2
  • breadcrumb.background#282A36
  • breadcrumb.focusForeground#F8F8F2
  • breadcrumb.foreground#6272A4
  • breadcrumbPicker.background#191A21
  • button.background#44475A
  • button.foreground#F8F8F2
  • contrastBorder#191A21
  • debugToolBar.background#242533
  • diffEditor.insertedTextBackground#50FA7B20
  • diffEditor.removedTextBackground#F52E0150
  • dropdown.background#343746
  • dropdown.border#191A21
  • dropdown.foreground#F8F8F2
  • editor.background#282A36
  • editor.findMatchBackground#FFB86C80
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#242533
  • editor.foreground#F8F8F2
  • editor.hoverHighlightBackground#8BE9FD50
  • editor.lineHighlightBorder#44475A
  • editor.rangeHighlightBackground#BD93F915
  • editor.selectionBackground#44475A
  • editor.selectionHighlightBackground#424450
  • editor.snippetFinalTabstopHighlightBackground#282A36
  • editor.snippetFinalTabstopHighlightBorder#50FA7B
  • editor.snippetTabstopHighlightBackground#282A36
  • editor.snippetTabstopHighlightBorder#6272A4
  • editor.wordHighlightBackground#8BE9FD50
  • editor.wordHighlightStrongBackground#50FA7B50
  • editorCodeLens.foreground#6272A4
  • editorError.foreground#F52E01
  • editorGroup.border#908AFF
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#191A21
  • editorGutter.addedBackground#50FA7B80
  • editorGutter.deletedBackground#F52E0180
  • editorGutter.modifiedBackground#8BE9FD80
  • editorHoverWidget.background#282A36
  • editorHoverWidget.border#908AFF
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#6272A4
  • editorLink.activeForeground#8BE9FD
  • editorMarkerNavigation.background#242533
  • editorOverviewRuler.addedForeground#50FA7B80
  • editorOverviewRuler.border#191A21
  • editorOverviewRuler.currentContentForeground#50FA7B
  • editorOverviewRuler.deletedForeground#F52E0180
  • editorOverviewRuler.errorForeground#F52E0180
  • editorOverviewRuler.incomingContentForeground#BD93F9
  • editorOverviewRuler.infoForeground#8BE9FD80
  • editorOverviewRuler.modifiedForeground#8BE9FD80
  • editorOverviewRuler.selectionHighlightForeground#FFB86C
  • editorOverviewRuler.warningForeground#FFB86C80
  • editorOverviewRuler.wordHighlightForeground#8BE9FD
  • editorOverviewRuler.wordHighlightStrongForeground#50FA7B
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#242533
  • editorSuggestWidget.foreground#F8F8F2
  • editorSuggestWidget.selectedBackground#44475A
  • editorWarning.foreground#8BE9FD
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#242533
  • errorForeground#F52E01
  • extensionButton.prominentBackground#50FA7B90
  • extensionButton.prominentForeground#F8F8F2
  • extensionButton.prominentHoverBackground#50FA7B60
  • focusBorder#6272A4
  • foreground#F8F8F2
  • gitDecoration.conflictingResourceForeground#FFB86C
  • gitDecoration.deletedResourceForeground#F52E01
  • gitDecoration.ignoredResourceForeground#6272A4
  • gitDecoration.modifiedResourceForeground#8BE9FD
  • gitDecoration.untrackedResourceForeground#50FA7B
  • input.background#282A36
  • input.border#191A21
  • input.foreground#F8F8F2
  • input.placeholderForeground#6272A4
  • inputOption.activeBorder#908AFF
  • inputValidation.errorBorder#F52E01
  • inputValidation.infoBorder#908AFF
  • inputValidation.warningBorder#FFB86C
  • list.activeSelectionBackground#44475A
  • list.activeSelectionForeground#F8F8F2
  • list.dropBackground#44475A
  • list.errorForeground#F52E01
  • list.focusBackground#44475A75
  • list.highlightForeground#8BE9FD
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#D1B618
  • listFilterWidget.background#343746
  • listFilterWidget.noMatchesOutline#FF3100
  • listFilterWidget.outline#424450
  • merge.currentHeaderBackground#50FA7B90
  • merge.incomingHeaderBackground#BD93F990
  • notification.background#282A36
  • notification.buttonBackground#44475A
  • notification.buttonForeground#F8F8F2
  • notification.buttonHoverBackground#44475A75
  • notification.errorBackground#F52E01
  • notification.errorForeground#F8F8F2
  • notification.foreground#F8F8F2
  • notification.infoBackground#8BE9FD
  • notification.infoForeground#282A36
  • notification.warningBackground#FFB86C
  • notification.warningForeground#282A36
  • panel.background#282A36
  • panel.border#908AFF
  • panelTitle.activeBorder#908AFF
  • panelTitle.activeForeground#F8F8F2
  • panelTitle.inactiveForeground#6272A4
  • peekView.border#44475A
  • peekViewEditor.background#282A36
  • peekViewEditor.matchHighlightBackground#F1FA8C80
  • peekViewResult.background#242533
  • peekViewResult.fileForeground#F8F8F2
  • peekViewResult.lineForeground#F8F8F2
  • peekViewResult.matchHighlightBackground#F1FA8C80
  • peekViewResult.selectionBackground#44475A
  • peekViewResult.selectionForeground#F8F8F2
  • peekViewTitle.background#191A21
  • peekViewTitleDescription.foreground#6272A4
  • peekViewTitleLabel.foreground#F8F8F2
  • pickerGroup.border#908AFF
  • pickerGroup.foreground#8BE9FD
  • progressBar.background#908AFF
  • selection.background#762ebe93
  • settings.checkboxBackground#242533
  • settings.checkboxBorder#191A21
  • settings.checkboxForeground#F8F8F2
  • settings.dropdownBackground#242533
  • settings.dropdownBorder#191A21
  • settings.dropdownForeground#F8F8F2
  • settings.headerForeground#F8F8F2
  • settings.modifiedItemForeground#FFB86C
  • settings.modifiedItemIndicator#FFB86C
  • settings.numberInputBackground#242533
  • settings.numberInputBorder#191A21
  • settings.numberInputForeground#F8F8F2
  • settings.textInputBackground#242533
  • settings.textInputBorder#191A21
  • settings.textInputForeground#F8F8F2
  • sideBar.background#242533
  • sideBarSectionHeader.background#282A36
  • sideBarSectionHeader.border#252838
  • sideBarTitle.foreground#F8F8F2
  • statusBar.background#191A21
  • statusBar.debuggingBackground#F52E01
  • statusBar.debuggingForeground#191A21
  • statusBar.foreground#F8F8F2
  • statusBar.noFolderBackground#191A21
  • statusBar.noFolderForeground#F8F8F2
  • statusBarItem.prominentBackground#F52E01
  • statusBarItem.prominentHoverBackground#FFB86C
  • statusBarItem.remoteBackground#908AFF
  • statusBarItem.remoteForeground#F8F8F2
  • tab.activeBackground#282A36
  • tab.activeBorderTop#908AFF80
  • tab.activeForeground#F8F8F2
  • tab.border#191A21
  • tab.inactiveBackground#242533
  • tab.inactiveForeground#6272A4
  • terminal.ansiBlack#242533
  • terminal.ansiBlue#BD93F9
  • terminal.ansiBrightBlack#6272A4
  • terminal.ansiBrightBlue#908AFF
  • terminal.ansiBrightCyan#A4FFFF
  • terminal.ansiBrightGreen#69FF94
  • terminal.ansiBrightMagenta#908AFF
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFFA5
  • terminal.ansiCyan#8BE9FD
  • terminal.ansiGreen#50FA7B
  • terminal.ansiMagenta#908AFF
  • terminal.ansiRed#F52E01
  • terminal.ansiWhite#F8F8F2
  • terminal.ansiYellow#F1FA8C
  • terminal.background#282A36
  • terminal.foreground#F8F8F2
  • titleBar.activeBackground#242533
  • titleBar.activeForeground#F8F8F2
  • titleBar.inactiveBackground#191A21
  • titleBar.inactiveForeground#6272A4
  • walkThrough.embeddedEditorBackground#242533

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta, meta.function-call#FFEA77—
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#DCDCAA—
meta.return-type, support.class, 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#4EC9B0—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#4EC9B0—
source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#C586C0—
meta.definition.variable.name, support.variable, entity.name.variable#9CDCFE—
variable.other.constant, variable.other.enummember#4FC1FF—
meta.object-literal.key#9CDCFE—
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#CE9178—
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#CE9178—
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#FF3100—
keyword.operator.or.regexp, keyword.control.anchor.regexp#DCDCAA—
keyword.operator.quantifier.regexp#d7ba7d—
constant.character#569cd6—
constant.character.escape#d7ba7d—
entity.name.label#C8C8C8—
meta.property-value.css#C0C0C0—
entity.name.function, support.constant.handlebars#28FFCAitalic
support.function#28FFCAitalic
support.type, keyword.control#4FC1FF—
meta.return-type, support.class, entity.name.type, 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.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, variable, 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#EDEEFB—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#FF82D0—
keyword.control#FF82D0—
variable, meta.definition.variable.name, support.variable#EDEEFB—
variable.other.object.property#FF82D0—
variable.other.readwrite#EDEEFB—
variable.other.property, variable.other.constant#FF82D0—
meta.object-literal.key#28FFCA—
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#FFF09A—
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#FF82D0—
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#d16969—
keyword.operator.or.regexp, keyword.control.anchor.regexp#DCDCAA—
keyword.operator.quantifier.regexp#d7ba7d—
constant.character#FF82D0—
constant.character.escape#d7ba7d—
meta.embedded, source.groovy.embedded#EDEEFB—
emphasis—italic
strong—bold
header#000080—
comment, punctuation.definition.comment#59628Fitalic
constant.language#FF82D0italic
constant.numeric#FFF09A—
constant.regexp#646695—
entity.name.tag.css#42D0FF—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#42D0FF—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-element.css#28FFCAitalic
invalid#FF603D—
markup.underline—underline
markup.bold#FF82D0bold
markup.heading#FF82D0bold
markup.italic—italic
markup.inserted#cecea8—
markup.deleted#FF82D0—
markup.changed#FF82D0—
beginning.punctuation.definition.quote.markdown#608b4e—
beginning.punctuation.definition.list.markdown#6796e6—
markup.inline.raw#FF82D0—
meta.selector#FF82D0—
punctuation.definition.tag#808080—
meta.preprocessor#FF82D0—
meta.preprocessor.string#FF82D0—
meta.preprocessor.numeric#FF82D0—
meta.structure.dictionary.key.python#28FFCA—
meta.diff.header#FF82D0—
storage#FF82D0—
storage.modifier#FF82D0italic
keyword.operator.expression.delete#FF82D0italic
string, string.quoted.double.js#dddddd—
string.tag#FF82D0—
string.value#FF82D0—
string.regexp#d16969—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#28FFCA—
meta.template.expression#c9c9c9—
support.type.vendored.property-name, support.type.property-name, variable.other.less, variable.css, variable.scss, source.coffee.embedded#f2f2f2—
keyword#FF82D0—
keyword.operator#FF82D0—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python, storage.type, variable.language.this#FFEA77—
storage.type.function.arrow.js#FF82D0italic
keyword.other.unit#FFF09A—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#FF82D0—
support.function.git-rebase#28FFCA—
constant.sha.git-rebase#cecea8—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#EDEEFB—
variable.language#FF82D0—
meta.var.expr, punctuation.definition.block, keyword.operator.assignment.compound, punctuation.acessor.js, punctuation.separator.comma.js#FFEA77—
meta.function.js, meta.brace.round.js#4FC1FF—
keyword.operator.assignment#FFEA77—
keyword.operator.assignment.compound, keyword.operator.comparison, punctuation.section.property-list.begin.bracket.curly.css#FFEA77—
storage.type.function.arrow.js#FF3100—
string.quoted.double.html, meta.attribute.class.html#A1C1FF—
entity.name.tag#F1AEFF—
entity.other.attribute-name#FFEE8Ditalic
Plotka Theme by Vitoria Lopes - VS Code Theme