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
emphasis—italic
strong—bold
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.underline—underline
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.new—bold
meta.selector#F269B9—
support#7AD8EC—
support.function.magic, support.variable, variable.other.predefined#AF86EBregular
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#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