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#90a5bc10
  • activityBar.activeBorder#9d53a780
  • activityBar.background#1c0b28
  • activityBar.foreground#bbb2ad
  • activityBar.inactiveForeground#534a5e
  • activityBarBadge.background#9d53a7
  • activityBarBadge.foreground#1c0b28
  • badge.background#0a4b61
  • badge.foreground#bbb2ad
  • breadcrumb.activeSelectionForeground#bbb2ad
  • breadcrumb.background#1c0b28
  • breadcrumb.focusForeground#bbb2ad
  • breadcrumb.foreground#534a5e
  • breadcrumbPicker.background#0a0712
  • button.background#140e24
  • button.foreground#bbb2ad
  • checkbox.background#140e24
  • checkbox.border#0a0712
  • checkbox.foreground#bbb2ad
  • contrastBorder#0a0712
  • debugToolBar.background#140e24
  • diffEditor.insertedTextBackground#5bb0b220
  • diffEditor.removedTextBackground#99236d50
  • dropdown.background#1c0b28
  • dropdown.border#0a0712
  • dropdown.foreground#bbb2ad
  • editor.background#1c0b28
  • editor.findMatchBackground#e9b8a780
  • editor.findMatchHighlightBackground#0a6b7e40
  • editor.findRangeHighlightBackground#1f163775
  • editor.foldBackground#140e24
  • editor.foreground#bbb2ad
  • editor.hoverHighlightBackground#0a0712
  • editor.lineHighlightBorder#0a4b61
  • editor.rangeHighlightBackground#90a5bc15
  • editor.selectionBackground#0a4b61
  • editor.selectionHighlightBackground#0a4b61
  • editor.snippetFinalTabstopHighlightBackground#1c0b28
  • editor.snippetFinalTabstopHighlightBorder#5bb0b2
  • editor.snippetTabstopHighlightBackground#1c0b28
  • editor.snippetTabstopHighlightBorder#534a5e
  • editor.wordHighlightBackground#7e82cc50
  • editor.wordHighlightStrongBackground#5bb0b250
  • editorCodeLens.foreground#534a5e
  • editorError.foreground#99236d
  • editorGroup.border#90a5bc
  • editorGroup.dropBackground#1f163770
  • editorGroupHeader.tabsBackground#0a0712
  • editorGutter.addedBackground#5bb0b280
  • editorGutter.deletedBackground#99236d80
  • editorGutter.modifiedBackground#7e82cc80
  • editorHoverWidget.background#1c0b28
  • editorHoverWidget.border#534a5e
  • editorIndentGuide.activeBackground#0a6b7e45
  • editorIndentGuide.background#0a6b7e1A
  • editorLineNumber.foreground#534a5e
  • editorLink.activeForeground#7e82cc
  • editorMarkerNavigation.background#140e24
  • editorOverviewRuler.addedForeground#5bb0b280
  • editorOverviewRuler.border#0a0712
  • editorOverviewRuler.currentContentForeground#5bb0b2
  • editorOverviewRuler.deletedForeground#99236d80
  • editorOverviewRuler.errorForeground#99236d80
  • editorOverviewRuler.incomingContentForeground#90a5bc
  • editorOverviewRuler.infoForeground#7e82cc80
  • editorOverviewRuler.modifiedForeground#7e82cc80
  • editorOverviewRuler.selectionHighlightForeground#e9b8a7
  • editorOverviewRuler.warningForeground#e9b8a780
  • editorOverviewRuler.wordHighlightForeground#7e82cc
  • editorOverviewRuler.wordHighlightStrongForeground#5bb0b2
  • editorRuler.foreground#0a6b7e1A
  • editorSuggestWidget.background#140e24
  • editorSuggestWidget.foreground#bbb2ad
  • editorSuggestWidget.selectedBackground#0a4b61
  • editorWarning.foreground#e9b8a7
  • editorWhitespace.foreground#0a6b7e1A
  • editorWidget.background#140e24
  • errorForeground#99236d
  • extensionButton.prominentBackground#5bb0b290
  • extensionButton.prominentForeground#bbb2ad
  • extensionButton.prominentHoverBackground#5bb0b260
  • focusBorder#534a5e
  • foreground#bbb2ad
  • gitDecoration.conflictingResourceForeground#e9b8a7
  • gitDecoration.deletedResourceForeground#99236d
  • gitDecoration.ignoredResourceForeground#534a5e
  • gitDecoration.modifiedResourceForeground#7e82cc
  • gitDecoration.untrackedResourceForeground#5bb0b2
  • input.background#1c0b28
  • input.border#0a0712
  • input.foreground#bbb2ad
  • input.placeholderForeground#534a5e
  • inputOption.activeBorder#90a5bc
  • inputValidation.errorBackground#1c0b28
  • inputValidation.errorBorder#99236d
  • inputValidation.errorForeground#99236d
  • inputValidation.infoBackground#1c0b28
  • inputValidation.infoBorder#90a5bc
  • inputValidation.infoForeground#90a5bc
  • inputValidation.warningBackground#1c0b28
  • inputValidation.warningBorder#e9b8a7
  • inputValidation.warningForeground#e9b8a7
  • list.activeSelectionBackground#0a4b61
  • list.activeSelectionForeground#bbb2ad
  • list.dropBackground#0a4b61
  • list.errorForeground#99236d
  • list.focusBackground#1f163775
  • list.highlightForeground#7e82cc
  • list.hoverBackground#1f163775
  • list.inactiveSelectionBackground#1f163775
  • list.warningForeground#e9b8a7
  • listFilterWidget.background#1c0b28
  • listFilterWidget.noMatchesOutline#99236d
  • listFilterWidget.outline#0a4b61
  • merge.currentHeaderBackground#5bb0b290
  • merge.incomingHeaderBackground#90a5bc90
  • notification.background#1c0b28
  • notification.buttonBackground#0a4b61
  • notification.buttonForeground#bbb2ad
  • notification.buttonHoverBackground#1f163775
  • notification.errorBackground#99236d
  • notification.errorForeground#1c0b28
  • notification.foreground#bbb2ad
  • notification.infoBackground#90a5bc
  • notification.infoForeground#1c0b28
  • notification.warningBackground#e9b8a7
  • notification.warningForeground#1c0b28
  • notificationCenter.border#140e24
  • notificationCenterHeader.background#1c0b28
  • notificationCenterHeader.foreground#bbb2ad
  • notificationLink.foreground#7e82cc
  • notifications.background#1c0b28
  • notifications.border#140e24
  • notifications.foreground#bbb2ad
  • notificationsErrorIcon.foreground#99236d
  • notificationsInfoIcon.foreground#90a5bc
  • notificationsWarningIcon.foreground#e9b8a7
  • notificationToast.border#140e24
  • panel.background#1c0b28
  • panel.border#90a5bc
  • panelInput.border#bbb2ad
  • panelTitle.activeBorder#9d53a7
  • panelTitle.activeForeground#bbb2ad
  • panelTitle.inactiveForeground#534a5e
  • peekView.border#0a4b61
  • peekViewEditor.background#1c0b28
  • peekViewEditor.matchHighlightBackground#79318880
  • peekViewResult.background#140e24
  • peekViewResult.fileForeground#bbb2ad
  • peekViewResult.lineForeground#bbb2ad
  • peekViewResult.matchHighlightBackground#79318880
  • peekViewResult.selectionBackground#0a4b61
  • peekViewResult.selectionForeground#bbb2ad
  • peekViewTitle.background#0a0712
  • peekViewTitleDescription.foreground#534a5e
  • peekViewTitleLabel.foreground#bbb2ad
  • pickerGroup.border#90a5bc
  • pickerGroup.foreground#7e82cc
  • progressBar.background#9d53a7
  • scrollbar.shadow#444444
  • selection.background#90a5bc
  • settings.checkboxBackground#140e24
  • settings.checkboxBorder#0a0712
  • settings.checkboxForeground#bbb2ad
  • settings.dropdownBackground#140e24
  • settings.dropdownBorder#0a0712
  • settings.dropdownForeground#bbb2ad
  • settings.headerForeground#bbb2ad
  • settings.modifiedItemIndicator#e9b8a7
  • settings.numberInputBackground#140e24
  • settings.numberInputBorder#0a0712
  • settings.numberInputForeground#bbb2ad
  • settings.textInputBackground#140e24
  • settings.textInputBorder#0a0712
  • settings.textInputForeground#bbb2ad
  • sideBar.background#140e24
  • sideBarSectionHeader.background#1c0b28
  • sideBarSectionHeader.border#0a0712
  • sideBarTitle.foreground#bbb2ad
  • statusBar.background#0a0712
  • statusBar.debuggingBackground#99236d
  • statusBar.debuggingForeground#0a0712
  • statusBar.foreground#bbb2ad
  • statusBar.noFolderBackground#0a0712
  • statusBar.noFolderForeground#bbb2ad
  • statusBarItem.prominentBackground#99236d
  • statusBarItem.prominentHoverBackground#e9b8a7
  • statusBarItem.remoteBackground#90a5bc
  • statusBarItem.remoteForeground#1c0b28
  • tab.activeBackground#1c0b28
  • tab.activeBorderTop#9d53a780
  • tab.activeForeground#bbb2ad
  • tab.border#0a0712
  • tab.inactiveBackground#140e24
  • tab.inactiveForeground#534a5e
  • terminal.ansiBlack#0a4b61
  • terminal.ansiBlue#90a5bc
  • terminal.ansiBrightBlack#1f1637
  • terminal.ansiBrightBlue#38163d
  • terminal.ansiBrightCyan#5d5f71
  • terminal.ansiBrightGreen#0a6b7e
  • terminal.ansiBrightMagenta#bc93b6
  • terminal.ansiBrightRed#c77171
  • terminal.ansiBrightWhite#0a6b7e
  • terminal.ansiBrightYellow#793188
  • terminal.ansiCyan#7e82cc
  • terminal.ansiGreen#5bb0b2
  • terminal.ansiMagenta#9d53a7
  • terminal.ansiRed#99236d
  • terminal.ansiWhite#f0e7d5
  • terminal.ansiYellow#e9b8a7
  • terminal.background#1c0b28
  • terminal.border#bbb2ad
  • terminal.foreground#bbb2ad
  • terminal.selectionBackground#0a4b6150
  • textBlockQuote.background#140e24
  • titleBar.activeBackground#140e24
  • titleBar.activeForeground#bbb2ad
  • titleBar.inactiveBackground#0a0712
  • titleBar.inactiveForeground#534a5e
  • walkThrough.embeddedEditorBackground#140e24
  • welcomePage.buttonBackground#0a4b61
  • welcomePage.buttonHoverBackground#1f163775
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#90a5bc
source#bbb2ad
meta.diff, meta.diff.header#534a5e
markup.inserted#5bb0b2
markup.deleted#99236d
markup.changed#e9b8a7
invalid#99236dunderline italic
invalid.deprecated#bbb2adunderline italic
entity.name.filename#793188
markup.error#99236d
markup.underlineunderline
markup.bold#e9b8a7bold
markup.heading#90a5bcbold
markup.italic#793188italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#7e82cc
markup.inline.raw, markup.raw.restructuredtext#5bb0b2
markup.underline.link, markup.underline.link.image#7e82cc
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#9d53a7
entity.name.directive.restructuredtext, markup.quote#793188italic
meta.separator.markdown#534a5e
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#5bb0b2
punctuation.definition.constant.restructuredtext#90a5bc
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#90a5bc
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#bbb2ad
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#793188
entity.name.type.class, entity.name.class#7e82ccnormal
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#90a5bcitalic
entity.other.inherited-class#7e82ccitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#534a5e
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#9d53a7
comment.block.documentation entity.name.type#7e82ccitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#7e82cc
comment.block.documentation variable#e9b8a7italic
constant, variable.other.constant#90a5bc
constant.character.escape, constant.character.string.escape, constant.regexp#9d53a7
entity.name.tag#9d53a7
entity.other.attribute-name.parent-selector#9d53a7
entity.other.attribute-name#5bb0b2italic
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#5bb0b2
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#e9b8a7italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#5bb0b2italic
meta.decorator variable.other.object#5bb0b2
keyword, punctuation.definition.keyword#9d53a7
keyword.control.new, keyword.operator.newbold
meta.selector#9d53a7
support#7e82ccitalic
support.function.magic, support.variable, variable.other.predefined#90a5bcregular
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#9d53a7
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#bbb2ad
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#9d53a7
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#7e82cc
constant.other.date, constant.other.timestamp#e9b8a7
variable.other.alias.yaml#5bb0b2italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#9d53a7regular
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#7e82ccitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#e9b8a7
storage.modifier#9d53a7
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#793188
punctuation.definition.group.capture.regexp#9d53a7
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#99236d
punctuation.definition.character-class.regexp#7e82cc
punctuation.definition.group.regexp#e9b8a7
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#99236d
meta.assertion.look-ahead.regexp#5bb0b2
string#793188
punctuation.definition.string.begin, punctuation.definition.string.end#38163d
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#90a5bc
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#534a5e
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#bbb2ad
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#e9b8a7italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#bbb2adnormal
meta.selectionset.graphql variable#793188
meta.selectionset.graphql meta.arguments variable#bbb2ad
entity.name.fragment.graphql, variable.fragment.graphql#7e82cc
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#bbb2ad
source.shell variable.other#90a5bc
support.constant#90a5bcnormal
meta.scope.prerequisites.makefile#793188
meta.attribute-selector.scss#793188
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#bbb2ad
meta.preprocessor.haskell#534a5e