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#8ed0ce10
  • activityBar.activeBorder#5e468c80
  • activityBar.background#051519
  • activityBar.foreground#b8b1a9
  • activityBar.inactiveForeground#666361
  • activityBarBadge.background#5e468c
  • activityBarBadge.foreground#051519
  • badge.background#333333
  • badge.foreground#b8b1a9
  • breadcrumb.activeSelectionForeground#b8b1a9
  • breadcrumb.background#051519
  • breadcrumb.focusForeground#b8b1a9
  • breadcrumb.foreground#666361
  • breadcrumbPicker.background#141414
  • button.background#282828
  • button.foreground#b8b1a9
  • checkbox.background#282828
  • checkbox.border#141414
  • checkbox.foreground#b8b1a9
  • contrastBorder#141414
  • debugToolBar.background#282828
  • diffEditor.insertedTextBackground#92d3a220
  • diffEditor.removedTextBackground#f8818e50
  • dropdown.background#051519
  • dropdown.border#141414
  • dropdown.foreground#b8b1a9
  • editor.background#051519
  • editor.findMatchBackground#1a8d6380
  • editor.findMatchHighlightBackground#e2d8cd40
  • editor.findRangeHighlightBackground#3d3d3d75
  • editor.foldBackground#282828
  • editor.foreground#b8b1a9
  • editor.hoverHighlightBackground#141414
  • editor.lineHighlightBorder#333333
  • editor.rangeHighlightBackground#8ed0ce15
  • editor.selectionBackground#333333
  • editor.selectionHighlightBackground#333333
  • editor.snippetFinalTabstopHighlightBackground#051519
  • editor.snippetFinalTabstopHighlightBorder#92d3a2
  • editor.snippetTabstopHighlightBackground#051519
  • editor.snippetTabstopHighlightBorder#666361
  • editor.wordHighlightBackground#31658c50
  • editor.wordHighlightStrongBackground#92d3a250
  • editorCodeLens.foreground#666361
  • editorError.foreground#f8818e
  • editorGroup.border#8ed0ce
  • editorGroup.dropBackground#3d3d3d70
  • editorGroupHeader.tabsBackground#141414
  • editorGutter.addedBackground#92d3a280
  • editorGutter.deletedBackground#f8818e80
  • editorGutter.modifiedBackground#31658c80
  • editorHoverWidget.background#051519
  • editorHoverWidget.border#666361
  • editorIndentGuide.activeBackground#e2d8cd45
  • editorIndentGuide.background#e2d8cd1A
  • editorLineNumber.foreground#666361
  • editorLink.activeForeground#31658c
  • editorMarkerNavigation.background#282828
  • editorOverviewRuler.addedForeground#92d3a280
  • editorOverviewRuler.border#141414
  • editorOverviewRuler.currentContentForeground#92d3a2
  • editorOverviewRuler.deletedForeground#f8818e80
  • editorOverviewRuler.errorForeground#f8818e80
  • editorOverviewRuler.incomingContentForeground#8ed0ce
  • editorOverviewRuler.infoForeground#31658c80
  • editorOverviewRuler.modifiedForeground#31658c80
  • editorOverviewRuler.selectionHighlightForeground#1a8d63
  • editorOverviewRuler.warningForeground#1a8d6380
  • editorOverviewRuler.wordHighlightForeground#31658c
  • editorOverviewRuler.wordHighlightStrongForeground#92d3a2
  • editorRuler.foreground#e2d8cd1A
  • editorSuggestWidget.background#282828
  • editorSuggestWidget.foreground#b8b1a9
  • editorSuggestWidget.selectedBackground#333333
  • editorWarning.foreground#1a8d63
  • editorWhitespace.foreground#e2d8cd1A
  • editorWidget.background#282828
  • errorForeground#f8818e
  • extensionButton.prominentBackground#92d3a290
  • extensionButton.prominentForeground#b8b1a9
  • extensionButton.prominentHoverBackground#92d3a260
  • focusBorder#666361
  • foreground#b8b1a9
  • gitDecoration.conflictingResourceForeground#1a8d63
  • gitDecoration.deletedResourceForeground#f8818e
  • gitDecoration.ignoredResourceForeground#666361
  • gitDecoration.modifiedResourceForeground#31658c
  • gitDecoration.untrackedResourceForeground#92d3a2
  • input.background#051519
  • input.border#141414
  • input.foreground#b8b1a9
  • input.placeholderForeground#666361
  • inputOption.activeBorder#8ed0ce
  • inputValidation.errorBackground#051519
  • inputValidation.errorBorder#f8818e
  • inputValidation.errorForeground#f8818e
  • inputValidation.infoBackground#051519
  • inputValidation.infoBorder#8ed0ce
  • inputValidation.infoForeground#8ed0ce
  • inputValidation.warningBackground#051519
  • inputValidation.warningBorder#1a8d63
  • inputValidation.warningForeground#1a8d63
  • list.activeSelectionBackground#333333
  • list.activeSelectionForeground#b8b1a9
  • list.dropBackground#333333
  • list.errorForeground#f8818e
  • list.focusBackground#3d3d3d75
  • list.highlightForeground#31658c
  • list.hoverBackground#3d3d3d75
  • list.inactiveSelectionBackground#3d3d3d75
  • list.warningForeground#1a8d63
  • listFilterWidget.background#051519
  • listFilterWidget.noMatchesOutline#f8818e
  • listFilterWidget.outline#333333
  • merge.currentHeaderBackground#92d3a290
  • merge.incomingHeaderBackground#8ed0ce90
  • notification.background#051519
  • notification.buttonBackground#333333
  • notification.buttonForeground#b8b1a9
  • notification.buttonHoverBackground#3d3d3d75
  • notification.errorBackground#f8818e
  • notification.errorForeground#051519
  • notification.foreground#b8b1a9
  • notification.infoBackground#8ed0ce
  • notification.infoForeground#051519
  • notification.warningBackground#1a8d63
  • notification.warningForeground#051519
  • notificationCenter.border#282828
  • notificationCenterHeader.background#051519
  • notificationCenterHeader.foreground#b8b1a9
  • notificationLink.foreground#31658c
  • notifications.background#051519
  • notifications.border#282828
  • notifications.foreground#b8b1a9
  • notificationsErrorIcon.foreground#f8818e
  • notificationsInfoIcon.foreground#8ed0ce
  • notificationsWarningIcon.foreground#1a8d63
  • notificationToast.border#282828
  • panel.background#051519
  • panel.border#8ed0ce
  • panelInput.border#b8b1a9
  • panelTitle.activeBorder#5e468c
  • panelTitle.activeForeground#b8b1a9
  • panelTitle.inactiveForeground#666361
  • peekView.border#333333
  • peekViewEditor.background#051519
  • peekViewEditor.matchHighlightBackground#2fc85980
  • peekViewResult.background#282828
  • peekViewResult.fileForeground#b8b1a9
  • peekViewResult.lineForeground#b8b1a9
  • peekViewResult.matchHighlightBackground#2fc85980
  • peekViewResult.selectionBackground#333333
  • peekViewResult.selectionForeground#b8b1a9
  • peekViewTitle.background#141414
  • peekViewTitleDescription.foreground#666361
  • peekViewTitleLabel.foreground#b8b1a9
  • pickerGroup.border#8ed0ce
  • pickerGroup.foreground#31658c
  • progressBar.background#5e468c
  • scrollbar.shadow#444444
  • selection.background#8ed0ce
  • settings.checkboxBackground#282828
  • settings.checkboxBorder#141414
  • settings.checkboxForeground#b8b1a9
  • settings.dropdownBackground#282828
  • settings.dropdownBorder#141414
  • settings.dropdownForeground#b8b1a9
  • settings.headerForeground#b8b1a9
  • settings.modifiedItemIndicator#1a8d63
  • settings.numberInputBackground#282828
  • settings.numberInputBorder#141414
  • settings.numberInputForeground#b8b1a9
  • settings.textInputBackground#282828
  • settings.textInputBorder#141414
  • settings.textInputForeground#b8b1a9
  • sideBar.background#282828
  • sideBarSectionHeader.background#051519
  • sideBarSectionHeader.border#141414
  • sideBarTitle.foreground#b8b1a9
  • statusBar.background#141414
  • statusBar.debuggingBackground#f8818e
  • statusBar.debuggingForeground#141414
  • statusBar.foreground#b8b1a9
  • statusBar.noFolderBackground#141414
  • statusBar.noFolderForeground#b8b1a9
  • statusBarItem.prominentBackground#f8818e
  • statusBarItem.prominentHoverBackground#1a8d63
  • statusBarItem.remoteBackground#8ed0ce
  • statusBarItem.remoteForeground#051519
  • tab.activeBackground#051519
  • tab.activeBorderTop#5e468c80
  • tab.activeForeground#b8b1a9
  • tab.border#141414
  • tab.inactiveBackground#282828
  • tab.inactiveForeground#666361
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#8ed0ce
  • terminal.ansiBrightBlack#3d3d3d
  • terminal.ansiBrightBlue#39a7a2
  • terminal.ansiBrightCyan#6096bf
  • terminal.ansiBrightGreen#6bb48d
  • terminal.ansiBrightMagenta#7e62b3
  • terminal.ansiBrightRed#fb3d66
  • terminal.ansiBrightWhite#e2d8cd
  • terminal.ansiBrightYellow#2fc859
  • terminal.ansiCyan#31658c
  • terminal.ansiGreen#92d3a2
  • terminal.ansiMagenta#5e468c
  • terminal.ansiRed#f8818e
  • terminal.ansiWhite#e2d8cd
  • terminal.ansiYellow#1a8d63
  • terminal.background#051519
  • terminal.border#b8b1a9
  • terminal.foreground#b8b1a9
  • terminal.selectionBackground#33333350
  • textBlockQuote.background#282828
  • titleBar.activeBackground#282828
  • titleBar.activeForeground#b8b1a9
  • titleBar.inactiveBackground#141414
  • titleBar.inactiveForeground#666361
  • walkThrough.embeddedEditorBackground#282828
  • welcomePage.buttonBackground#333333
  • welcomePage.buttonHoverBackground#3d3d3d75
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#8ed0ce
source#b8b1a9
meta.diff, meta.diff.header#666361
markup.inserted#92d3a2
markup.deleted#f8818e
markup.changed#1a8d63
invalid#f8818eunderline italic
invalid.deprecated#b8b1a9underline italic
entity.name.filename#2fc859
markup.error#f8818e
markup.underlineunderline
markup.bold#1a8d63bold
markup.heading#8ed0cebold
markup.italic#2fc859italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#31658c
markup.inline.raw, markup.raw.restructuredtext#92d3a2
markup.underline.link, markup.underline.link.image#31658c
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#5e468c
entity.name.directive.restructuredtext, markup.quote#2fc859italic
meta.separator.markdown#666361
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#92d3a2
punctuation.definition.constant.restructuredtext#8ed0ce
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#8ed0ce
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#b8b1a9
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#2fc859
entity.name.type.class, entity.name.class#31658cnormal
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#8ed0ceitalic
entity.other.inherited-class#31658citalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#666361
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#5e468c
comment.block.documentation entity.name.type#31658citalic
comment.block.documentation entity.name.type punctuation.definition.bracket#31658c
comment.block.documentation variable#1a8d63italic
constant, variable.other.constant#8ed0ce
constant.character.escape, constant.character.string.escape, constant.regexp#5e468c
entity.name.tag#5e468c
entity.other.attribute-name.parent-selector#5e468c
entity.other.attribute-name#92d3a2italic
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#92d3a2
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#1a8d63italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#92d3a2italic
meta.decorator variable.other.object#92d3a2
keyword, punctuation.definition.keyword#5e468c
keyword.control.new, keyword.operator.newbold
meta.selector#5e468c
support#31658citalic
support.function.magic, support.variable, variable.other.predefined#8ed0ceregular
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#5e468c
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#b8b1a9
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#5e468c
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#31658c
constant.other.date, constant.other.timestamp#1a8d63
variable.other.alias.yaml#92d3a2italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#5e468cregular
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#31658citalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#1a8d63
storage.modifier#5e468c
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#2fc859
punctuation.definition.group.capture.regexp#5e468c
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#f8818e
punctuation.definition.character-class.regexp#31658c
punctuation.definition.group.regexp#1a8d63
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#f8818e
meta.assertion.look-ahead.regexp#92d3a2
string#2fc859
punctuation.definition.string.begin, punctuation.definition.string.end#39a7a2
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#8ed0ce
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#666361
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#b8b1a9
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#1a8d63italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#b8b1a9normal
meta.selectionset.graphql variable#2fc859
meta.selectionset.graphql meta.arguments variable#b8b1a9
entity.name.fragment.graphql, variable.fragment.graphql#31658c
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#b8b1a9
source.shell variable.other#8ed0ce
support.constant#8ed0cenormal
meta.scope.prerequisites.makefile#2fc859
meta.attribute-selector.scss#2fc859
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#b8b1a9
meta.preprocessor.haskell#666361