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#9580ff10
  • activityBar.activeBorder#ff81c180
  • activityBar.background#2b2640
  • activityBar.foreground#7c73ae
  • activityBar.inactiveForeground#6272A4
  • activityBarBadge.background#ff81c1
  • activityBarBadge.foreground#fdfdf8
  • badge.background#44475A
  • badge.foreground#fdfdf8
  • breadcrumb.activeSelectionForeground#fdfdf8
  • breadcrumb.background#22212c
  • breadcrumb.focusForeground#fdfdf8
  • breadcrumb.foreground#7d74af
  • breadcrumbPicker.background#191A21
  • button.background#44475A
  • button.foreground#fdfdf8
  • button.secondaryBackground#282A36
  • button.secondaryForeground#fdfdf8
  • button.secondaryHoverBackground#343746
  • debugToolBar.background#21222C
  • diffEditor.insertedTextBackground#8dff8220
  • diffEditor.removedTextBackground#FF555550
  • dropdown.background#343746
  • dropdown.border#191A21
  • dropdown.foreground#fdfdf8
  • editor.background#22212c
  • editor.findMatchBackground#ffca8080
  • editor.findMatchHighlightBackground#F0F0F040
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#21222C80
  • editor.foreground#fdfdf8
  • editor.hoverHighlightBackground#85fff450
  • editor.lineHighlightBorder#44475A
  • editor.rangeHighlightBackground#9580ff15
  • editor.selectionBackground#44475A
  • editor.selectionHighlightBackground#424450
  • editor.snippetFinalTabstopHighlightBackground#282A36
  • editor.snippetFinalTabstopHighlightBorder#8dff82
  • editor.snippetTabstopHighlightBackground#282A36
  • editor.snippetTabstopHighlightBorder#6272A4
  • editor.wordHighlightBackground#85fff450
  • editor.wordHighlightStrongBackground#8dff8250
  • editorBracketHighlight.foreground1#fdfdf8
  • editorBracketHighlight.foreground2#ff81c1
  • editorBracketHighlight.foreground3#85fff4
  • editorBracketHighlight.foreground4#8dff82
  • editorBracketHighlight.foreground5#9580ff
  • editorBracketHighlight.foreground6#ffca80
  • editorBracketHighlight.unexpectedBracket.foreground#FF5555
  • editorCodeLens.foreground#6272A4
  • editorError.foreground#FF5555
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#0b0a10
  • editorGutter.addedBackground#8dff8280
  • editorGutter.deletedBackground#FF555580
  • editorGutter.modifiedBackground#85fff480
  • editorHoverWidget.background#282A36
  • editorHoverWidget.border#6272A4
  • editorIndentGuide.activeBackground#F0F0F045
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#7d73ae
  • editorLink.activeForeground#85fff4
  • editorMarkerNavigation.background#21222C
  • editorOverviewRuler.addedForeground#8dff8280
  • editorOverviewRuler.border#191A21
  • editorOverviewRuler.currentContentForeground#8dff82
  • editorOverviewRuler.deletedForeground#FF555580
  • editorOverviewRuler.errorForeground#FF555580
  • editorOverviewRuler.incomingContentForeground#9580ff
  • editorOverviewRuler.infoForeground#85fff480
  • editorOverviewRuler.modifiedForeground#85fff480
  • editorOverviewRuler.selectionHighlightForeground#ffca80
  • editorOverviewRuler.warningForeground#ffca8080
  • editorOverviewRuler.wordHighlightForeground#85fff4
  • editorOverviewRuler.wordHighlightStrongForeground#8dff82
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#21222C
  • editorSuggestWidget.foreground#fdfdf8
  • editorSuggestWidget.selectedBackground#44475A
  • editorWarning.foreground#85fff4
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#21222C
  • errorForeground#FF5555
  • extensionButton.prominentBackground#8dff8290
  • extensionButton.prominentForeground#fdfdf8
  • extensionButton.prominentHoverBackground#8dff8260
  • focusBorder#6272A4
  • foreground#fdfdf8
  • gitDecoration.conflictingResourceForeground#ffca80
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.ignoredResourceForeground#6272A4
  • gitDecoration.modifiedResourceForeground#85fff4
  • gitDecoration.untrackedResourceForeground#8dff82
  • input.background#282A36
  • input.border#191A21
  • input.foreground#fdfdf8
  • input.placeholderForeground#6272A4
  • inputOption.activeBorder#9580ff
  • inputValidation.errorBorder#FF5555
  • inputValidation.infoBorder#ff81c1
  • inputValidation.warningBorder#ffca80
  • list.activeSelectionBackground#44475A
  • list.activeSelectionForeground#fdfdf8
  • list.dropBackground#44475A
  • list.errorForeground#FF5555
  • list.focusBackground#44475A75
  • list.highlightForeground#85fff4
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#ffca80
  • listFilterWidget.background#343746
  • listFilterWidget.noMatchesOutline#FF5555
  • listFilterWidget.outline#424450
  • merge.currentHeaderBackground#8dff8290
  • merge.incomingHeaderBackground#9580ff90
  • panel.background#282A36
  • panel.border#9580ff
  • panelTitle.activeBorder#ff81c1
  • panelTitle.activeForeground#fdfdf8
  • panelTitle.inactiveForeground#6272A4
  • peekView.border#44475A
  • peekViewEditor.background#282A36
  • peekViewEditor.matchHighlightBackground#ffff8280
  • peekViewResult.background#21222C
  • peekViewResult.fileForeground#fdfdf8
  • peekViewResult.lineForeground#fdfdf8
  • peekViewResult.matchHighlightBackground#ffff8280
  • peekViewResult.selectionBackground#44475A
  • peekViewResult.selectionForeground#fdfdf8
  • peekViewTitle.background#191A21
  • peekViewTitleDescription.foreground#6272A4
  • peekViewTitleLabel.foreground#fdfdf8
  • pickerGroup.border#9580ff
  • pickerGroup.foreground#85fff4
  • progressBar.background#ff81c1
  • selection.background#9580ff
  • settings.checkboxBackground#21222C
  • settings.checkboxBorder#191A21
  • settings.checkboxForeground#fdfdf8
  • settings.dropdownBackground#21222C
  • settings.dropdownBorder#191A21
  • settings.dropdownForeground#fdfdf8
  • settings.headerForeground#fdfdf8
  • settings.modifiedItemIndicator#ffca80
  • settings.numberInputBackground#21222C
  • settings.numberInputBorder#191A21
  • settings.numberInputForeground#fdfdf8
  • settings.textInputBackground#21222C
  • settings.textInputBorder#191A21
  • settings.textInputForeground#fdfdf8
  • sideBar.background#21222C
  • sideBarSectionHeader.background#282A36
  • sideBarTitle.foreground#fdfdf8
  • statusBar.background#21222C
  • statusBar.debuggingBackground#FF5555
  • statusBar.debuggingForeground#191A21
  • statusBar.foreground#fdfdf8
  • statusBar.noFolderBackground#191A21
  • statusBar.noFolderForeground#fdfdf8
  • statusBarItem.prominentBackground#FF5555
  • statusBarItem.prominentHoverBackground#ffca80
  • statusBarItem.remoteBackground#9580ff
  • statusBarItem.remoteForeground#282A36
  • tab.activeBackground#22212c
  • tab.activeBorderTop#ff81c180
  • tab.activeForeground#fdfdf8
  • tab.border#191A21
  • tab.inactiveBackground#151320
  • tab.inactiveForeground#7d74af
  • terminal.ansiBlack#21222C
  • terminal.ansiBlue#9580ff
  • terminal.ansiBrightBlack#7d73ae
  • terminal.ansiBrightBlue#9580ff
  • terminal.ansiBrightCyan#85fff4
  • terminal.ansiBrightGreen#8dff82
  • terminal.ansiBrightMagenta#ff81c1
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#ffff82
  • terminal.ansiCyan#85fff4
  • terminal.ansiGreen#8dff82
  • terminal.ansiMagenta#ff81c1
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#fdfdf8
  • terminal.ansiYellow#ffff82
  • terminal.background#22212c
  • terminal.foreground#fdfdf8
  • titleBar.activeBackground#282A36
  • titleBar.activeForeground#fdfdf8
  • titleBar.inactiveBackground#191A21
  • titleBar.inactiveForeground#6272A4
  • walkThrough.embeddedEditorBackground#21222C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#9580ff—
