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#B678FF10
  • activityBar.activeBorder#FF79C680
  • activityBar.background#343746
  • activityBar.foreground#DDDDDD
  • activityBar.inactiveForeground#6272A4
  • activityBarBadge.background#FF79C6
  • activityBarBadge.foreground#DDDDDD
  • badge.background#44475A
  • badge.foreground#DDDDDD
  • breadcrumb.activeSelectionForeground#DDDDDD
  • breadcrumb.background#21222C
  • breadcrumb.focusForeground#DDDDDD
  • breadcrumb.foreground#6272A4
  • breadcrumbPicker.background#191A21
  • button.background#44475A
  • button.foreground#DDDDDD
  • contrastBorder#191A21
  • debugToolBar.background#21222C
  • diffEditor.insertedTextBackground#90CEE820
  • diffEditor.removedTextBackground#FF555550
  • dropdown.background#343746
  • dropdown.border#191A21
  • dropdown.foreground#DDDDDD
  • editor.background#282c34
  • editor.findMatchBackground#FFB86C80
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#21222C
  • editor.foreground#DDDDDD
  • editor.hoverHighlightBackground#191A21
  • editor.lineHighlightBorder#44475A
  • editor.rangeHighlightBackground#B678FF15
  • editor.selectionBackground#44475A
  • editor.selectionHighlightBackground#424450
  • editor.snippetFinalTabstopHighlightBackground#282c34
  • editor.snippetFinalTabstopHighlightBorder#90CEE8
  • editor.snippetTabstopHighlightBackground#282c34
  • editor.snippetTabstopHighlightBorder#6272A4
  • editor.wordHighlightBackground#90CEE850
  • editor.wordHighlightStrongBackground#90CEE850
  • editorCodeLens.foreground#6272A4
  • editorError.foreground#FF5555
  • editorGroup.border#B678FF
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#191A21
  • editorGutter.addedBackground#90CEE880
  • editorGutter.deletedBackground#FF555580
  • editorGutter.modifiedBackground#90CEE880
  • editorHoverWidget.background#282c34
  • editorHoverWidget.border#6272A4
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#424450
  • editorLineNumber.foreground#6272A4
  • editorLink.activeForeground#90CEE8
  • editorMarkerNavigation.background#21222C
  • editorOverviewRuler.addedForeground#90CEE880
  • editorOverviewRuler.border#191A21
  • editorOverviewRuler.currentContentForeground#90CEE8
  • editorOverviewRuler.deletedForeground#FF555580
  • editorOverviewRuler.errorForeground#FF555580
  • editorOverviewRuler.incomingContentForeground#B678FF
  • editorOverviewRuler.infoForeground#90CEE880
  • editorOverviewRuler.modifiedForeground#90CEE880
  • editorOverviewRuler.selectionHighlightForeground#FFB86C
  • editorOverviewRuler.warningForeground#FFB86C80
  • editorOverviewRuler.wordHighlightForeground#90CEE8
  • editorOverviewRuler.wordHighlightStrongForeground#90CEE8
  • editorRuler.foreground#424450
  • editorSuggestWidget.background#21222C
  • editorSuggestWidget.foreground#DDDDDD
  • editorSuggestWidget.selectedBackground#44475A
  • editorWarning.foreground#90CEE8
  • editorWhitespace.foreground#424450
  • editorWidget.background#21222C
  • errorForeground#FF5555
  • extensionButton.prominentBackground#90CEE890
  • extensionButton.prominentForeground#DDDDDD
  • extensionButton.prominentHoverBackground#90CEE860
  • focusBorder#6272A4
  • foreground#DDDDDD
  • gitDecoration.conflictingResourceForeground#FFB86C
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.ignoredResourceForeground#6272A4
  • gitDecoration.modifiedResourceForeground#90CEE8
  • gitDecoration.untrackedResourceForeground#90CEE8
  • input.background#282c34
  • input.border#191A21
  • input.foreground#DDDDDD
  • input.placeholderForeground#6272A4
  • inputOption.activeBorder#B678FF
  • inputValidation.errorBorder#FF5555
  • inputValidation.infoBorder#FF79C6
  • inputValidation.warningBorder#FFB86C
  • list.activeSelectionBackground#44475A
  • list.activeSelectionForeground#DDDDDD
  • list.dropBackground#44475A
  • list.errorForeground#FF5555
  • list.focusBackground#44475A75
  • list.highlightForeground#90CEE8
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#FFB86C
  • listFilterWidget.background#343746
  • listFilterWidget.noMatchesOutline#FF5555
  • listFilterWidget.outline#424450
  • merge.currentHeaderBackground#90CEE890
  • merge.incomingHeaderBackground#B678FF90
  • notification.background#282c34
  • notification.buttonBackground#44475A
  • notification.buttonForeground#DDDDDD
  • notification.buttonHoverBackground#44475A75
  • notification.errorBackground#FF5555
  • notification.errorForeground#DDDDDD
  • notification.foreground#DDDDDD
  • notification.infoBackground#90CEE8
  • notification.infoForeground#282c34
  • notification.warningBackground#FFB86C
  • notification.warningForeground#282c34
  • panel.background#282c34
  • panel.border#B678FF
  • panelTitle.activeBorder#FF79C6
  • panelTitle.activeForeground#DDDDDD
  • panelTitle.inactiveForeground#6272A4
  • peekView.border#44475A
  • peekViewEditor.background#282c34
  • peekViewEditor.matchHighlightBackground#E8DD9080
  • peekViewResult.background#21222C
  • peekViewResult.fileForeground#DDDDDD
  • peekViewResult.lineForeground#DDDDDD
  • peekViewResult.matchHighlightBackground#E8DD9080
  • peekViewResult.selectionBackground#44475A
  • peekViewResult.selectionForeground#DDDDDD
  • peekViewTitle.background#191A21
  • peekViewTitleDescription.foreground#6272A4
  • peekViewTitleLabel.foreground#DDDDDD
  • pickerGroup.border#B678FF
  • pickerGroup.foreground#90CEE8
  • progressBar.background#FF79C6
  • selection.background#B678FF
  • settings.checkboxBackground#21222C
  • settings.checkboxBorder#191A21
  • settings.checkboxForeground#DDDDDD
  • settings.dropdownBackground#21222C
  • settings.dropdownBorder#191A21
  • settings.dropdownForeground#DDDDDD
  • settings.headerForeground#DDDDDD
  • settings.modifiedItemForeground#FFB86C
  • settings.modifiedItemIndicator#FFB86C
  • settings.numberInputBackground#21222C
  • settings.numberInputBorder#191A21
  • settings.numberInputForeground#DDDDDD
  • settings.textInputBackground#21222C
  • settings.textInputBorder#191A21
  • settings.textInputForeground#DDDDDD
  • sideBar.background#21252b
  • sideBarSectionHeader.background#282c34
  • sideBarSectionHeader.border#191A21
  • sideBarTitle.foreground#DDDDDD
  • statusBar.background#191A21
  • statusBar.debuggingBackground#FF5555
  • statusBar.debuggingForeground#191A21
  • statusBar.foreground#DDDDDD
  • statusBar.noFolderBackground#191A21
  • statusBar.noFolderForeground#DDDDDD
  • statusBarItem.prominentBackground#FF5555
  • statusBarItem.prominentHoverBackground#FFB86C
  • statusBarItem.remoteBackground#B678FF
  • statusBarItem.remoteForeground#DDDDDD
  • tab.activeBackground#282c34
  • tab.activeBorder#FF79C680
  • tab.activeForeground#DDDDDD
  • tab.border#191A21
  • tab.inactiveBackground#21222C
  • tab.inactiveForeground#6272A4
  • terminal.ansiBlack#21222C
  • terminal.ansiBlue#B678FF
  • terminal.ansiBrightBlack#6272A4
  • terminal.ansiBrightBlue#D6ACFF
  • terminal.ansiBrightCyan#A4FFFF
  • terminal.ansiBrightGreen#69FF94
  • terminal.ansiBrightMagenta#FF92DF
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFFA5
  • terminal.ansiCyan#90CEE8
  • terminal.ansiGreen#90CEE8
  • terminal.ansiMagenta#FF79C6
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#DDDDDD
  • terminal.ansiYellow#E8DD90
  • terminal.background#282c34
  • terminal.foreground#DDDDDD
  • titleBar.activeBackground#21222C
  • titleBar.activeForeground#DDDDDD
  • titleBar.inactiveBackground#191A21
  • titleBar.inactiveForeground#6272A4
  • walkThrough.embeddedEditorBackground#21222C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#B678FF
