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#1d6da110
  • activityBar.activeBorder#b7077e80
  • activityBar.background#0e0c15
  • activityBar.foreground#c3af9d
  • activityBar.inactiveForeground#634e67
  • activityBarBadge.background#b7077e
  • activityBarBadge.foreground#0e0c15
  • badge.background#08002e
  • badge.foreground#c3af9d
  • breadcrumb.activeSelectionForeground#c3af9d
  • breadcrumb.background#0e0c15
  • breadcrumb.focusForeground#c3af9d
  • breadcrumb.foreground#634e67
  • breadcrumbPicker.background#110a19
  • button.background#221433
  • button.foreground#c3af9d
  • checkbox.background#221433
  • checkbox.border#110a19
  • checkbox.foreground#c3af9d
  • contrastBorder#110a19
  • debugToolBar.background#221433
  • diffEditor.insertedTextBackground#5d731a20
  • diffEditor.removedTextBackground#64002c50
  • dropdown.background#0e0c15
  • dropdown.border#110a19
  • dropdown.foreground#c3af9d
  • editor.background#0e0c15
  • editor.findMatchBackground#cd751c80
  • editor.findMatchHighlightBackground#fff5db40
  • editor.findRangeHighlightBackground#331e4d75
  • editor.foldBackground#221433
  • editor.foreground#c3af9d
  • editor.hoverHighlightBackground#110a19
  • editor.lineHighlightBorder#08002e
  • editor.rangeHighlightBackground#1d6da115
  • editor.selectionBackground#08002e
  • editor.selectionHighlightBackground#08002e
  • editor.snippetFinalTabstopHighlightBackground#0e0c15
  • editor.snippetFinalTabstopHighlightBorder#5d731a
  • editor.snippetTabstopHighlightBackground#0e0c15
  • editor.snippetTabstopHighlightBorder#634e67
  • editor.wordHighlightBackground#42a38c50
  • editor.wordHighlightStrongBackground#5d731a50
  • editorCodeLens.foreground#634e67
  • editorError.foreground#64002c
  • editorGroup.border#1d6da1
  • editorGroup.dropBackground#331e4d70
  • editorGroupHeader.tabsBackground#110a19
  • editorGutter.addedBackground#5d731a80
  • editorGutter.deletedBackground#64002c80
  • editorGutter.modifiedBackground#42a38c80
  • editorHoverWidget.background#0e0c15
  • editorHoverWidget.border#634e67
  • editorIndentGuide.activeBackground#fff5db45
  • editorIndentGuide.background#fff5db1A
  • editorLineNumber.foreground#634e67
  • editorLink.activeForeground#42a38c
  • editorMarkerNavigation.background#221433
  • editorOverviewRuler.addedForeground#5d731a80
  • editorOverviewRuler.border#110a19
  • editorOverviewRuler.currentContentForeground#5d731a
  • editorOverviewRuler.deletedForeground#64002c80
  • editorOverviewRuler.errorForeground#64002c80
  • editorOverviewRuler.incomingContentForeground#1d6da1
  • editorOverviewRuler.infoForeground#42a38c80
  • editorOverviewRuler.modifiedForeground#42a38c80
  • editorOverviewRuler.selectionHighlightForeground#cd751c
  • editorOverviewRuler.warningForeground#cd751c80
  • editorOverviewRuler.wordHighlightForeground#42a38c
  • editorOverviewRuler.wordHighlightStrongForeground#5d731a
  • editorRuler.foreground#fff5db1A
  • editorSuggestWidget.background#221433
  • editorSuggestWidget.foreground#c3af9d
  • editorSuggestWidget.selectedBackground#08002e
  • editorWarning.foreground#cd751c
  • editorWhitespace.foreground#fff5db1A
  • editorWidget.background#221433
  • errorForeground#64002c
  • extensionButton.prominentBackground#5d731a90
  • extensionButton.prominentForeground#c3af9d
  • extensionButton.prominentHoverBackground#5d731a60
  • focusBorder#634e67
  • foreground#c3af9d
  • gitDecoration.conflictingResourceForeground#cd751c
  • gitDecoration.deletedResourceForeground#64002c
  • gitDecoration.ignoredResourceForeground#634e67
  • gitDecoration.modifiedResourceForeground#42a38c
  • gitDecoration.untrackedResourceForeground#5d731a
  • input.background#0e0c15
  • input.border#110a19
  • input.foreground#c3af9d
  • input.placeholderForeground#634e67
  • inputOption.activeBorder#1d6da1
  • inputValidation.errorBackground#0e0c15
  • inputValidation.errorBorder#64002c
  • inputValidation.errorForeground#64002c
  • inputValidation.infoBackground#0e0c15
  • inputValidation.infoBorder#1d6da1
  • inputValidation.infoForeground#1d6da1
  • inputValidation.warningBackground#0e0c15
  • inputValidation.warningBorder#cd751c
  • inputValidation.warningForeground#cd751c
  • list.activeSelectionBackground#08002e
  • list.activeSelectionForeground#c3af9d
  • list.dropBackground#08002e
  • list.errorForeground#64002c
  • list.focusBackground#331e4d75
  • list.highlightForeground#42a38c
  • list.hoverBackground#331e4d75
  • list.inactiveSelectionBackground#331e4d75
  • list.warningForeground#cd751c
  • listFilterWidget.background#0e0c15
  • listFilterWidget.noMatchesOutline#64002c
  • listFilterWidget.outline#08002e
  • merge.currentHeaderBackground#5d731a90
  • merge.incomingHeaderBackground#1d6da190
  • notification.background#0e0c15
  • notification.buttonBackground#08002e
  • notification.buttonForeground#c3af9d
  • notification.buttonHoverBackground#331e4d75
  • notification.errorBackground#64002c
  • notification.errorForeground#0e0c15
  • notification.foreground#c3af9d
  • notification.infoBackground#1d6da1
  • notification.infoForeground#0e0c15
  • notification.warningBackground#cd751c
  • notification.warningForeground#0e0c15
  • notificationCenter.border#221433
  • notificationCenterHeader.background#0e0c15
  • notificationCenterHeader.foreground#c3af9d
  • notificationLink.foreground#42a38c
  • notifications.background#0e0c15
  • notifications.border#221433
  • notifications.foreground#c3af9d
  • notificationsErrorIcon.foreground#64002c
  • notificationsInfoIcon.foreground#1d6da1
  • notificationsWarningIcon.foreground#cd751c
  • notificationToast.border#221433
  • panel.background#0e0c15
  • panel.border#1d6da1
  • panelInput.border#c3af9d
  • panelTitle.activeBorder#b7077e
  • panelTitle.activeForeground#c3af9d
  • panelTitle.inactiveForeground#634e67
  • peekView.border#08002e
  • peekViewEditor.background#0e0c15
  • peekViewEditor.matchHighlightBackground#fac35780
  • peekViewResult.background#221433
  • peekViewResult.fileForeground#c3af9d
  • peekViewResult.lineForeground#c3af9d
  • peekViewResult.matchHighlightBackground#fac35780
  • peekViewResult.selectionBackground#08002e
  • peekViewResult.selectionForeground#c3af9d
  • peekViewTitle.background#110a19
  • peekViewTitleDescription.foreground#634e67
  • peekViewTitleLabel.foreground#c3af9d
  • pickerGroup.border#1d6da1
  • pickerGroup.foreground#42a38c
  • progressBar.background#b7077e
  • scrollbar.shadow#444444
  • selection.background#1d6da1
  • settings.checkboxBackground#221433
  • settings.checkboxBorder#110a19
  • settings.checkboxForeground#c3af9d
  • settings.dropdownBackground#221433
  • settings.dropdownBorder#110a19
  • settings.dropdownForeground#c3af9d
  • settings.headerForeground#c3af9d
  • settings.modifiedItemIndicator#cd751c
  • settings.numberInputBackground#221433
  • settings.numberInputBorder#110a19
  • settings.numberInputForeground#c3af9d
  • settings.textInputBackground#221433
  • settings.textInputBorder#110a19
  • settings.textInputForeground#c3af9d
  • sideBar.background#221433
  • sideBarSectionHeader.background#0e0c15
  • sideBarSectionHeader.border#110a19
  • sideBarTitle.foreground#c3af9d
  • statusBar.background#110a19
  • statusBar.debuggingBackground#64002c
  • statusBar.debuggingForeground#110a19
  • statusBar.foreground#c3af9d
  • statusBar.noFolderBackground#110a19
  • statusBar.noFolderForeground#c3af9d
  • statusBarItem.prominentBackground#64002c
  • statusBarItem.prominentHoverBackground#cd751c
  • statusBarItem.remoteBackground#1d6da1
  • statusBarItem.remoteForeground#0e0c15
  • tab.activeBackground#0e0c15
  • tab.activeBorderTop#b7077e80
  • tab.activeForeground#c3af9d
  • tab.border#110a19
  • tab.inactiveBackground#221433
  • tab.inactiveForeground#634e67
  • terminal.ansiBlack#08002e
  • terminal.ansiBlue#1d6da1
  • terminal.ansiBrightBlack#331e4d
  • terminal.ansiBrightBlue#40a4cf
  • terminal.ansiBrightCyan#62caa8
  • terminal.ansiBrightGreen#b4ce59
  • terminal.ansiBrightMagenta#f12aae
  • terminal.ansiBrightRed#d02063
  • terminal.ansiBrightWhite#fff5db
  • terminal.ansiBrightYellow#fac357
  • terminal.ansiCyan#42a38c
  • terminal.ansiGreen#5d731a
  • terminal.ansiMagenta#b7077e
  • terminal.ansiRed#64002c
  • terminal.ansiWhite#f3e0b8
  • terminal.ansiYellow#cd751c
  • terminal.background#0e0c15
  • terminal.border#c3af9d
  • terminal.foreground#c3af9d
  • terminal.selectionBackground#08002e50
  • textBlockQuote.background#221433
  • titleBar.activeBackground#221433
  • titleBar.activeForeground#c3af9d
  • titleBar.inactiveBackground#110a19
  • titleBar.inactiveForeground#634e67
  • walkThrough.embeddedEditorBackground#221433
  • welcomePage.buttonBackground#08002e
  • welcomePage.buttonHoverBackground#331e4d75
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#1d6da1
source#c3af9d
meta.diff, meta.diff.header#634e67
markup.inserted#5d731a
markup.deleted#64002c
markup.changed#cd751c
invalid#64002cunderline italic
invalid.deprecated#c3af9dunderline italic
entity.name.filename#fac357
markup.error#64002c
markup.underlineunderline
markup.bold#cd751cbold
markup.heading#1d6da1bold
markup.italic#fac357italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#42a38c
markup.inline.raw, markup.raw.restructuredtext#5d731a
markup.underline.link, markup.underline.link.image#42a38c
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#b7077e
entity.name.directive.restructuredtext, markup.quote#fac357italic
meta.separator.markdown#634e67
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#5d731a
punctuation.definition.constant.restructuredtext#1d6da1
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#1d6da1
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#c3af9d
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#fac357
entity.name.type.class, entity.name.class#42a38cnormal
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#1d6da1italic
entity.other.inherited-class#42a38citalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#634e67
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#b7077e
comment.block.documentation entity.name.type#42a38citalic
comment.block.documentation entity.name.type punctuation.definition.bracket#42a38c
comment.block.documentation variable#cd751citalic
constant, variable.other.constant#1d6da1
constant.character.escape, constant.character.string.escape, constant.regexp#b7077e
entity.name.tag#b7077e
entity.other.attribute-name.parent-selector#b7077e
entity.other.attribute-name#5d731aitalic
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#5d731a
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#cd751citalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#5d731aitalic
meta.decorator variable.other.object#5d731a
keyword, punctuation.definition.keyword#b7077e
keyword.control.new, keyword.operator.newbold
meta.selector#b7077e
support#42a38citalic
support.function.magic, support.variable, variable.other.predefined#1d6da1regular
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#b7077e
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#c3af9d
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#b7077e
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#42a38c
constant.other.date, constant.other.timestamp#cd751c
variable.other.alias.yaml#5d731aitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#b7077eregular
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#42a38citalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#cd751c
storage.modifier#b7077e
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fac357
punctuation.definition.group.capture.regexp#b7077e
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#64002c
punctuation.definition.character-class.regexp#42a38c
punctuation.definition.group.regexp#cd751c
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#64002c
meta.assertion.look-ahead.regexp#5d731a
string#fac357
punctuation.definition.string.begin, punctuation.definition.string.end#40a4cf
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#1d6da1
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#634e67
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#c3af9d
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#cd751citalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#c3af9dnormal
meta.selectionset.graphql variable#fac357
meta.selectionset.graphql meta.arguments variable#c3af9d
entity.name.fragment.graphql, variable.fragment.graphql#42a38c
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#c3af9d
source.shell variable.other#1d6da1
support.constant#1d6da1normal
meta.scope.prerequisites.makefile#fac357
meta.attribute-selector.scss#fac357
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#c3af9d
meta.preprocessor.haskell#634e67