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#1290bf10
  • activityBar.activeBorder#c85e7c80
  • activityBar.background#322931
  • activityBar.foreground#a9a4a8
  • activityBar.inactiveForeground#898388
  • activityBarBadge.background#c85e7c
  • activityBarBadge.foreground#322931
  • badge.background#322931
  • badge.foreground#a9a4a8
  • breadcrumb.activeSelectionForeground#a9a4a8
  • breadcrumb.background#322931
  • breadcrumb.focusForeground#a9a4a8
  • breadcrumb.foreground#898388
  • breadcrumbPicker.background#282628
  • button.background#504c50
  • button.foreground#a9a4a8
  • checkbox.background#504c50
  • checkbox.border#282628
  • checkbox.foreground#a9a4a8
  • contrastBorder#282628
  • debugToolBar.background#504c50
  • diffEditor.insertedTextBackground#8fc13e20
  • diffEditor.removedTextBackground#dd464c50
  • dropdown.background#322931
  • dropdown.border#282628
  • dropdown.foreground#a9a4a8
  • editor.background#322931
  • editor.findMatchBackground#fdcc5980
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#79737975
  • editor.foldBackground#504c50
  • editor.foreground#a9a4a8
  • editor.hoverHighlightBackground#282628
  • editor.lineHighlightBorder#322931
  • editor.rangeHighlightBackground#1290bf15
  • editor.selectionBackground#322931
  • editor.selectionHighlightBackground#322931
  • editor.snippetFinalTabstopHighlightBackground#322931
  • editor.snippetFinalTabstopHighlightBorder#8fc13e
  • editor.snippetTabstopHighlightBackground#322931
  • editor.snippetTabstopHighlightBorder#898388
  • editor.wordHighlightBackground#149b9350
  • editor.wordHighlightStrongBackground#8fc13e50
  • editorCodeLens.foreground#898388
  • editorError.foreground#dd464c
  • editorGroup.border#1290bf
  • editorGroup.dropBackground#79737970
  • editorGroupHeader.tabsBackground#282628
  • editorGutter.addedBackground#8fc13e80
  • editorGutter.deletedBackground#dd464c80
  • editorGutter.modifiedBackground#149b9380
  • editorHoverWidget.background#322931
  • editorHoverWidget.border#898388
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#898388
  • editorLink.activeForeground#149b93
  • editorMarkerNavigation.background#504c50
  • editorOverviewRuler.addedForeground#8fc13e80
  • editorOverviewRuler.border#282628
  • editorOverviewRuler.currentContentForeground#8fc13e
  • editorOverviewRuler.deletedForeground#dd464c80
  • editorOverviewRuler.errorForeground#dd464c80
  • editorOverviewRuler.incomingContentForeground#1290bf
  • editorOverviewRuler.infoForeground#149b9380
  • editorOverviewRuler.modifiedForeground#149b9380
  • editorOverviewRuler.selectionHighlightForeground#fdcc59
  • editorOverviewRuler.warningForeground#fdcc5980
  • editorOverviewRuler.wordHighlightForeground#149b93
  • editorOverviewRuler.wordHighlightStrongForeground#8fc13e
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#504c50
  • editorSuggestWidget.foreground#a9a4a8
  • editorSuggestWidget.selectedBackground#322931
  • editorWarning.foreground#fdcc59
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#504c50
  • errorForeground#dd464c
  • extensionButton.prominentBackground#8fc13e90
  • extensionButton.prominentForeground#a9a4a8
  • extensionButton.prominentHoverBackground#8fc13e60
  • focusBorder#898388
  • foreground#a9a4a8
  • gitDecoration.conflictingResourceForeground#fdcc59
  • gitDecoration.deletedResourceForeground#dd464c
  • gitDecoration.ignoredResourceForeground#898388
  • gitDecoration.modifiedResourceForeground#149b93
  • gitDecoration.untrackedResourceForeground#8fc13e
  • input.background#322931
  • input.border#282628
  • input.foreground#a9a4a8
  • input.placeholderForeground#898388
  • inputOption.activeBorder#1290bf
  • inputValidation.errorBackground#322931
  • inputValidation.errorBorder#dd464c
  • inputValidation.errorForeground#dd464c
  • inputValidation.infoBackground#322931
  • inputValidation.infoBorder#1290bf
  • inputValidation.infoForeground#1290bf
  • inputValidation.warningBackground#322931
  • inputValidation.warningBorder#fdcc59
  • inputValidation.warningForeground#fdcc59
  • list.activeSelectionBackground#322931
  • list.activeSelectionForeground#a9a4a8
  • list.dropBackground#322931
  • list.errorForeground#dd464c
  • list.focusBackground#79737975
  • list.highlightForeground#149b93
  • list.hoverBackground#79737975
  • list.inactiveSelectionBackground#79737975
  • list.warningForeground#fdcc59
  • listFilterWidget.background#322931
  • listFilterWidget.noMatchesOutline#dd464c
  • listFilterWidget.outline#322931
  • merge.currentHeaderBackground#8fc13e90
  • merge.incomingHeaderBackground#1290bf90
  • notification.background#322931
  • notification.buttonBackground#322931
  • notification.buttonForeground#a9a4a8
  • notification.buttonHoverBackground#79737975
  • notification.errorBackground#dd464c
  • notification.errorForeground#322931
  • notification.foreground#a9a4a8
  • notification.infoBackground#1290bf
  • notification.infoForeground#322931
  • notification.warningBackground#fdcc59
  • notification.warningForeground#322931
  • notificationCenter.border#504c50
  • notificationCenterHeader.background#322931
  • notificationCenterHeader.foreground#a9a4a8
  • notificationLink.foreground#149b93
  • notifications.background#322931
  • notifications.border#504c50
  • notifications.foreground#a9a4a8
  • notificationsErrorIcon.foreground#dd464c
  • notificationsInfoIcon.foreground#1290bf
  • notificationsWarningIcon.foreground#fdcc59
  • notificationToast.border#504c50
  • panel.background#322931
  • panel.border#1290bf
  • panelInput.border#a9a4a8
  • panelTitle.activeBorder#c85e7c
  • panelTitle.activeForeground#a9a4a8
  • panelTitle.inactiveForeground#898388
  • peekView.border#322931
  • peekViewEditor.background#322931
  • peekViewEditor.matchHighlightBackground#5c545b80
  • peekViewResult.background#504c50
  • peekViewResult.fileForeground#a9a4a8
  • peekViewResult.lineForeground#a9a4a8
  • peekViewResult.matchHighlightBackground#5c545b80
  • peekViewResult.selectionBackground#322931
  • peekViewResult.selectionForeground#a9a4a8
  • peekViewTitle.background#282628
  • peekViewTitleDescription.foreground#898388
  • peekViewTitleLabel.foreground#a9a4a8
  • pickerGroup.border#1290bf
  • pickerGroup.foreground#149b93
  • progressBar.background#c85e7c
  • scrollbar.shadow#444444
  • selection.background#1290bf
  • settings.checkboxBackground#504c50
  • settings.checkboxBorder#282628
  • settings.checkboxForeground#a9a4a8
  • settings.dropdownBackground#504c50
  • settings.dropdownBorder#282628
  • settings.dropdownForeground#a9a4a8
  • settings.headerForeground#a9a4a8
  • settings.modifiedItemIndicator#fdcc59
  • settings.numberInputBackground#504c50
  • settings.numberInputBorder#282628
  • settings.numberInputForeground#a9a4a8
  • settings.textInputBackground#504c50
  • settings.textInputBorder#282628
  • settings.textInputForeground#a9a4a8
  • sideBar.background#504c50
  • sideBarSectionHeader.background#322931
  • sideBarSectionHeader.border#282628
  • sideBarTitle.foreground#a9a4a8
  • statusBar.background#282628
  • statusBar.debuggingBackground#dd464c
  • statusBar.debuggingForeground#282628
  • statusBar.foreground#a9a4a8
  • statusBar.noFolderBackground#282628
  • statusBar.noFolderForeground#a9a4a8
  • statusBarItem.prominentBackground#dd464c
  • statusBarItem.prominentHoverBackground#fdcc59
  • statusBarItem.remoteBackground#1290bf
  • statusBarItem.remoteForeground#322931
  • tab.activeBackground#322931
  • tab.activeBorderTop#c85e7c80
  • tab.activeForeground#a9a4a8
  • tab.border#282628
  • tab.inactiveBackground#504c50
  • tab.inactiveForeground#898388
  • terminal.ansiBlack#322931
  • terminal.ansiBlue#1290bf
  • terminal.ansiBrightBlack#797379
  • terminal.ansiBrightBlue#989498
  • terminal.ansiBrightCyan#b33508
  • terminal.ansiBrightGreen#433b42
  • terminal.ansiBrightMagenta#d5d3d5
  • terminal.ansiBrightRed#fd8b19
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#5c545b
  • terminal.ansiCyan#149b93
  • terminal.ansiGreen#8fc13e
  • terminal.ansiMagenta#c85e7c
  • terminal.ansiRed#dd464c
  • terminal.ansiWhite#b9b5b8
  • terminal.ansiYellow#fdcc59
  • terminal.background#322931
  • terminal.border#a9a4a8
  • terminal.foreground#a9a4a8
  • terminal.selectionBackground#32293150
  • textBlockQuote.background#504c50
  • titleBar.activeBackground#504c50
  • titleBar.activeForeground#a9a4a8
  • titleBar.inactiveBackground#282628
  • titleBar.inactiveForeground#898388
  • walkThrough.embeddedEditorBackground#504c50
  • welcomePage.buttonBackground#322931
  • welcomePage.buttonHoverBackground#79737975
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#1290bf
source#a9a4a8
meta.diff, meta.diff.header#898388
markup.inserted#8fc13e
markup.deleted#dd464c
markup.changed#fdcc59
invalid#dd464cunderline italic
invalid.deprecated#a9a4a8underline italic
entity.name.filename#5c545b
markup.error#dd464c
markup.underlineunderline
markup.bold#fdcc59bold
markup.heading#1290bfbold
markup.italic#5c545bitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#149b93
markup.inline.raw, markup.raw.restructuredtext#8fc13e
markup.underline.link, markup.underline.link.image#149b93
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#c85e7c
entity.name.directive.restructuredtext, markup.quote#5c545bitalic
meta.separator.markdown#898388
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#8fc13e
punctuation.definition.constant.restructuredtext#1290bf
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#1290bf
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#a9a4a8
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#5c545b
entity.name.type.class, entity.name.class#149b93normal
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#1290bfitalic
entity.other.inherited-class#149b93italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#898388
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#c85e7c
comment.block.documentation entity.name.type#149b93italic
comment.block.documentation entity.name.type punctuation.definition.bracket#149b93
comment.block.documentation variable#fdcc59italic
constant, variable.other.constant#1290bf
constant.character.escape, constant.character.string.escape, constant.regexp#c85e7c
entity.name.tag#c85e7c
entity.other.attribute-name.parent-selector#c85e7c
entity.other.attribute-name#8fc13eitalic
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#8fc13e
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#fdcc59italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#8fc13eitalic
meta.decorator variable.other.object#8fc13e
keyword, punctuation.definition.keyword#c85e7c
keyword.control.new, keyword.operator.newbold
meta.selector#c85e7c
support#149b93italic
support.function.magic, support.variable, variable.other.predefined#1290bfregular
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#c85e7c
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#a9a4a8
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#c85e7c
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#149b93
constant.other.date, constant.other.timestamp#fdcc59
variable.other.alias.yaml#8fc13eitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#c85e7cregular
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#149b93italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#fdcc59
storage.modifier#c85e7c
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#5c545b
punctuation.definition.group.capture.regexp#c85e7c
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#dd464c
punctuation.definition.character-class.regexp#149b93
punctuation.definition.group.regexp#fdcc59
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#dd464c
meta.assertion.look-ahead.regexp#8fc13e
string#5c545b
punctuation.definition.string.begin, punctuation.definition.string.end#989498
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#1290bf
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#898388
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#a9a4a8
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#fdcc59italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#a9a4a8normal
meta.selectionset.graphql variable#5c545b
meta.selectionset.graphql meta.arguments variable#a9a4a8
entity.name.fragment.graphql, variable.fragment.graphql#149b93
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#a9a4a8
source.shell variable.other#1290bf
support.constant#1290bfnormal
meta.scope.prerequisites.makefile#5c545b
meta.attribute-selector.scss#5c545b
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#a9a4a8
meta.preprocessor.haskell#898388