source#DDDDDD
meta.diff, meta.diff.header#6272A4
markup.inserted#90CEE8
markup.deleted#FF5555
markup.changed#FFB86C
invalid#FF5555underline italic
invalid.deprecated#DDDDDDunderline italic
entity.name.filename#E8DD90
markup.error#FF5555
markup.underlineunderline
markup.bold#FFB86Cbold
markup.heading#B678FFbold
markup.italic#E8DD90italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#90CEE8
markup.inline.raw, markup.raw.restructuredtext#90CEE8
markup.underline.link, markup.underline.link.image#90CEE8
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#FF79C6
entity.name.directive.restructuredtext, markup.quote#E8DD90italic
meta.separator.markdown#6272A4
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#90CEE8
punctuation.definition.constant.restructuredtext#B678FF
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#B678FF
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#DDDDDD
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#E8DD90
entity.name.type.class, entity.name.class#90CEE8normal
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#B678FFitalic
entity.other.inherited-class#90CEE8italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6272A4
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#FF79C6
comment.block.documentation entity.name.type#90CEE8italic
comment.block.documentation entity.name.type punctuation.definition.bracket#90CEE8
comment.block.documentation variable#FFB86Citalic
constant, variable.other.constant#B678FF
constant.character.escape, constant.character.string.escape, constant.regexp#FF79C6
entity.name.tag#FF79C6
entity.other.attribute-name.parent-selector#FF79C6
entity.other.attribute-name#90CEE8italic
entity.name.function, meta.function-call.generic, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#90CEE8
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#FFB86Citalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#90CEE8italic
meta.decorator variable.other.object#90CEE8
keyword, punctuation.definition.keyword#FF79C6
keyword.control.new, keyword.operator.newbold
meta.selector#FF79C6
support#90CEE8italic
support.function.magic, support.variable, variable.other.predefined#B678FFregular
support.function, support.type.property-nameregular
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#FF79C6
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#DDDDDD
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile#FF79C6
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#90CEE8
constant.other.date, constant.other.timestamp#FFB86C
variable.other.alias.yaml#90CEE8italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#FF79C6regular
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml#90CEE8italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FFB86C
storage.modifier#FF79C6
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#E8DD90
punctuation.definition.group.capture.regexp#FF79C6
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF5555
punctuation.definition.character-class.regexp#90CEE8
punctuation.definition.group.regexp#FFB86C
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF5555
meta.assertion.look-ahead.regexp#90CEE8
string#E8DD90
punctuation.definition.string.begin, punctuation.definition.string.end#E9F284
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#8BE9FE
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape#6272A4
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#DDDDDD
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#FFB86Citalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#DDDDDDnormal
meta.selectionset.graphql variable#E8DD90
meta.selectionset.graphql meta.arguments variable#DDDDDD
entity.name.fragment.graphql, variable.fragment.graphql#90CEE8
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell#DDDDDD
source.shell variable.other#B678FF
support.constant#B678FFnormal
meta.scope.prerequisites.makefile#E8DD90
meta.attribute-selector.scss#E8DD90
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#DDDDDD
meta.preprocessor.haskell#6272A4
ThemeDatabase All Themes by enes ozturk - VS Code Theme