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#ff907d10
  • activityBar.activeBorder#cb66ff80
  • activityBar.background#1f1e1e
  • activityBar.foreground#fbc086
  • activityBar.inactiveForeground#6e26ff
  • activityBarBadge.background#d41980
  • activityBarBadge.foreground#fbc086
  • badge.background#1f1e1e
  • badge.foreground#fbc086
  • breadcrumb.activeSelectionForeground#fbc086
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#fbc086
  • breadcrumb.foreground#6e26ff
  • breadcrumbPicker.background#171616
  • button.background#1f1e1e
  • button.foreground#fbc086
  • contrastBorder#171616
  • debugToolBar.background#292826
  • diffEditor.insertedTextBackground#f2691f20
  • diffEditor.removedTextBackground#e4b6fc50
  • dropdown.background#1f1e1e
  • dropdown.border#171616
  • dropdown.foreground#fbc086
  • editor.background#000000
  • editor.findMatchBackground#3e91de80
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#292826
  • editor.foreground#fbc086
  • editor.hoverHighlightBackground#eb75a050
  • editor.lineHighlightBorder#1f1e1e
  • editor.rangeHighlightBackground#ff907d15
  • editor.selectionBackground#1f1e1e
  • editor.selectionHighlightBackground#262525
  • editor.snippetFinalTabstopHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBorder#f2691f
  • editor.snippetTabstopHighlightBackground#000000
  • editor.snippetTabstopHighlightBorder#6e26ff
  • editor.wordHighlightBackground#eb75a050
  • editor.wordHighlightStrongBackground#f2691f50
  • editorCodeLens.foreground#6e26ff
  • editorError.foreground#e4b6fc
  • editorGroup.border#ff907d
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#171616
  • editorGutter.addedBackground#f2691f80
  • editorGutter.deletedBackground#e4b6fc80
  • editorGutter.modifiedBackground#eb75a080
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#6e26ff
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#6e26ff
  • editorLink.activeForeground#eb75a0
  • editorMarkerNavigation.background#292826
  • editorOverviewRuler.addedForeground#f2691f80
  • editorOverviewRuler.border#171616
  • editorOverviewRuler.currentContentForeground#f2691f
  • editorOverviewRuler.deletedForeground#e4b6fc80
  • editorOverviewRuler.errorForeground#e4b6fc80
  • editorOverviewRuler.incomingContentForeground#ff907d
  • editorOverviewRuler.infoForeground#eb75a080
  • editorOverviewRuler.modifiedForeground#eb75a080
  • editorOverviewRuler.selectionHighlightForeground#3e91de
  • editorOverviewRuler.warningForeground#3e91de80
  • editorOverviewRuler.wordHighlightForeground#eb75a0
  • editorOverviewRuler.wordHighlightStrongForeground#f2691f
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#292826
  • editorSuggestWidget.foreground#fbc086
  • editorSuggestWidget.selectedBackground#1f1e1e
  • editorWarning.foreground#eb75a0
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#292826
  • errorForeground#e4b6fc
  • extensionButton.prominentBackground#f2691f90
  • extensionButton.prominentForeground#fbc086
  • extensionButton.prominentHoverBackground#f2691f60
  • focusBorder#6e26ff
  • foreground#fbc086
  • gitDecoration.conflictingResourceForeground#3e91de
  • gitDecoration.deletedResourceForeground#e4b6fc
  • gitDecoration.ignoredResourceForeground#6e26ff
  • gitDecoration.modifiedResourceForeground#eb75a0
  • gitDecoration.untrackedResourceForeground#f2691f
  • input.background#000000
  • input.border#171616
  • input.foreground#fbc086
  • input.placeholderForeground#6e26ff
  • inputOption.activeBorder#ff907d
  • inputValidation.errorBorder#e4b6fc
  • inputValidation.infoBorder#cb66ff
  • inputValidation.warningBorder#3e91de
  • list.activeSelectionBackground#1f1e1e
  • list.activeSelectionForeground#fbc086
  • list.dropBackground#1f1e1e
  • list.errorForeground#e4b6fc
  • list.focusBackground#44475A75
  • list.highlightForeground#eb75a0
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#3e91de
  • listFilterWidget.background#1f1e1e
  • listFilterWidget.noMatchesOutline#e4b6fc
  • listFilterWidget.outline#262525
  • merge.currentHeaderBackground#f2691f90
  • merge.incomingHeaderBackground#ff907d90
  • notification.background#000000
  • notification.buttonBackground#1f1e1e
  • notification.buttonForeground#fbc086
  • notification.buttonHoverBackground#44475A75
  • notification.errorBackground#e4b6fc
  • notification.errorForeground#fbc086
  • notification.foreground#fbc086
  • notification.infoBackground#eb75a0
  • notification.infoForeground#000000
  • notification.warningBackground#3e91de
  • notification.warningForeground#000000
  • panel.background#000000
  • panel.border#ff907d
  • panelTitle.activeBorder#cb66ff
  • panelTitle.activeForeground#fbc086
  • panelTitle.inactiveForeground#6e26ff
  • peekView.border#1f1e1e
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#d4198080
  • peekViewResult.background#292826
  • peekViewResult.fileForeground#fbc086
  • peekViewResult.lineForeground#fbc086
  • peekViewResult.matchHighlightBackground#d4198080
  • peekViewResult.selectionBackground#1f1e1e
  • peekViewResult.selectionForeground#fbc086
  • peekViewTitle.background#171616
  • peekViewTitleDescription.foreground#6e26ff
  • peekViewTitleLabel.foreground#fbc086
  • pickerGroup.border#ff907d
  • pickerGroup.foreground#eb75a0
  • progressBar.background#cb66ff
  • selection.background#ff907d
  • settings.checkboxBackground#292826
  • settings.checkboxBorder#171616
  • settings.checkboxForeground#fbc086
  • settings.dropdownBackground#292826
  • settings.dropdownBorder#171616
  • settings.dropdownForeground#fbc086
  • settings.headerForeground#fbc086
  • settings.modifiedItemForeground#3e91de
  • settings.modifiedItemIndicator#3e91de
  • settings.numberInputBackground#292826
  • settings.numberInputBorder#171616
  • settings.numberInputForeground#fbc086
  • settings.textInputBackground#292826
  • settings.textInputBorder#171616
  • settings.textInputForeground#fbc086
  • sideBar.background#292826
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#171616
  • sideBarTitle.foreground#fbc086
  • statusBar.background#171616
  • statusBar.debuggingBackground#e4b6fc
  • statusBar.debuggingForeground#171616
  • statusBar.foreground#fbc086
  • statusBar.noFolderBackground#171616
  • statusBar.noFolderForeground#fbc086
  • statusBarItem.prominentBackground#e4b6fc
  • statusBarItem.prominentHoverBackground#3e91de
  • statusBarItem.remoteBackground#ff907d
  • statusBarItem.remoteForeground#fbc086
  • tab.activeBackground#000000
  • tab.activeBorderTop#cb66ff80
  • tab.activeForeground#fbc086
  • tab.border#171616
  • tab.inactiveBackground#292826
  • tab.inactiveForeground#6e26ff
  • terminal.ansiBlack#1f1e1d
  • terminal.ansiBlue#6dd6c3
  • terminal.ansiBrightBlack#6d7691
  • terminal.ansiBrightBlue#D6ACFF
  • terminal.ansiBrightCyan#8fdbdb
  • terminal.ansiBrightGreen#449c5d
  • terminal.ansiBrightMagenta#50e69d
  • terminal.ansiBrightRed#ed9247
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#ffc5a6
  • terminal.ansiCyan#6ea9b5
  • terminal.ansiGreen#50FA7B
  • terminal.ansiMagenta#deb67e
  • terminal.ansiRed#e88a0e
  • terminal.ansiWhite#e8d4be
  • terminal.ansiYellow#72b583
  • terminal.background#000000
  • terminal.foreground#fbc086
  • titleBar.activeBackground#292826
  • titleBar.activeForeground#fbc086
  • titleBar.inactiveBackground#171616
  • titleBar.inactiveForeground#6e26ff
  • walkThrough.embeddedEditorBackground#292826

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#ff907d
source#fbc086
meta.diff, meta.diff.header#6e26ff
markup.inserted#f2691f
markup.deleted#e4b6fc
markup.changed#3e91de
invalid#e4b6fcunderline italic
invalid.deprecated#fbc086underline italic
entity.name.filename#d41980
markup.error#e4b6fc
markup.underlineunderline
markup.bold#3e91debold
markup.heading#ff907dbold
markup.italic#d41980italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#eb75a0
markup.inline.raw, markup.raw.restructuredtext#f2691f
markup.underline.link, markup.underline.link.image#eb75a0
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#cb66ff
entity.name.directive.restructuredtext, markup.quote#d41980italic
meta.separator.markdown#6e26ff
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#f2691f
punctuation.definition.constant.restructuredtext#ff907d
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#ff907d
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#fbc086
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#d41980
entity.name.type.class, entity.name.class#eb75a0normal
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#ff907ditalic
entity.other.inherited-class#eb75a0italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6e26ff
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#cb66ff
comment.block.documentation entity.name.type#eb75a0italic
comment.block.documentation entity.name.type punctuation.definition.bracket#eb75a0
comment.block.documentation variable#3e91deitalic
constant, variable.other.constant#ff907d
constant.character.escape, constant.character.string.escape, constant.regexp#cb66ff
entity.name.tag#cb66ff
entity.other.attribute-name.parent-selector#cb66ff
entity.other.attribute-name#f2691fitalic
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#f2691f
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#3e91deitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#f2691fitalic
meta.decorator variable.other.object#f2691f
keyword, punctuation.definition.keyword#cb66ff
keyword.control.new, keyword.operator.newbold
meta.selector#cb66ff
support#eb75a0italic
support.function.magic, support.variable, variable.other.predefined#ff907dregular
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#cb66ff
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#fbc086
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#cb66ff
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#eb75a0
constant.other.date, constant.other.timestamp#3e91de
variable.other.alias.yaml#f2691fitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#cb66ffregular
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#eb75a0italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#3e91de
storage.modifier#cb66ff
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#d41980
punctuation.definition.group.capture.regexp#cb66ff
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#e4b6fc
punctuation.definition.character-class.regexp#eb75a0
punctuation.definition.group.regexp#3e91de
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#e4b6fc
meta.assertion.look-ahead.regexp#f2691f
string#d41980
punctuation.definition.string.begin, punctuation.definition.string.end#b55b22
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#378da1
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#6e26ff
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#fbc086
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#3e91deitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#fbc086normal
meta.selectionset.graphql variable#d41980
meta.selectionset.graphql meta.arguments variable#fbc086
entity.name.fragment.graphql, variable.fragment.graphql#eb75a0
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#fbc086
source.shell variable.other#ff907d
support.constant#ff907dnormal
meta.scope.prerequisites.makefile#d41980
meta.attribute-selector.scss#d41980
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#fbc086
meta.preprocessor.haskell#6e26ff