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.activeBorder#F269B980
  • activityBar.background#1B1D28
  • activityBar.foreground#8B91B1
  • activityBar.inactiveForeground#606890
  • activityBarBadge.background#F269B9
  • activityBarBadge.foreground#1B1D28
  • badge.background#454B68
  • badge.foreground#8B91B1
  • breadcrumb.activeSelectionForeground#8B91B1
  • breadcrumb.background#1B1D28
  • breadcrumb.focusForeground#8B91B1
  • breadcrumb.foreground#606890
  • breadcrumbPicker.background#101218
  • button.background#606890
  • button.foreground#D1D4E0
  • button.hoverBackground#454B68
  • button.secondaryBackground#1B1D28
  • button.secondaryForeground#8B91B1
  • button.secondaryHoverBackground#252837
  • debugToolBar.background#14161F
  • diffEditor.insertedTextBackground#2DE26620
  • diffEditor.removedTextBackground#F0474A50
  • dropdown.background#252837
  • dropdown.border#101218
  • dropdown.foreground#D1D4E0
  • editor.background#1B1D28
  • editor.findMatchBackground#EDA85D80
  • editor.findMatchHighlightBackground#E0E2EB40
  • editor.findRangeHighlightBackground#454B6875
  • editor.foldBackground#252837
  • editor.foreground#D1D4E0
  • editor.hoverHighlightBackground#7AD8EC50
  • editor.lineHighlightBorder#454B68
  • editor.rangeHighlightBackground#AF86EB15
  • editor.selectionBackground#454B68
  • editor.selectionHighlightBackground#313549
  • editor.snippetFinalTabstopHighlightBackground#1B1D28
  • editor.snippetFinalTabstopHighlightBorder#2DE266
  • editor.snippetTabstopHighlightBackground#1B1D28
  • editor.snippetTabstopHighlightBorder#606890
  • editor.wordHighlightBackground#7AD8EC50
  • editor.wordHighlightStrongBackground#2DE26650
  • editorBracketHighlight.foreground1#8B91B1
  • editorBracketHighlight.foreground2#F269B9
  • editorBracketHighlight.foreground3#7AD8EC
  • editorBracketHighlight.foreground4#2DE266
  • editorBracketHighlight.foreground5#AF86EB
  • editorBracketHighlight.foreground6#EDA85D
  • editorBracketHighlight.unexpectedBracket.foreground#F0474A
  • editorCodeLens.foreground#606890
  • editorError.foreground#F0474A
  • editorGroup.border#AF86EB
  • editorGroup.dropBackground#454B6870
  • editorGroupHeader.tabsBackground#1B1D28
  • editorGutter.addedBackground#2DE26680
  • editorGutter.deletedBackground#F0474A80
  • editorGutter.modifiedBackground#7AD8EC80
  • editorHoverWidget.background#1B1D28
  • editorHoverWidget.border#606890
  • editorIndentGuide.activeBackground#454B68
  • editorIndentGuide.background#454B6850
  • editorLineNumber.foreground#606890
  • editorLink.activeForeground#7AD8EC
  • editorMarkerNavigation.background#14161F
  • editorOverviewRuler.addedForeground#2DE26680
  • editorOverviewRuler.border#101218
  • editorOverviewRuler.currentContentForeground#2DE266
  • editorOverviewRuler.deletedForeground#F0474A80
  • editorOverviewRuler.errorForeground#F0474A80
  • editorOverviewRuler.incomingContentForeground#AF86EB
  • editorOverviewRuler.infoForeground#7AD8EC80
  • editorOverviewRuler.modifiedForeground#7AD8EC80
  • editorOverviewRuler.selectionHighlightForeground#EDA85D
  • editorOverviewRuler.warningForeground#EDA85D80
  • editorOverviewRuler.wordHighlightForeground#7AD8EC
  • editorOverviewRuler.wordHighlightStrongForeground#2DE266
  • editorRuler.foreground#313549
  • editorSuggestWidget.background#14161F
  • editorSuggestWidget.foreground#8B91B1
  • editorSuggestWidget.selectedBackground#454B68
  • editorWarning.foreground#7AD8EC
  • editorWhitespace.foreground#313549
  • editorWidget.background#14161F
  • errorForeground#F0474A
  • extensionButton.prominentBackground#2DE26690
  • extensionButton.prominentForeground#1B1D28
  • extensionButton.prominentHoverBackground#2DE26660
  • focusBorder#606890
  • foreground#8B91B1
  • gitDecoration.conflictingResourceForeground#EDA85D
  • gitDecoration.deletedResourceForeground#F0474A
  • gitDecoration.ignoredResourceForeground#606890
  • gitDecoration.modifiedResourceForeground#7AD8EC
  • gitDecoration.untrackedResourceForeground#2DE266
  • input.background#252837
  • input.border#454B68
  • input.foreground#8B91B1
  • input.placeholderForeground#8B91B1
  • inputOption.activeBorder#AF86EB
  • inputValidation.errorBorder#F0474A
  • inputValidation.infoBorder#F269B9
  • inputValidation.warningBorder#EDA85D
  • list.activeSelectionBackground#454B68
  • list.activeSelectionForeground#D1D4E0
  • list.dropBackground#454B68
  • list.errorForeground#F0474A
  • list.focusBackground#454B6875
  • list.focusForeground#D1D4E0
  • list.highlightForeground#7AD8EC
  • list.hoverBackground#454B6875
  • list.hoverForeground#D1D4E0
  • list.inactiveSelectionBackground#454B6875
  • list.inactiveSelectionForeground#D1D4E0
  • list.warningForeground#EDA85D
  • listFilterWidget.background#252837
  • listFilterWidget.noMatchesOutline#F0474A
  • listFilterWidget.outline#313549
  • menu.separatorBackground#313549
  • merge.currentHeaderBackground#2DE26690
  • merge.incomingHeaderBackground#AF86EB90
  • panel.background#1B1D28
  • panel.border#1B1D28
  • panelTitle.activeBorder#F269B9
  • panelTitle.activeForeground#D1D4E0
  • panelTitle.inactiveForeground#606890
  • peekView.border#454B68
  • peekViewEditor.background#1B1D28
  • peekViewEditor.matchHighlightBackground#E0E97C80
  • peekViewResult.background#14161F
  • peekViewResult.fileForeground#8B91B1
  • peekViewResult.lineForeground#8B91B1
  • peekViewResult.matchHighlightBackground#E0E97C80
  • peekViewResult.selectionBackground#454B68
  • peekViewResult.selectionForeground#8B91B1
  • peekViewTitle.background#101218
  • peekViewTitleDescription.foreground#606890
  • peekViewTitleLabel.foreground#8B91B1
  • pickerGroup.border#AF86EB
  • pickerGroup.foreground#7AD8EC
  • progressBar.background#F269B9
  • selection.background#AF86EB
  • settings.checkboxBackground#252837
  • settings.checkboxBorder#454B68
  • settings.checkboxForeground#D1D4E0
  • settings.dropdownBackground#252837
  • settings.dropdownBorder#454B68
  • settings.dropdownForeground#D1D4E0
  • settings.headerForeground#8B91B1
  • settings.modifiedItemIndicator#EDA85D
  • settings.numberInputBackground#252837
  • settings.numberInputBorder#454B68
  • settings.numberInputForeground#D1D4E0
  • settings.textInputBackground#252837
  • settings.textInputBorder#454B68
  • settings.textInputForeground#D1D4E0
  • sideBar.background#1B1D28
  • sideBarSectionHeader.background#1B1D28
  • sideBarSectionHeader.border#1B1D28
  • sideBarTitle.foreground#8B91B1
  • statusBar.background#1B1D28
  • statusBar.debuggingBackground#F0474A
  • statusBar.debuggingForeground#101218
  • statusBar.foreground#8B91B1
  • statusBar.noFolderBackground#101218
  • statusBar.noFolderForeground#8B91B1
  • statusBarItem.prominentBackground#F0474A
  • statusBarItem.prominentHoverBackground#EDA85D
  • statusBarItem.remoteBackground#AF86EB
  • statusBarItem.remoteForeground#1B1D28
  • tab.activeBackground#1B1D28
  • tab.activeBorder#F269B9
  • tab.activeForeground#D1D4E0
  • tab.border#1B1D28
  • tab.hoverForeground#D1D4E0
  • tab.inactiveBackground#1B1D28
  • tab.inactiveForeground#606890
  • terminal.ansiBlack#14161F
  • terminal.ansiBlue#AF86EB
  • terminal.ansiBrightBlack#606890
  • terminal.ansiBrightBlue#CEB1F6
  • terminal.ansiBrightCyan#29E0FA
  • terminal.ansiBrightGreen#5DE486
  • terminal.ansiBrightMagenta#F995D0
  • terminal.ansiBrightRed#FC787D
  • terminal.ansiBrightWhite#E0E2EB
  • terminal.ansiBrightYellow#EBF296
  • terminal.ansiCyan#7AD8EC
  • terminal.ansiGreen#2DE266
  • terminal.ansiMagenta#F269B9
  • terminal.ansiRed#F0474A
  • terminal.ansiWhite#8B91B1
  • terminal.ansiYellow#E0E97C
  • terminal.background#1B1D28
  • terminal.foreground#8B91B1
  • titleBar.activeBackground#1B1D28
  • titleBar.activeForeground#8B91B1
  • titleBar.inactiveBackground#1B1D28
  • titleBar.inactiveForeground#606890
  • tree.indentGuidesStroke#454B68
  • walkThrough.embeddedEditorBackground#14161F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#AF86EB
