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#BD93F910
  • activityBar.activeBorder#FF79C680
  • activityBar.background#191A21
  • activityBar.foreground#F5F5EF
  • activityBar.inactiveForeground#6272A4
  • activityBarBadge.background#FF79C6
  • activityBarBadge.foreground#F5F5EF
  • badge.background#44475A
  • badge.foreground#F5F5EF
  • breadcrumb.activeSelectionForeground#F5F5EF
  • breadcrumb.background#282A36
  • breadcrumb.focusForeground#F5F5EF
  • breadcrumb.foreground#6272A4
  • breadcrumbPicker.background#191A21
  • button.background#44475A
  • button.foreground#F5F5EF
  • button.secondaryBackground#282A36
  • button.secondaryForeground#F5F5EF
  • button.secondaryHoverBackground#343746
  • debugToolBar.background#21222C
  • diffEditor.insertedTextBackground#5FEA7720
  • diffEditor.removedTextBackground#FF555550
  • dropdown.background#343746
  • dropdown.border#191A21
  • dropdown.foreground#F5F5EF
  • editor.background#282A36
  • editor.findMatchBackground#FFB86CD0
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#21222C80
  • editor.foreground#F5F5EF
  • editor.hoverHighlightBackground#8BE9FD50
  • editor.lineHighlightBorder#5FEA7740
  • editor.rangeHighlightBackground#BD93F915
  • editor.selectionBackground#5FEA7740
  • editor.selectionHighlightBackground#5FEA7780
  • editor.snippetFinalTabstopHighlightBackground#282A36
  • editor.snippetFinalTabstopHighlightBorder#5FEA77
  • editor.snippetTabstopHighlightBackground#282A36
  • editor.snippetTabstopHighlightBorder#6272A4
  • editor.wordHighlightBackground#8BE9FD50
  • editor.wordHighlightStrongBackground#5FEA7750
  • editorBracketHighlight.foreground1#F5F5EF
  • editorBracketHighlight.foreground2#FF79C6
  • editorBracketHighlight.foreground3#8BE9FD
  • editorBracketHighlight.foreground4#5FEA77
  • editorBracketHighlight.foreground5#BD93F9
  • editorBracketHighlight.foreground6#FFB86C
  • editorBracketHighlight.unexpectedBracket.foreground#FF5555
  • editorCodeLens.foreground#6272A4
  • editorError.foreground#FF5555
  • editorGroup.border#BD93F9
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#191A21
  • editorGutter.addedBackground#5FEA7780
  • editorGutter.deletedBackground#FF555580
  • editorGutter.modifiedBackground#8BE9FD80
  • editorHoverWidget.background#282A36
  • editorHoverWidget.border#6272A4
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#6272A4
  • editorLink.activeForeground#8BE9FD
  • editorMarkerNavigation.background#21222C
  • editorOverviewRuler.addedForeground#5FEA7780
  • editorOverviewRuler.border#191A21
  • editorOverviewRuler.currentContentForeground#5FEA77
  • editorOverviewRuler.deletedForeground#FF555580
  • editorOverviewRuler.errorForeground#FF555580
  • editorOverviewRuler.incomingContentForeground#BD93F9
  • editorOverviewRuler.infoForeground#8BE9FD80
  • editorOverviewRuler.modifiedForeground#8BE9FD80
  • editorOverviewRuler.selectionHighlightForeground#FFB86C
  • editorOverviewRuler.warningForeground#FFB86C80
  • editorOverviewRuler.wordHighlightForeground#8BE9FD
  • editorOverviewRuler.wordHighlightStrongForeground#5FEA77
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#21222C
  • editorSuggestWidget.foreground#F5F5EF
  • editorSuggestWidget.selectedBackground#44475A
  • editorWarning.foreground#8BE9FD
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#21222C
  • errorForeground#FF5555
  • extensionButton.prominentBackground#5FEA7790
  • extensionButton.prominentForeground#F5F5EF
  • extensionButton.prominentHoverBackground#5FEA7760
  • focusBorder#6272A4
  • foreground#F5F5EF
  • gitDecoration.conflictingResourceForeground#FFB86C
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.ignoredResourceForeground#6272A4
  • gitDecoration.modifiedResourceForeground#8BE9FD
  • gitDecoration.untrackedResourceForeground#5FEA77
  • input.background#282A36
  • input.border#191A21
  • input.foreground#F5F5EF
  • input.placeholderForeground#6272A4
  • inputOption.activeBorder#BD93F9
  • inputValidation.errorBorder#FF5555
  • inputValidation.infoBorder#FF79C6
  • inputValidation.warningBorder#FFB86C
  • list.activeSelectionBackground#44475A
  • list.activeSelectionForeground#F5F5EF
  • list.dropBackground#44475A
  • list.errorForeground#FF5555
  • list.focusBackground#44475A75
  • list.highlightForeground#8BE9FD
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#5FEA7750
  • list.warningForeground#FFB86C
  • listFilterWidget.background#343746
  • listFilterWidget.noMatchesOutline#FF5555
  • listFilterWidget.outline#424450
  • merge.currentHeaderBackground#5FEA7790
  • merge.incomingHeaderBackground#BD93F990
  • panel.background#282A36
  • panel.border#BD93F9
  • panelTitle.activeBorder#FF79C6
  • panelTitle.activeForeground#F5F5EF
  • panelTitle.inactiveForeground#6272A4
  • peekView.border#44475A
  • peekViewEditor.background#282A36
  • peekViewEditor.matchHighlightBackground#F1FA8C80
  • peekViewResult.background#21222C
  • peekViewResult.fileForeground#F5F5EF
  • peekViewResult.lineForeground#F5F5EF
  • peekViewResult.matchHighlightBackground#F1FA8C80
  • peekViewResult.selectionBackground#44475A
  • peekViewResult.selectionForeground#F5F5EF
  • peekViewTitle.background#191A21
  • peekViewTitleDescription.foreground#6272A4
  • peekViewTitleLabel.foreground#F5F5EF
  • pickerGroup.border#BD93F9
  • pickerGroup.foreground#8BE9FD
  • progressBar.background#FF79C6
  • selection.background#BD93F9
  • settings.checkboxBackground#21222C
  • settings.checkboxBorder#191A21
  • settings.checkboxForeground#F5F5EF
  • settings.dropdownBackground#21222C
  • settings.dropdownBorder#191A21
  • settings.dropdownForeground#F5F5EF
  • settings.headerForeground#F5F5EF
  • settings.modifiedItemIndicator#FFB86C
  • settings.numberInputBackground#21222C
  • settings.numberInputBorder#191A21
  • settings.numberInputForeground#F5F5EF
  • settings.textInputBackground#21222C
  • settings.textInputBorder#191A21
  • settings.textInputForeground#F5F5EF
  • sideBar.background#21222C
  • sideBarSectionHeader.background#282A36
  • sideBarSectionHeader.border#191A21
  • sideBarTitle.foreground#F5F5EF
  • statusBar.background#191A21
  • statusBar.debuggingBackground#FF5555
  • statusBar.debuggingForeground#191A21
  • statusBar.foreground#F5F5EF
  • statusBar.noFolderBackground#191A21
  • statusBar.noFolderForeground#F5F5EF
  • statusBarItem.prominentBackground#FF5555
  • statusBarItem.prominentHoverBackground#FFB86C
  • statusBarItem.remoteBackground#BD93F9
  • statusBarItem.remoteForeground#282A36
  • tab.activeBackground#424450
  • tab.activeBorderTop#FF79C680
  • tab.activeForeground#F5F5EF
  • tab.border#191A21
  • tab.inactiveBackground#21222C
  • tab.inactiveForeground#6272A4
  • terminal.ansiBlack#21222C
  • terminal.ansiBlue#BD93F9
  • 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#8BE9FD
  • terminal.ansiGreen#5FEA77
  • terminal.ansiMagenta#FF79C6
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#F5F5EF
  • terminal.ansiYellow#EAF48C
  • terminal.background#282A36
  • terminal.foreground#F5F5EF
  • titleBar.activeBackground#191A21
  • titleBar.activeForeground#69FF94
  • titleBar.inactiveBackground#44475C
  • titleBar.inactiveForeground#69FF94
  • walkThrough.embeddedEditorBackground#21222C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#BD93F9