meta.diff, meta.diff.header#6272A4—
markup.inserted#8dff82—
markup.deleted#FF5555—
markup.changed#ffca80—
invalid#FF5555underline italic
invalid.deprecated#fdfdf8underline italic
entity.name.filename#ffff82—
markup.error#FF5555—
markup.underline—underline
markup.bold#ffca80bold
markup.heading#9580ffbold
markup.italic#ffff82italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#85fff4—
markup.inline.raw, markup.raw.restructuredtext#8dff82—
markup.underline.link, markup.underline.link.image#85fff4—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ff81c1—
entity.name.directive.restructuredtext, markup.quote#ffff82italic
meta.separator.markdown#6272A4—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#8dff82—
punctuation.definition.constant.restructuredtext#9580ff—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#9580ff—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#fdfdf8—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffff82—
entity.name.type.class, entity.name.class#85fff4normal
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#9580ffitalic
entity.other.inherited-class#85fff4italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7d73ae—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ff81c1—
comment.block.documentation entity.name.type#85fff4italic
comment.block.documentation entity.name.type punctuation.definition.bracket#85fff4—
comment.block.documentation variable#ffca80italic
constant, variable.other.constant#9580ff—
constant.character.escape, constant.character.string.escape, constant.regexp#ff81c1—
entity.name.tag#ff81c1—
entity.other.attribute-name.parent-selector#ff81c1—
entity.other.attribute-name#8dff82italic
entity.name.function, 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#8dff82—
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#ffca80italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#8dff82italic
meta.decorator variable.other.object#8dff82—
keyword, punctuation.definition.keyword#ff81c1—
keyword.control.new, keyword.operator.new—bold
meta.selector#ff81c1—
support#85fff4italic
support.function.magic, support.variable, variable.other.predefined#9580ffregular
support.function, support.type.property-name—regular
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#ff81c1—
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, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#fdfdf8—
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#ff81c1—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#85fff4—
constant.other.date, constant.other.timestamp#ffca80—
variable.other.alias.yaml#8dff82italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ff81c1regular
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#85fff4italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ffca80—
storage.modifier#ff81c1—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffff82—
punctuation.definition.group.capture.regexp#ff81c1—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF5555—
punctuation.definition.character-class.regexp#85fff4—
punctuation.definition.group.regexp#ffca80—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF5555—
meta.assertion.look-ahead.regexp#8dff82—
string#ffff82—
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#7d73ae—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#fdfdf8—
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#ffca80italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#fdfdf8normal
meta.selectionset.graphql variable#ffff82—
meta.selectionset.graphql meta.arguments variable#fdfdf8—
entity.name.fragment.graphql, variable.fragment.graphql#85fff4—
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#fdfdf8—
source.shell variable.other#9580ff—
support.constant#9580ffnormal
meta.scope.prerequisites.makefile#ffff82—
meta.attribute-selector.scss#ffff82—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#fdfdf8—
meta.preprocessor.haskell#7d73ae—
log.error#FF5555bold
log.warning#ffff82bold