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#365f9110
  • activityBar.activeBorder#784a7880
  • activityBar.background#fff4d6
  • activityBar.foreground#432c3b
  • activityBar.inactiveForeground#80616b
  • activityBarBadge.background#784a78
  • activityBarBadge.foreground#fff4d6
  • badge.background#f2d083
  • badge.foreground#432c3b
  • breadcrumb.activeSelectionForeground#432c3b
  • breadcrumb.background#fff4d6
  • breadcrumb.focusForeground#432c3b
  • breadcrumb.foreground#80616b
  • breadcrumbPicker.background#c85d00
  • button.background#cf2944
  • button.foreground#432c3b
  • checkbox.background#cf2944
  • checkbox.border#c85d00
  • checkbox.foreground#432c3b
  • contrastBorder#c85d00
  • debugToolBar.background#cf2944
  • diffEditor.insertedTextBackground#32705620
  • diffEditor.removedTextBackground#a63d4a50
  • dropdown.background#fff4d6
  • dropdown.border#c85d00
  • dropdown.foreground#432c3b
  • editor.background#fff4d6
  • editor.findMatchBackground#9b5b1980
  • editor.findMatchHighlightBackground#1c0f2040
  • editor.findRangeHighlightBackground#d69b4575
  • editor.foldBackground#cf2944
  • editor.foreground#432c3b
  • editor.hoverHighlightBackground#c85d00
  • editor.lineHighlightBorder#f2d083
  • editor.rangeHighlightBackground#365f9115
  • editor.selectionBackground#f2d083
  • editor.selectionHighlightBackground#f2d083
  • editor.snippetFinalTabstopHighlightBackground#fff4d6
  • editor.snippetFinalTabstopHighlightBorder#327056
  • editor.snippetTabstopHighlightBackground#fff4d6
  • editor.snippetTabstopHighlightBorder#80616b
  • editor.wordHighlightBackground#276e6c50
  • editor.wordHighlightStrongBackground#32705650
  • editorCodeLens.foreground#80616b
  • editorError.foreground#a63d4a
  • editorGroup.border#365f91
  • editorGroup.dropBackground#d69b4570
  • editorGroupHeader.tabsBackground#c85d00
  • editorGutter.addedBackground#32705680
  • editorGutter.deletedBackground#a63d4a80
  • editorGutter.modifiedBackground#276e6c80
  • editorHoverWidget.background#fff4d6
  • editorHoverWidget.border#80616b
  • editorIndentGuide.activeBackground#1c0f2045
  • editorIndentGuide.background#1c0f201A
  • editorLineNumber.foreground#80616b
  • editorLink.activeForeground#276e6c
  • editorMarkerNavigation.background#cf2944
  • editorOverviewRuler.addedForeground#32705680
  • editorOverviewRuler.border#c85d00
  • editorOverviewRuler.currentContentForeground#327056
  • editorOverviewRuler.deletedForeground#a63d4a80
  • editorOverviewRuler.errorForeground#a63d4a80
  • editorOverviewRuler.incomingContentForeground#365f91
  • editorOverviewRuler.infoForeground#276e6c80
  • editorOverviewRuler.modifiedForeground#276e6c80
  • editorOverviewRuler.selectionHighlightForeground#9b5b19
  • editorOverviewRuler.warningForeground#9b5b1980
  • editorOverviewRuler.wordHighlightForeground#276e6c
  • editorOverviewRuler.wordHighlightStrongForeground#327056
  • editorRuler.foreground#1c0f201A
  • editorSuggestWidget.background#cf2944
  • editorSuggestWidget.foreground#432c3b
  • editorSuggestWidget.selectedBackground#f2d083
  • editorWarning.foreground#9b5b19
  • editorWhitespace.foreground#1c0f201A
  • editorWidget.background#cf2944
  • errorForeground#a63d4a
  • extensionButton.prominentBackground#32705690
  • extensionButton.prominentForeground#432c3b
  • extensionButton.prominentHoverBackground#32705660
  • focusBorder#80616b
  • foreground#432c3b
  • gitDecoration.conflictingResourceForeground#9b5b19
  • gitDecoration.deletedResourceForeground#a63d4a
  • gitDecoration.ignoredResourceForeground#80616b
  • gitDecoration.modifiedResourceForeground#276e6c
  • gitDecoration.untrackedResourceForeground#327056
  • input.background#fff4d6
  • input.border#c85d00
  • input.foreground#432c3b
  • input.placeholderForeground#80616b
  • inputOption.activeBorder#365f91
  • inputValidation.errorBackground#fff4d6
  • inputValidation.errorBorder#a63d4a
  • inputValidation.errorForeground#a63d4a
  • inputValidation.infoBackground#fff4d6
  • inputValidation.infoBorder#365f91
  • inputValidation.infoForeground#365f91
  • inputValidation.warningBackground#fff4d6
  • inputValidation.warningBorder#9b5b19
  • inputValidation.warningForeground#9b5b19
  • list.activeSelectionBackground#f2d083
  • list.activeSelectionForeground#432c3b
  • list.dropBackground#f2d083
  • list.errorForeground#a63d4a
  • list.focusBackground#d69b4575
  • list.highlightForeground#276e6c
  • list.hoverBackground#d69b4575
  • list.inactiveSelectionBackground#d69b4575
  • list.warningForeground#9b5b19
  • listFilterWidget.background#fff4d6
  • listFilterWidget.noMatchesOutline#a63d4a
  • listFilterWidget.outline#f2d083
  • merge.currentHeaderBackground#32705690
  • merge.incomingHeaderBackground#365f9190
  • notification.background#fff4d6
  • notification.buttonBackground#f2d083
  • notification.buttonForeground#432c3b
  • notification.buttonHoverBackground#d69b4575
  • notification.errorBackground#a63d4a
  • notification.errorForeground#fff4d6
  • notification.foreground#432c3b
  • notification.infoBackground#365f91
  • notification.infoForeground#fff4d6
  • notification.warningBackground#9b5b19
  • notification.warningForeground#fff4d6
  • notificationCenter.border#cf2944
  • notificationCenterHeader.background#fff4d6
  • notificationCenterHeader.foreground#432c3b
  • notificationLink.foreground#276e6c
  • notifications.background#fff4d6
  • notifications.border#cf2944
  • notifications.foreground#432c3b
  • notificationsErrorIcon.foreground#a63d4a
  • notificationsInfoIcon.foreground#365f91
  • notificationsWarningIcon.foreground#9b5b19
  • notificationToast.border#cf2944
  • panel.background#fff4d6
  • panel.border#365f91
  • panelInput.border#432c3b
  • panelTitle.activeBorder#784a78
  • panelTitle.activeForeground#432c3b
  • panelTitle.inactiveForeground#80616b
  • peekView.border#f2d083
  • peekViewEditor.background#fff4d6
  • peekViewEditor.matchHighlightBackground#007b4e80
  • peekViewResult.background#cf2944
  • peekViewResult.fileForeground#432c3b
  • peekViewResult.lineForeground#432c3b
  • peekViewResult.matchHighlightBackground#007b4e80
  • peekViewResult.selectionBackground#f2d083
  • peekViewResult.selectionForeground#432c3b
  • peekViewTitle.background#c85d00
  • peekViewTitleDescription.foreground#80616b
  • peekViewTitleLabel.foreground#432c3b
  • pickerGroup.border#365f91
  • pickerGroup.foreground#276e6c
  • progressBar.background#784a78
  • scrollbar.shadow#444444
  • selection.background#365f91
  • settings.checkboxBackground#cf2944
  • settings.checkboxBorder#c85d00
  • settings.checkboxForeground#432c3b
  • settings.dropdownBackground#cf2944
  • settings.dropdownBorder#c85d00
  • settings.dropdownForeground#432c3b
  • settings.headerForeground#432c3b
  • settings.modifiedItemIndicator#9b5b19
  • settings.numberInputBackground#cf2944
  • settings.numberInputBorder#c85d00
  • settings.numberInputForeground#432c3b
  • settings.textInputBackground#cf2944
  • settings.textInputBorder#c85d00
  • settings.textInputForeground#432c3b
  • sideBar.background#cf2944
  • sideBarSectionHeader.background#fff4d6
  • sideBarSectionHeader.border#c85d00
  • sideBarTitle.foreground#432c3b
  • statusBar.background#c85d00
  • statusBar.debuggingBackground#a63d4a
  • statusBar.debuggingForeground#c85d00
  • statusBar.foreground#432c3b
  • statusBar.noFolderBackground#c85d00
  • statusBar.noFolderForeground#432c3b
  • statusBarItem.prominentBackground#a63d4a
  • statusBarItem.prominentHoverBackground#9b5b19
  • statusBarItem.remoteBackground#365f91
  • statusBarItem.remoteForeground#fff4d6
  • tab.activeBackground#fff4d6
  • tab.activeBorderTop#784a7880
  • tab.activeForeground#432c3b
  • tab.border#c85d00
  • tab.inactiveBackground#cf2944
  • tab.inactiveForeground#80616b
  • terminal.ansiBlack#f2d083
  • terminal.ansiBlue#365f91
  • terminal.ansiBrightBlack#d69b45
  • terminal.ansiBrightBlue#9b3395
  • terminal.ansiBrightCyan#005eb8
  • terminal.ansiBrightGreen#007b78
  • terminal.ansiBrightMagenta#87301f
  • terminal.ansiBrightRed#a86e00
  • terminal.ansiBrightWhite#1c0f20
  • terminal.ansiBrightYellow#007b4e
  • terminal.ansiCyan#276e6c
  • terminal.ansiGreen#327056
  • terminal.ansiMagenta#784a78
  • terminal.ansiRed#a63d4a
  • terminal.ansiWhite#2f1c2e
  • terminal.ansiYellow#9b5b19
  • terminal.background#fff4d6
  • terminal.border#432c3b
  • terminal.foreground#432c3b
  • terminal.selectionBackground#f2d08350
  • textBlockQuote.background#cf2944
  • titleBar.activeBackground#cf2944
  • titleBar.activeForeground#432c3b
  • titleBar.inactiveBackground#c85d00
  • titleBar.inactiveForeground#80616b
  • walkThrough.embeddedEditorBackground#cf2944
  • welcomePage.buttonBackground#f2d083
  • welcomePage.buttonHoverBackground#d69b4575
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#365f91
source#432c3b
meta.diff, meta.diff.header#80616b
markup.inserted#327056
markup.deleted#a63d4a
markup.changed#9b5b19
invalid#a63d4aunderline italic
invalid.deprecated#432c3bunderline italic
entity.name.filename#007b4e
markup.error#a63d4a
markup.underlineunderline
markup.bold#9b5b19bold
markup.heading#365f91bold
markup.italic#007b4eitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#276e6c
markup.inline.raw, markup.raw.restructuredtext#327056
markup.underline.link, markup.underline.link.image#276e6c
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#784a78
entity.name.directive.restructuredtext, markup.quote#007b4eitalic
meta.separator.markdown#80616b
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#327056
punctuation.definition.constant.restructuredtext#365f91
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#365f91
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#432c3b
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#007b4e
entity.name.type.class, entity.name.class#276e6cnormal
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#365f91italic
entity.other.inherited-class#276e6citalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#80616b
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#784a78
comment.block.documentation entity.name.type#276e6citalic
comment.block.documentation entity.name.type punctuation.definition.bracket#276e6c
comment.block.documentation variable#9b5b19italic
constant, variable.other.constant#365f91
constant.character.escape, constant.character.string.escape, constant.regexp#784a78
entity.name.tag#784a78
entity.other.attribute-name.parent-selector#784a78
entity.other.attribute-name#327056italic
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#327056
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#9b5b19italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#327056italic
meta.decorator variable.other.object#327056
keyword, punctuation.definition.keyword#784a78
keyword.control.new, keyword.operator.newbold
meta.selector#784a78
support#276e6citalic
support.function.magic, support.variable, variable.other.predefined#365f91regular
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#784a78
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#432c3b
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#784a78
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#276e6c
constant.other.date, constant.other.timestamp#9b5b19
variable.other.alias.yaml#327056italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#784a78regular
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#276e6citalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#9b5b19
storage.modifier#784a78
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#007b4e
punctuation.definition.group.capture.regexp#784a78
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#a63d4a
punctuation.definition.character-class.regexp#276e6c
punctuation.definition.group.regexp#9b5b19
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#a63d4a
meta.assertion.look-ahead.regexp#327056
string#007b4e
punctuation.definition.string.begin, punctuation.definition.string.end#846600
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#365f91
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#80616b
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#432c3b
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#9b5b19italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#432c3bnormal
meta.selectionset.graphql variable#007b4e
meta.selectionset.graphql meta.arguments variable#432c3b
entity.name.fragment.graphql, variable.fragment.graphql#276e6c
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#432c3b
source.shell variable.other#365f91
support.constant#365f91normal
meta.scope.prerequisites.makefile#007b4e
meta.attribute-selector.scss#007b4e
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#432c3b
meta.preprocessor.haskell#80616b