meta.diff, meta.diff.header#6272A4
markup.inserted#5FEA77
markup.deleted#FF5555
markup.changed#FFB86C
invalid#FF5555underline italic
invalid.deprecated#F5F5EFunderline italic
entity.name.filename#EAF48C
markup.error#FF5555
markup.underlineunderline
markup.bold#FFB86Cbold
markup.heading#BD93F9bold
markup.italic#EAF48Citalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#8BE9FD
markup.inline.raw, markup.raw.restructuredtext#5FEA77
markup.underline.link, markup.underline.link.image#8BE9FD
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#FF79C6
entity.name.directive.restructuredtext, markup.quote#EAF48Citalic
meta.separator.markdown#6272A4
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#5FEA77
punctuation.definition.constant.restructuredtext#BD93F9
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#BD93F9
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#F5F5EF
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#EAF48C
entity.name.type.class, entity.name.class#8BE9FDnormal
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#BD93F9italic
entity.other.inherited-class#8BE9FDitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6272A4regular
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#FF79C6
comment.block.documentation entity.name.type#8BE9FDitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#8BE9FD
comment.block.documentation variable#FFB86Citalic
constant, variable.other.constant#BD93F9
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#5FEA77italic
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#5FEA77
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#5FEA77italic
meta.decorator variable.other.object#5FEA77
keyword, punctuation.definition.keyword#FF79C6
keyword.control.new, keyword.operator.newbold
meta.selector#FF79C6
support#8BE9FDitalic
support.function.magic, support.variable, variable.other.predefined#BD93F9regular
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, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#F5F5EF
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#8BE9FD
constant.other.date, constant.other.timestamp#FFB86C
variable.other.alias.yaml#5FEA77italic 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#8BE9FDitalic
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#EAF48C
punctuation.definition.group.capture.regexp#FF79C6
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF5555
punctuation.definition.character-class.regexp#8BE9FD
punctuation.definition.group.regexp#FFB86C
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF5555
meta.assertion.look-ahead.regexp#5FEA77
string#EAF48C
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#F5F5EF
meta.import variable.other.readwrite, 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#F5F5EFnormal
meta.selectionset.graphql variable#EAF48C
meta.selectionset.graphql meta.arguments variable#F5F5EF
entity.name.fragment.graphql, variable.fragment.graphql#8BE9FD
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#F5F5EF
source.shell variable.other#BD93F9
support.constant#BD93F9normal
meta.scope.prerequisites.makefile#EAF48C
meta.attribute-selector.scss#EAF48C
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#F5F5EF
meta.preprocessor.haskell#6272A4
log.error#FF5555bold
log.warning#EAF48Cbold
storage.modifier, storage.type#5FEA77regular
storage.type.built-in#8BE9FDregular
keyword, entity.name.operatorv#5FEA77regular
keyword.operator.logical, keyword.operator.comparison#FF5555regular
punctuation.separator.pointer-access, punctuation.separator.dot-access, punctuation.section#5FEA77regular
constant.numeric#EAF48Cregular
string, string.quoted.double#EAF48Cregular
entity.name.namespace#F5F5EFbold
meta.preprocessor, meta.preprocessor.macro#FF79C6bold
meta.function-call.c, meta.function.definition.c, entity.name.function.c, entity.name.function.definition.cpp, entity.name.function.call.cpp#5FEA77regular
entity.name.function.member.cpp#5FEA77italic

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

C/C++ Theme - Coding Theme