meta.diff, meta.diff.header#606890
markup.inserted#2DE266
markup.deleted#F0474A
markup.changed#EDA85D
invalid#F0474Aunderline
invalid.deprecated#D1D4E0underline
entity.name.filename#E0E97C
markup.error#F0474A
markup.underlineunderline
markup.bold#EDA85Dbold
markup.heading#AF86EBbold
markup.italic#E0E97Citalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#7AD8EC
markup.inline.raw, markup.raw.restructuredtext#2DE266
markup.underline.link, markup.underline.link.image#7AD8EC
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#F269B9
entity.name.directive.restructuredtext, markup.quote#E0E97C
meta.separator.markdown#606890
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#2DE266
punctuation.definition.constant.restructuredtext#AF86EB
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#AF86EB
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#D1D4E0
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#E0E97C
entity.name.type.class, entity.name.class#7AD8ECnormal
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#AF86EB
entity.other.inherited-class#7AD8EC
comment, punctuation.definition.comment, unused.comment, wildcard.comment#606890
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#F269B9
comment.block.documentation entity.name.type#7AD8EC
comment.block.documentation entity.name.type punctuation.definition.bracket#7AD8EC
comment.block.documentation variable#EDA85D
constant, variable.other.constant#AF86EB
constant.character.escape, constant.character.string.escape, constant.regexp#F269B9
entity.name.tag#F269B9
entity.other.attribute-name.parent-selector#F269B9
entity.other.attribute-name#2DE266
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#2DE266
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#EDA85D
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#2DE266
meta.decorator variable.other.object#2DE266
keyword, punctuation.definition.keyword#F269B9
keyword.control.new, keyword.operator.newbold
meta.selector#F269B9
support#7AD8EC
support.function.magic, support.variable, variable.other.predefined#AF86EBregular
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#F269B9
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#D1D4E0
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#F269B9
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#7AD8EC
constant.other.date, constant.other.timestamp#EDA85D
variable.other.alias.yaml#2DE266underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#F269B9regular
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#7AD8EC
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#EDA85D
storage.modifier#F269B9
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#E0E97C
punctuation.definition.group.capture.regexp#F269B9
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#F0474A
punctuation.definition.character-class.regexp#7AD8EC
punctuation.definition.group.regexp#EDA85D
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#F0474A
meta.assertion.look-ahead.regexp#2DE266
string#E0E97C
punctuation.definition.string.begin, punctuation.definition.string.end#E0E97C
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#7AD8EC
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#606890
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#D1D4E0
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#EDA85D
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#D1D4E0normal
meta.selectionset.graphql variable#E0E97C
meta.selectionset.graphql meta.arguments variable#D1D4E0
entity.name.fragment.graphql, variable.fragment.graphql#7AD8EC
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#D1D4E0
source.shell variable.other#AF86EB
support.constant#AF86EBnormal
meta.scope.prerequisites.makefile#E0E97C
meta.attribute-selector.scss#E0E97C
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#D1D4E0
meta.preprocessor.haskell#606890
log.error#F0474Abold
log.warning#E0E97Cbold