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#bf9eee10
  • activityBar.activeBorder#FF2B7780
  • activityBar.background#343746
  • activityBar.foreground#f6f6f4
  • activityBar.inactiveForeground#7b7f8b
  • activityBarBadge.background#FF2B77
  • activityBarBadge.foreground#f6f6f4
  • badge.background#44475A
  • badge.foreground#f6f6f4
  • breadcrumb.activeSelectionForeground#f6f6f4
  • breadcrumb.background#22192C
  • breadcrumb.focusForeground#f6f6f4
  • breadcrumb.foreground#7b7f8b
  • breadcrumbPicker.background#191A21
  • button.background#44475A
  • button.foreground#f6f6f4
  • contrastBorder#191A21
  • debugToolBar.background#262626
  • diffEditor.insertedTextBackground#62e88420
  • diffEditor.removedTextBackground#ee666650
  • dropdown.background#343746
  • dropdown.border#191A21
  • dropdown.foreground#f6f6f4
  • editor.background#22192C
  • editor.findMatchBackground#FFB86C80
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#262626
  • editor.foreground#f6f6f4
  • editor.hoverHighlightBackground#00ded350
  • editor.lineHighlightBorder#44475A
  • editor.rangeHighlightBackground#bf9eee15
  • editor.selectionBackground#44475A
  • editor.selectionHighlightBackground#424450
  • editor.snippetFinalTabstopHighlightBackground#22192C
  • editor.snippetFinalTabstopHighlightBorder#62e884
  • editor.snippetTabstopHighlightBackground#22192C
  • editor.snippetTabstopHighlightBorder#7b7f8b
  • editor.wordHighlightBackground#00ded350
  • editor.wordHighlightStrongBackground#62e88450
  • editorCodeLens.foreground#7b7f8b
  • editorError.foreground#ee6666
  • editorGroup.border#bf9eee
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#191A21
  • editorGutter.addedBackground#62e88480
  • editorGutter.deletedBackground#ee666680
  • editorGutter.modifiedBackground#00ded380
  • editorHoverWidget.background#22192C
  • editorHoverWidget.border#7b7f8b
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#7b7f8b
  • editorLink.activeForeground#00ded3
  • editorMarkerNavigation.background#262626
  • editorOverviewRuler.addedForeground#62e88480
  • editorOverviewRuler.border#191A21
  • editorOverviewRuler.currentContentForeground#62e884
  • editorOverviewRuler.deletedForeground#ee666680
  • editorOverviewRuler.errorForeground#ee666680
  • editorOverviewRuler.incomingContentForeground#bf9eee
  • editorOverviewRuler.infoForeground#00ded380
  • editorOverviewRuler.modifiedForeground#00ded380
  • editorOverviewRuler.selectionHighlightForeground#FFB86C
  • editorOverviewRuler.warningForeground#FFB86C80
  • editorOverviewRuler.wordHighlightForeground#00ded3
  • editorOverviewRuler.wordHighlightStrongForeground#62e884
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#262626
  • editorSuggestWidget.foreground#f6f6f4
  • editorSuggestWidget.selectedBackground#44475A
  • editorWarning.foreground#00ded3
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#262626
  • errorForeground#ee6666
  • extensionButton.prominentBackground#62e88490
  • extensionButton.prominentForeground#f6f6f4
  • extensionButton.prominentHoverBackground#62e88460
  • focusBorder#7b7f8b
  • foreground#f6f6f4
  • gitDecoration.conflictingResourceForeground#FFB86C
  • gitDecoration.deletedResourceForeground#ee6666
  • gitDecoration.ignoredResourceForeground#7b7f8b
  • gitDecoration.modifiedResourceForeground#00ded3
  • gitDecoration.untrackedResourceForeground#62e884
  • input.background#22192C
  • input.border#191A21
  • input.foreground#f6f6f4
  • input.placeholderForeground#7b7f8b
  • inputOption.activeBorder#bf9eee
  • inputValidation.errorBorder#ee6666
  • inputValidation.infoBorder#FF2B77
  • inputValidation.warningBorder#FFB86C
  • list.activeSelectionBackground#44475A
  • list.activeSelectionForeground#f6f6f4
  • list.dropBackground#44475A
  • list.errorForeground#ee6666
  • list.focusBackground#44475A75
  • list.highlightForeground#00ded3
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#FFB86C
  • listFilterWidget.background#343746
  • listFilterWidget.noMatchesOutline#ee6666
  • listFilterWidget.outline#424450
  • merge.currentHeaderBackground#62e88490
  • merge.incomingHeaderBackground#bf9eee90
  • notification.background#22192C
  • notification.buttonBackground#44475A
  • notification.buttonForeground#f6f6f4
  • notification.buttonHoverBackground#44475A75
  • notification.errorBackground#ee6666
  • notification.errorForeground#f6f6f4
  • notification.foreground#f6f6f4
  • notification.infoBackground#00ded3
  • notification.infoForeground#22192C
  • notification.warningBackground#FFB86C
  • notification.warningForeground#22192C
  • panel.background#22192C
  • panel.border#bf9eee
  • panelTitle.activeBorder#FF2B77
  • panelTitle.activeForeground#f6f6f4
  • panelTitle.inactiveForeground#7b7f8b
  • peekView.border#44475A
  • peekViewEditor.background#22192C
  • peekViewEditor.matchHighlightBackground#e7ee9880
  • peekViewResult.background#262626
  • peekViewResult.fileForeground#f6f6f4
  • peekViewResult.lineForeground#f6f6f4
  • peekViewResult.matchHighlightBackground#e7ee9880
  • peekViewResult.selectionBackground#44475A
  • peekViewResult.selectionForeground#f6f6f4
  • peekViewTitle.background#191A21
  • peekViewTitleDescription.foreground#7b7f8b
  • peekViewTitleLabel.foreground#f6f6f4
  • pickerGroup.border#bf9eee
  • pickerGroup.foreground#00ded3
  • progressBar.background#FF2B77
  • selection.background#bf9eee
  • settings.checkboxBackground#262626
  • settings.checkboxBorder#191A21
  • settings.checkboxForeground#f6f6f4
  • settings.dropdownBackground#262626
  • settings.dropdownBorder#191A21
  • settings.dropdownForeground#f6f6f4
  • settings.headerForeground#f6f6f4
  • settings.modifiedItemForeground#FFB86C
  • settings.modifiedItemIndicator#FFB86C
  • settings.numberInputBackground#262626
  • settings.numberInputBorder#191A21
  • settings.numberInputForeground#f6f6f4
  • settings.textInputBackground#262626
  • settings.textInputBorder#191A21
  • settings.textInputForeground#f6f6f4
  • sideBar.background#262626
  • sideBarSectionHeader.background#22192C
  • sideBarSectionHeader.border#191A21
  • sideBarTitle.foreground#f6f6f4
  • statusBar.background#191A21
  • statusBar.debuggingBackground#ee6666
  • statusBar.debuggingForeground#191A21
  • statusBar.foreground#f6f6f4
  • statusBar.noFolderBackground#191A21
  • statusBar.noFolderForeground#f6f6f4
  • statusBarItem.prominentBackground#ee6666
  • statusBarItem.prominentHoverBackground#FFB86C
  • statusBarItem.remoteBackground#bf9eee
  • statusBarItem.remoteForeground#f6f6f4
  • tab.activeBackground#22192C
  • tab.activeBorderTop#FF2B7780
  • tab.activeForeground#f6f6f4
  • tab.border#191A21
  • tab.inactiveBackground#262626
  • tab.inactiveForeground#7b7f8b
  • terminal.ansiBlack#262626
  • terminal.ansiBlue#bf9eee
  • 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#97e1f1
  • terminal.ansiGreen#62e884
  • terminal.ansiMagenta#f286c4
  • terminal.ansiRed#ee6666
  • terminal.ansiWhite#f6f6f4
  • terminal.ansiYellow#e7ee98
  • terminal.background#22192C
  • terminal.foreground#f6f6f4
  • titleBar.activeBackground#262626
  • titleBar.activeForeground#f6f6f4
  • titleBar.inactiveBackground#191A21
  • titleBar.inactiveForeground#7b7f8b
  • walkThrough.embeddedEditorBackground#262626

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#bf9eee
source#f6f6f4
meta.diff, meta.diff.header#7b7f8b
markup.inserted#62e884
markup.deleted#ee6666
markup.changed#FFB86C
invalid#ee6666underline italic
invalid.deprecated#f6f6f4underline italic
entity.name.filename#e7ee98
markup.error#ee6666
markup.underlineunderline
markup.bold#FFB86Cbold
markup.heading#bf9eeebold
markup.italic#e7ee98italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#00ded3
markup.inline.raw, markup.raw.restructuredtext#62e884
markup.underline.link, markup.underline.link.image#00ded3
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#FF2B77
entity.name.directive.restructuredtext, markup.quote#e7ee98italic
meta.separator.markdown#7b7f8b
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#62e884
punctuation.definition.constant.restructuredtext#bf9eee
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#bf9eee
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#e7ee98
entity.name.type.class, entity.name.class#00ded3normal
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#bf9eeeitalic
entity.other.inherited-class#00ded3italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7b7f8b
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#FF2B77
comment.block.documentation entity.name.type#00ded3italic
comment.block.documentation entity.name.type punctuation.definition.bracket#00ded3
comment.block.documentation variable#FFB86Citalic
constant, variable.other.constant#bf9eee
constant.character.escape, constant.character.string.escape, constant.regexp#FF2B77
entity.name.tag#FF2B77
entity.other.attribute-name.parent-selector#FF2B77
entity.other.attribute-name#62e884italic
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#62e884
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#62e884italic
meta.decorator variable.other.object#62e884
keyword, punctuation.definition.keyword#FF2B77
keyword.control.new, keyword.operator.newbold
meta.selector#FF2B77
support#00ded3italic
support.function.magic, support.variable, variable.other.predefined#bf9eeeregular
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#FF2B77
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#FF2B77
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#00ded3
constant.other.date, constant.other.timestamp#FFB86C
variable.other.alias.yaml#62e884italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#FF2B77regular
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#00ded3italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FFB86C
storage.modifier#FF2B77
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#e7ee98
punctuation.definition.group.capture.regexp#FF2B77
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ee6666
punctuation.definition.character-class.regexp#00ded3
punctuation.definition.group.regexp#FFB86C
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ee6666
meta.assertion.look-ahead.regexp#62e884
string#e7ee98
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#FFB86Citalic
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#e7ee98
meta.selectionset.graphql meta.arguments variable#f6f6f4
entity.name.fragment.graphql, variable.fragment.graphql#00ded3
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#bf9eee
support.constant#bf9eeenormal
meta.scope.prerequisites.makefile#e7ee98
meta.attribute-selector.scss#e7ee98
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#f6f6f4
meta.preprocessor.haskell#7b7f8b