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#9d8df210
  • activityBar.activeBorder#f28dbf80
  • activityBar.background#2B2640
  • activityBar.foreground#f6f6f4
  • activityBar.inactiveForeground#7b7f8b
  • activityBarBadge.background#f28dbf
  • activityBarBadge.foreground#f6f6f4
  • badge.background#44475A
  • badge.foreground#f6f6f4
  • breadcrumb.activeSelectionForeground#f6f6f4
  • breadcrumb.background#22212C
  • breadcrumb.focusForeground#f6f6f4
  • breadcrumb.foreground#7b7f8b
  • breadcrumbPicker.background#0B0A10
  • button.background#44475A
  • button.foreground#f6f6f4
  • contrastBorder#0B0A10
  • debugToolBar.background#151320
  • diffEditor.insertedTextBackground#95f28d20
  • diffEditor.removedTextBackground#ee666650
  • dropdown.background#2B2640
  • dropdown.border#0B0A10
  • dropdown.foreground#f6f6f4
  • editor.background#22212C
  • editor.findMatchBackground#FF958080
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#2B264075
  • editor.foldBackground#151320
  • editor.foreground#f6f6f4
  • editor.hoverHighlightBackground#8df2e150
  • editor.lineHighlightBorder#44475A
  • editor.rangeHighlightBackground#9d8df215
  • editor.selectionBackground#44475A
  • editor.selectionHighlightBackground#454158
  • editor.snippetFinalTabstopHighlightBackground#22212C
  • editor.snippetFinalTabstopHighlightBorder#95f28d
  • editor.snippetTabstopHighlightBackground#22212C
  • editor.snippetTabstopHighlightBorder#7b7f8b
  • editor.wordHighlightBackground#8df2e150
  • editor.wordHighlightStrongBackground#95f28d50
  • editorCodeLens.foreground#7b7f8b
  • editorError.foreground#ee6666
  • editorGroup.border#9d8df2
  • editorGroup.dropBackground#2B264070
  • editorGroupHeader.tabsBackground#0B0A10
  • editorGutter.addedBackground#95f28d80
  • editorGutter.deletedBackground#ee666680
  • editorGutter.modifiedBackground#8df2e180
  • editorHoverWidget.background#22212C
  • editorHoverWidget.border#7b7f8b
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#7b7f8b
  • editorLink.activeForeground#8df2e1
  • editorMarkerNavigation.background#151320
  • editorOverviewRuler.addedForeground#95f28d80
  • editorOverviewRuler.border#0B0A10
  • editorOverviewRuler.currentContentForeground#95f28d
  • editorOverviewRuler.deletedForeground#ee666680
  • editorOverviewRuler.errorForeground#ee666680
  • editorOverviewRuler.incomingContentForeground#9d8df2
  • editorOverviewRuler.infoForeground#8df2e180
  • editorOverviewRuler.modifiedForeground#8df2e180
  • editorOverviewRuler.selectionHighlightForeground#FF9580
  • editorOverviewRuler.warningForeground#FF958080
  • editorOverviewRuler.wordHighlightForeground#8df2e1
  • editorOverviewRuler.wordHighlightStrongForeground#95f28d
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#151320
  • editorSuggestWidget.foreground#f6f6f4
  • editorSuggestWidget.selectedBackground#44475A
  • editorWarning.foreground#8df2e1
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#151320
  • errorForeground#ee6666
  • extensionButton.prominentBackground#95f28d90
  • extensionButton.prominentForeground#f6f6f4
  • extensionButton.prominentHoverBackground#95f28d60
  • focusBorder#7b7f8b
  • foreground#f6f6f4
  • gitDecoration.conflictingResourceForeground#FF9580
  • gitDecoration.deletedResourceForeground#ee6666
  • gitDecoration.ignoredResourceForeground#7b7f8b
  • gitDecoration.modifiedResourceForeground#8df2e1
  • gitDecoration.untrackedResourceForeground#95f28d
  • input.background#22212C
  • input.border#0B0A10
  • input.foreground#f6f6f4
  • input.placeholderForeground#7b7f8b
  • inputOption.activeBorder#9d8df2
  • inputValidation.errorBorder#ee6666
  • inputValidation.infoBorder#f28dbf
  • inputValidation.warningBorder#FF9580
  • list.activeSelectionBackground#44475A
  • list.activeSelectionForeground#f6f6f4
  • list.dropBackground#44475A
  • list.errorForeground#ee6666
  • list.focusBackground#2B264075
  • list.highlightForeground#8df2e1
  • list.hoverBackground#2B264075
  • list.inactiveSelectionBackground#2B264075
  • list.warningForeground#FF9580
  • listFilterWidget.background#2B2640
  • listFilterWidget.noMatchesOutline#ee6666
  • listFilterWidget.outline#454158
  • merge.currentHeaderBackground#95f28d90
  • merge.incomingHeaderBackground#9d8df290
  • notification.background#22212C
  • notification.buttonBackground#44475A
  • notification.buttonForeground#f6f6f4
  • notification.buttonHoverBackground#2B264075
  • notification.errorBackground#ee6666
  • notification.errorForeground#f6f6f4
  • notification.foreground#f6f6f4
  • notification.infoBackground#8df2e1
  • notification.infoForeground#22212C
  • notification.warningBackground#FF9580
  • notification.warningForeground#22212C
  • panel.background#22212C
  • panel.border#9d8df2
  • panelTitle.activeBorder#f28dbf
  • panelTitle.activeForeground#f6f6f4
  • panelTitle.inactiveForeground#7b7f8b
  • peekView.border#44475A
  • peekViewEditor.background#22212C
  • peekViewEditor.matchHighlightBackground#f2f28d80
  • peekViewResult.background#151320
  • peekViewResult.fileForeground#f6f6f4
  • peekViewResult.lineForeground#f6f6f4
  • peekViewResult.matchHighlightBackground#f2f28d80
  • peekViewResult.selectionBackground#44475A
  • peekViewResult.selectionForeground#f6f6f4
  • peekViewTitle.background#0B0A10
  • peekViewTitleDescription.foreground#7b7f8b
  • peekViewTitleLabel.foreground#f6f6f4
  • pickerGroup.border#9d8df2
  • pickerGroup.foreground#8df2e1
  • progressBar.background#f28dbf
  • selection.background#9d8df2
  • settings.checkboxBackground#151320
  • settings.checkboxBorder#0B0A10
  • settings.checkboxForeground#f6f6f4
  • settings.dropdownBackground#151320
  • settings.dropdownBorder#0B0A10
  • settings.dropdownForeground#f6f6f4
  • settings.headerForeground#f6f6f4
  • settings.modifiedItemForeground#FF9580
  • settings.modifiedItemIndicator#FF9580
  • settings.numberInputBackground#151320
  • settings.numberInputBorder#0B0A10
  • settings.numberInputForeground#f6f6f4
  • settings.textInputBackground#151320
  • settings.textInputBorder#0B0A10
  • settings.textInputForeground#f6f6f4
  • sideBar.background#151320
  • sideBarSectionHeader.background#22212C
  • sideBarSectionHeader.border#0B0A10
  • sideBarTitle.foreground#f6f6f4
  • statusBar.background#0B0A10
  • statusBar.debuggingBackground#ee6666
  • statusBar.debuggingForeground#0B0A10
  • statusBar.foreground#f6f6f4
  • statusBar.noFolderBackground#0B0A10
  • statusBar.noFolderForeground#f6f6f4
  • statusBarItem.prominentBackground#ee6666
  • statusBarItem.prominentHoverBackground#FF9580
  • statusBarItem.remoteBackground#9d8df2
  • statusBarItem.remoteForeground#f6f6f4
  • tab.activeBackground#22212C
  • tab.activeBorderTop#f28dbf80
  • tab.activeForeground#f6f6f4
  • tab.border#0B0A10
  • tab.inactiveBackground#151320
  • tab.inactiveForeground#7b7f8b
  • terminal.ansiBlack#262626
  • terminal.ansiBlue#9d8df2
  • terminal.ansiBrightBlack#7b7f8b
  • terminal.ansiBrightBlue#d6b4f7
  • terminal.ansiBrightCyan#adf6f6
  • terminal.ansiBrightGreen#78f09a
  • terminal.ansiBrightMagenta#f49dda
  • terminal.ansiBrightRed#f07c7c
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f6f6ae
  • terminal.ansiCyan#8df2e1
  • terminal.ansiGreen#95f28d
  • terminal.ansiMagenta#f28dbf
  • terminal.ansiRed#ee6666
  • terminal.ansiWhite#f6f6f4
  • terminal.ansiYellow#f2f28d
  • terminal.background#22212C
  • terminal.foreground#f6f6f4
  • titleBar.activeBackground#151320
  • titleBar.activeForeground#f6f6f4
  • titleBar.inactiveBackground#0B0A10
  • titleBar.inactiveForeground#7b7f8b
  • walkThrough.embeddedEditorBackground#151320

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#9d8df2
source#f6f6f4
meta.diff, meta.diff.header#7b7f8b
markup.inserted#95f28d
markup.deleted#ee6666
markup.changed#FF9580
invalid#ee6666underline italic
invalid.deprecated#f6f6f4underline italic
entity.name.filename#f2f28d
markup.error#ee6666
markup.underlineunderline
markup.bold#FF9580bold
markup.heading#9d8df2bold
markup.italic#f2f28ditalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#8df2e1
markup.inline.raw, markup.raw.restructuredtext#95f28d
markup.underline.link, markup.underline.link.image#8df2e1
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#f28dbf
entity.name.directive.restructuredtext, markup.quote#f2f28ditalic
meta.separator.markdown#7b7f8b
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#95f28d
punctuation.definition.constant.restructuredtext#9d8df2
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#9d8df2
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#f6f6f4
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#f2f28d
entity.name.type.class, entity.name.class#8df2e1normal
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#9d8df2italic
entity.other.inherited-class#8df2e1italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7b7f8b
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#f28dbf
comment.block.documentation entity.name.type#8df2e1italic
comment.block.documentation entity.name.type punctuation.definition.bracket#8df2e1
comment.block.documentation variable#FF9580italic
constant, variable.other.constant#9d8df2
constant.character.escape, constant.character.string.escape, constant.regexp#f28dbf
entity.name.tag#f28dbf
entity.other.attribute-name.parent-selector#f28dbf
entity.other.attribute-name#95f28ditalic
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#95f28d
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#FF9580italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#95f28ditalic
meta.decorator variable.other.object#95f28d
keyword, punctuation.definition.keyword#f28dbf
keyword.control.new, keyword.operator.newbold
meta.selector#f28dbf
support#8df2e1italic
support.function.magic, support.variable, variable.other.predefined#9d8df2regular
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#f28dbf
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#f6f6f4
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#f28dbf
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#8df2e1
constant.other.date, constant.other.timestamp#FF9580
variable.other.alias.yaml#95f28ditalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#f28dbfregular
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#8df2e1italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FF9580
storage.modifier#f28dbf
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#f2f28d
punctuation.definition.group.capture.regexp#f28dbf
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ee6666
punctuation.definition.character-class.regexp#8df2e1
punctuation.definition.group.regexp#FF9580
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ee6666
meta.assertion.look-ahead.regexp#95f28d
string#f2f28d
punctuation.definition.string.begin, punctuation.definition.string.end#dee492
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#97e2f2
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#7b7f8b
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#f6f6f4
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#FF9580italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#f6f6f4normal
meta.selectionset.graphql variable#f2f28d
meta.selectionset.graphql meta.arguments variable#f6f6f4
entity.name.fragment.graphql, variable.fragment.graphql#8df2e1
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#f6f6f4
source.shell variable.other#9d8df2
support.constant#9d8df2normal
meta.scope.prerequisites.makefile#f2f28d
meta.attribute-selector.scss#f2f28d
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#f6f6f4
meta.preprocessor.haskell#7b7f8b