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#487cf410
  • activityBar.activeBorder#8c35c880
  • activityBar.background#161423
  • activityBar.foreground#8c8a92
  • activityBar.inactiveForeground#696377
  • activityBarBadge.background#8c35c8
  • activityBarBadge.foreground#161423
  • badge.background#2d283e
  • badge.foreground#8c8a92
  • breadcrumb.activeSelectionForeground#8c8a92
  • breadcrumb.background#161423
  • breadcrumb.focusForeground#8c8a92
  • breadcrumb.foreground#696377
  • breadcrumbPicker.background#1d1a23
  • button.background#3a3546
  • button.foreground#8c8a92
  • checkbox.background#3a3546
  • checkbox.border#1d1a23
  • checkbox.foreground#8c8a92
  • contrastBorder#1d1a23
  • debugToolBar.background#3a3546
  • diffEditor.insertedTextBackground#1fa91b20
  • diffEditor.removedTextBackground#ec216050
  • dropdown.background#161423
  • dropdown.border#1d1a23
  • dropdown.foreground#8c8a92
  • editor.background#161423
  • editor.findMatchBackground#8ddc1f80
  • editor.findMatchHighlightBackground#a188f740
  • editor.findRangeHighlightBackground#58506a75
  • editor.foldBackground#3a3546
  • editor.foreground#8c8a92
  • editor.hoverHighlightBackground#1d1a23
  • editor.lineHighlightBorder#2d283e
  • editor.rangeHighlightBackground#487cf415
  • editor.selectionBackground#2d283e
  • editor.selectionHighlightBackground#2d283e
  • editor.snippetFinalTabstopHighlightBackground#161423
  • editor.snippetFinalTabstopHighlightBorder#1fa91b
  • editor.snippetTabstopHighlightBackground#161423
  • editor.snippetTabstopHighlightBorder#696377
  • editor.wordHighlightBackground#3added50
  • editor.wordHighlightStrongBackground#1fa91b50
  • editorCodeLens.foreground#696377
  • editorError.foreground#ec2160
  • editorGroup.border#487cf4
  • editorGroup.dropBackground#58506a70
  • editorGroupHeader.tabsBackground#1d1a23
  • editorGutter.addedBackground#1fa91b80
  • editorGutter.deletedBackground#ec216080
  • editorGutter.modifiedBackground#3added80
  • editorHoverWidget.background#161423
  • editorHoverWidget.border#696377
  • editorIndentGuide.activeBackground#a188f745
  • editorIndentGuide.background#a188f71A
  • editorLineNumber.foreground#696377
  • editorLink.activeForeground#3added
  • editorMarkerNavigation.background#3a3546
  • editorOverviewRuler.addedForeground#1fa91b80
  • editorOverviewRuler.border#1d1a23
  • editorOverviewRuler.currentContentForeground#1fa91b
  • editorOverviewRuler.deletedForeground#ec216080
  • editorOverviewRuler.errorForeground#ec216080
  • editorOverviewRuler.incomingContentForeground#487cf4
  • editorOverviewRuler.infoForeground#3added80
  • editorOverviewRuler.modifiedForeground#3added80
  • editorOverviewRuler.selectionHighlightForeground#8ddc1f
  • editorOverviewRuler.warningForeground#8ddc1f80
  • editorOverviewRuler.wordHighlightForeground#3added
  • editorOverviewRuler.wordHighlightStrongForeground#1fa91b
  • editorRuler.foreground#a188f71A
  • editorSuggestWidget.background#3a3546
  • editorSuggestWidget.foreground#8c8a92
  • editorSuggestWidget.selectedBackground#2d283e
  • editorWarning.foreground#8ddc1f
  • editorWhitespace.foreground#a188f71A
  • editorWidget.background#3a3546
  • errorForeground#ec2160
  • extensionButton.prominentBackground#1fa91b90
  • extensionButton.prominentForeground#8c8a92
  • extensionButton.prominentHoverBackground#1fa91b60
  • focusBorder#696377
  • foreground#8c8a92
  • gitDecoration.conflictingResourceForeground#8ddc1f
  • gitDecoration.deletedResourceForeground#ec2160
  • gitDecoration.ignoredResourceForeground#696377
  • gitDecoration.modifiedResourceForeground#3added
  • gitDecoration.untrackedResourceForeground#1fa91b
  • input.background#161423
  • input.border#1d1a23
  • input.foreground#8c8a92
  • input.placeholderForeground#696377
  • inputOption.activeBorder#487cf4
  • inputValidation.errorBackground#161423
  • inputValidation.errorBorder#ec2160
  • inputValidation.errorForeground#ec2160
  • inputValidation.infoBackground#161423
  • inputValidation.infoBorder#487cf4
  • inputValidation.infoForeground#487cf4
  • inputValidation.warningBackground#161423
  • inputValidation.warningBorder#8ddc1f
  • inputValidation.warningForeground#8ddc1f
  • list.activeSelectionBackground#2d283e
  • list.activeSelectionForeground#8c8a92
  • list.dropBackground#2d283e
  • list.errorForeground#ec2160
  • list.focusBackground#58506a75
  • list.highlightForeground#3added
  • list.hoverBackground#58506a75
  • list.inactiveSelectionBackground#58506a75
  • list.warningForeground#8ddc1f
  • listFilterWidget.background#161423
  • listFilterWidget.noMatchesOutline#ec2160
  • listFilterWidget.outline#2d283e
  • merge.currentHeaderBackground#1fa91b90
  • merge.incomingHeaderBackground#487cf490
  • notification.background#161423
  • notification.buttonBackground#2d283e
  • notification.buttonForeground#8c8a92
  • notification.buttonHoverBackground#58506a75
  • notification.errorBackground#ec2160
  • notification.errorForeground#161423
  • notification.foreground#8c8a92
  • notification.infoBackground#487cf4
  • notification.infoForeground#161423
  • notification.warningBackground#8ddc1f
  • notification.warningForeground#161423
  • notificationCenter.border#3a3546
  • notificationCenterHeader.background#161423
  • notificationCenterHeader.foreground#8c8a92
  • notificationLink.foreground#3added
  • notifications.background#161423
  • notifications.border#3a3546
  • notifications.foreground#8c8a92
  • notificationsErrorIcon.foreground#ec2160
  • notificationsInfoIcon.foreground#487cf4
  • notificationsWarningIcon.foreground#8ddc1f
  • notificationToast.border#3a3546
  • panel.background#161423
  • panel.border#487cf4
  • panelInput.border#8c8a92
  • panelTitle.activeBorder#8c35c8
  • panelTitle.activeForeground#8c8a92
  • panelTitle.inactiveForeground#696377
  • peekView.border#2d283e
  • peekViewEditor.background#161423
  • peekViewEditor.matchHighlightBackground#b2dc8780
  • peekViewResult.background#3a3546
  • peekViewResult.fileForeground#8c8a92
  • peekViewResult.lineForeground#8c8a92
  • peekViewResult.matchHighlightBackground#b2dc8780
  • peekViewResult.selectionBackground#2d283e
  • peekViewResult.selectionForeground#8c8a92
  • peekViewTitle.background#1d1a23
  • peekViewTitleDescription.foreground#696377
  • peekViewTitleLabel.foreground#8c8a92
  • pickerGroup.border#487cf4
  • pickerGroup.foreground#3added
  • progressBar.background#8c35c8
  • scrollbar.shadow#444444
  • selection.background#487cf4
  • settings.checkboxBackground#3a3546
  • settings.checkboxBorder#1d1a23
  • settings.checkboxForeground#8c8a92
  • settings.dropdownBackground#3a3546
  • settings.dropdownBorder#1d1a23
  • settings.dropdownForeground#8c8a92
  • settings.headerForeground#8c8a92
  • settings.modifiedItemIndicator#8ddc1f
  • settings.numberInputBackground#3a3546
  • settings.numberInputBorder#1d1a23
  • settings.numberInputForeground#8c8a92
  • settings.textInputBackground#3a3546
  • settings.textInputBorder#1d1a23
  • settings.textInputForeground#8c8a92
  • sideBar.background#3a3546
  • sideBarSectionHeader.background#161423
  • sideBarSectionHeader.border#1d1a23
  • sideBarTitle.foreground#8c8a92
  • statusBar.background#1d1a23
  • statusBar.debuggingBackground#ec2160
  • statusBar.debuggingForeground#1d1a23
  • statusBar.foreground#8c8a92
  • statusBar.noFolderBackground#1d1a23
  • statusBar.noFolderForeground#8c8a92
  • statusBarItem.prominentBackground#ec2160
  • statusBarItem.prominentHoverBackground#8ddc1f
  • statusBarItem.remoteBackground#487cf4
  • statusBarItem.remoteForeground#161423
  • tab.activeBackground#161423
  • tab.activeBorderTop#8c35c880
  • tab.activeForeground#8c8a92
  • tab.border#1d1a23
  • tab.inactiveBackground#3a3546
  • tab.inactiveForeground#696377
  • terminal.ansiBlack#2d283e
  • terminal.ansiBlue#487cf4
  • terminal.ansiBrightBlack#58506a
  • terminal.ansiBrightBlue#a9bbeb
  • terminal.ansiBrightCyan#9ce3ea
  • terminal.ansiBrightGreen#52a95d
  • terminal.ansiBrightMagenta#ac81c1
  • terminal.ansiBrightRed#f0719a
  • terminal.ansiBrightWhite#a188f7
  • terminal.ansiBrightYellow#b2dc87
  • terminal.ansiCyan#3added
  • terminal.ansiGreen#1fa91b
  • terminal.ansiMagenta#8c35c8
  • terminal.ansiRed#ec2160
  • terminal.ansiWhite#9e9ea0
  • terminal.ansiYellow#8ddc1f
  • terminal.background#161423
  • terminal.border#8c8a92
  • terminal.foreground#8c8a92
  • terminal.selectionBackground#2d283e50
  • textBlockQuote.background#3a3546
  • titleBar.activeBackground#3a3546
  • titleBar.activeForeground#8c8a92
  • titleBar.inactiveBackground#1d1a23
  • titleBar.inactiveForeground#696377
  • walkThrough.embeddedEditorBackground#3a3546
  • welcomePage.buttonBackground#2d283e
  • welcomePage.buttonHoverBackground#58506a75
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#487cf4
source#8c8a92
meta.diff, meta.diff.header#696377
markup.inserted#1fa91b
markup.deleted#ec2160
markup.changed#8ddc1f
invalid#ec2160underline italic
invalid.deprecated#8c8a92underline italic
entity.name.filename#b2dc87
markup.error#ec2160
markup.underlineunderline
markup.bold#8ddc1fbold
markup.heading#487cf4bold
markup.italic#b2dc87italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#3added
markup.inline.raw, markup.raw.restructuredtext#1fa91b
markup.underline.link, markup.underline.link.image#3added
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#8c35c8
entity.name.directive.restructuredtext, markup.quote#b2dc87italic
meta.separator.markdown#696377
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#1fa91b
punctuation.definition.constant.restructuredtext#487cf4
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#487cf4
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#8c8a92
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#b2dc87
entity.name.type.class, entity.name.class#3addednormal
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#487cf4italic
entity.other.inherited-class#3addeditalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#696377
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#8c35c8
comment.block.documentation entity.name.type#3addeditalic
comment.block.documentation entity.name.type punctuation.definition.bracket#3added
comment.block.documentation variable#8ddc1fitalic
constant, variable.other.constant#487cf4
constant.character.escape, constant.character.string.escape, constant.regexp#8c35c8
entity.name.tag#8c35c8
entity.other.attribute-name.parent-selector#8c35c8
entity.other.attribute-name#1fa91bitalic
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#1fa91b
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#8ddc1fitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#1fa91bitalic
meta.decorator variable.other.object#1fa91b
keyword, punctuation.definition.keyword#8c35c8
keyword.control.new, keyword.operator.newbold
meta.selector#8c35c8
support#3addeditalic
support.function.magic, support.variable, variable.other.predefined#487cf4regular
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#8c35c8
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#8c8a92
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#8c35c8
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#3added
constant.other.date, constant.other.timestamp#8ddc1f
variable.other.alias.yaml#1fa91bitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#8c35c8regular
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#3addeditalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#8ddc1f
storage.modifier#8c35c8
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#b2dc87
punctuation.definition.group.capture.regexp#8c35c8
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ec2160
punctuation.definition.character-class.regexp#3added
punctuation.definition.group.regexp#8ddc1f
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ec2160
meta.assertion.look-ahead.regexp#1fa91b
string#b2dc87
punctuation.definition.string.begin, punctuation.definition.string.end#a9bbeb
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#487cf4
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#696377
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#8c8a92
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#8ddc1fitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#8c8a92normal
meta.selectionset.graphql variable#b2dc87
meta.selectionset.graphql meta.arguments variable#8c8a92
entity.name.fragment.graphql, variable.fragment.graphql#3added
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#8c8a92
source.shell variable.other#487cf4
support.constant#487cf4normal
meta.scope.prerequisites.makefile#b2dc87
meta.attribute-selector.scss#b2dc87
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#8c8a92
meta.preprocessor.haskell#696377