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#515b5c10
  • activityBar.activeBorder#9b1d2980
  • activityBar.background#110b0d
  • activityBar.foreground#dab14e
  • activityBar.inactiveForeground#a26734
  • activityBarBadge.background#9b1d29
  • activityBarBadge.foreground#110b0d
  • badge.background#341a0d
  • badge.foreground#dab14e
  • breadcrumb.activeSelectionForeground#dab14e
  • breadcrumb.background#110b0d
  • breadcrumb.focusForeground#dab14e
  • breadcrumb.foreground#a26734
  • breadcrumbPicker.background#2d160d
  • button.background#5a2c1a
  • button.foreground#dab14e
  • checkbox.background#5a2c1a
  • checkbox.border#2d160d
  • checkbox.foreground#dab14e
  • contrastBorder#2d160d
  • debugToolBar.background#5a2c1a
  • diffEditor.insertedTextBackground#62613220
  • diffEditor.removedTextBackground#9b281b50
  • dropdown.background#110b0d
  • dropdown.border#2d160d
  • dropdown.foreground#dab14e
  • editor.background#110b0d
  • editor.findMatchBackground#c26e2780
  • editor.findMatchHighlightBackground#ffe59740
  • editor.findRangeHighlightBackground#87422775
  • editor.foldBackground#5a2c1a
  • editor.foreground#dab14e
  • editor.hoverHighlightBackground#2d160d
  • editor.lineHighlightBorder#341a0d
  • editor.rangeHighlightBackground#515b5c15
  • editor.selectionBackground#341a0d
  • editor.selectionHighlightBackground#341a0d
  • editor.snippetFinalTabstopHighlightBackground#110b0d
  • editor.snippetFinalTabstopHighlightBorder#626132
  • editor.snippetTabstopHighlightBackground#110b0d
  • editor.snippetTabstopHighlightBorder#a26734
  • editor.wordHighlightBackground#58805650
  • editor.wordHighlightStrongBackground#62613250
  • editorCodeLens.foreground#a26734
  • editorError.foreground#9b281b
  • editorGroup.border#515b5c
  • editorGroup.dropBackground#87422770
  • editorGroupHeader.tabsBackground#2d160d
  • editorGutter.addedBackground#62613280
  • editorGutter.deletedBackground#9b281b80
  • editorGutter.modifiedBackground#58805680
  • editorHoverWidget.background#110b0d
  • editorHoverWidget.border#a26734
  • editorIndentGuide.activeBackground#ffe59745
  • editorIndentGuide.background#ffe5971A
  • editorLineNumber.foreground#a26734
  • editorLink.activeForeground#588056
  • editorMarkerNavigation.background#5a2c1a
  • editorOverviewRuler.addedForeground#62613280
  • editorOverviewRuler.border#2d160d
  • editorOverviewRuler.currentContentForeground#626132
  • editorOverviewRuler.deletedForeground#9b281b80
  • editorOverviewRuler.errorForeground#9b281b80
  • editorOverviewRuler.incomingContentForeground#515b5c
  • editorOverviewRuler.infoForeground#58805680
  • editorOverviewRuler.modifiedForeground#58805680
  • editorOverviewRuler.selectionHighlightForeground#c26e27
  • editorOverviewRuler.warningForeground#c26e2780
  • editorOverviewRuler.wordHighlightForeground#588056
  • editorOverviewRuler.wordHighlightStrongForeground#626132
  • editorRuler.foreground#ffe5971A
  • editorSuggestWidget.background#5a2c1a
  • editorSuggestWidget.foreground#dab14e
  • editorSuggestWidget.selectedBackground#341a0d
  • editorWarning.foreground#c26e27
  • editorWhitespace.foreground#ffe5971A
  • editorWidget.background#5a2c1a
  • errorForeground#9b281b
  • extensionButton.prominentBackground#62613290
  • extensionButton.prominentForeground#dab14e
  • extensionButton.prominentHoverBackground#62613260
  • focusBorder#a26734
  • foreground#dab14e
  • gitDecoration.conflictingResourceForeground#c26e27
  • gitDecoration.deletedResourceForeground#9b281b
  • gitDecoration.ignoredResourceForeground#a26734
  • gitDecoration.modifiedResourceForeground#588056
  • gitDecoration.untrackedResourceForeground#626132
  • input.background#110b0d
  • input.border#2d160d
  • input.foreground#dab14e
  • input.placeholderForeground#a26734
  • inputOption.activeBorder#515b5c
  • inputValidation.errorBackground#110b0d
  • inputValidation.errorBorder#9b281b
  • inputValidation.errorForeground#9b281b
  • inputValidation.infoBackground#110b0d
  • inputValidation.infoBorder#515b5c
  • inputValidation.infoForeground#515b5c
  • inputValidation.warningBackground#110b0d
  • inputValidation.warningBorder#c26e27
  • inputValidation.warningForeground#c26e27
  • list.activeSelectionBackground#341a0d
  • list.activeSelectionForeground#dab14e
  • list.dropBackground#341a0d
  • list.errorForeground#9b281b
  • list.focusBackground#87422775
  • list.highlightForeground#588056
  • list.hoverBackground#87422775
  • list.inactiveSelectionBackground#87422775
  • list.warningForeground#c26e27
  • listFilterWidget.background#110b0d
  • listFilterWidget.noMatchesOutline#9b281b
  • listFilterWidget.outline#341a0d
  • merge.currentHeaderBackground#62613290
  • merge.incomingHeaderBackground#515b5c90
  • notification.background#110b0d
  • notification.buttonBackground#341a0d
  • notification.buttonForeground#dab14e
  • notification.buttonHoverBackground#87422775
  • notification.errorBackground#9b281b
  • notification.errorForeground#110b0d
  • notification.foreground#dab14e
  • notification.infoBackground#515b5c
  • notification.infoForeground#110b0d
  • notification.warningBackground#c26e27
  • notification.warningForeground#110b0d
  • notificationCenter.border#5a2c1a
  • notificationCenterHeader.background#110b0d
  • notificationCenterHeader.foreground#dab14e
  • notificationLink.foreground#588056
  • notifications.background#110b0d
  • notifications.border#5a2c1a
  • notifications.foreground#dab14e
  • notificationsErrorIcon.foreground#9b281b
  • notificationsInfoIcon.foreground#515b5c
  • notificationsWarningIcon.foreground#c26e27
  • notificationToast.border#5a2c1a
  • panel.background#110b0d
  • panel.border#515b5c
  • panelInput.border#dab14e
  • panelTitle.activeBorder#9b1d29
  • panelTitle.activeForeground#dab14e
  • panelTitle.inactiveForeground#a26734
  • peekView.border#341a0d
  • peekViewEditor.background#110b0d
  • peekViewEditor.matchHighlightBackground#ff956580
  • peekViewResult.background#5a2c1a
  • peekViewResult.fileForeground#dab14e
  • peekViewResult.lineForeground#dab14e
  • peekViewResult.matchHighlightBackground#ff956580
  • peekViewResult.selectionBackground#341a0d
  • peekViewResult.selectionForeground#dab14e
  • peekViewTitle.background#2d160d
  • peekViewTitleDescription.foreground#a26734
  • peekViewTitleLabel.foreground#dab14e
  • pickerGroup.border#515b5c
  • pickerGroup.foreground#588056
  • progressBar.background#9b1d29
  • scrollbar.shadow#444444
  • selection.background#515b5c
  • settings.checkboxBackground#5a2c1a
  • settings.checkboxBorder#2d160d
  • settings.checkboxForeground#dab14e
  • settings.dropdownBackground#5a2c1a
  • settings.dropdownBorder#2d160d
  • settings.dropdownForeground#dab14e
  • settings.headerForeground#dab14e
  • settings.modifiedItemIndicator#c26e27
  • settings.numberInputBackground#5a2c1a
  • settings.numberInputBorder#2d160d
  • settings.numberInputForeground#dab14e
  • settings.textInputBackground#5a2c1a
  • settings.textInputBorder#2d160d
  • settings.textInputForeground#dab14e
  • sideBar.background#5a2c1a
  • sideBarSectionHeader.background#110b0d
  • sideBarSectionHeader.border#2d160d
  • sideBarTitle.foreground#dab14e
  • statusBar.background#2d160d
  • statusBar.debuggingBackground#9b281b
  • statusBar.debuggingForeground#2d160d
  • statusBar.foreground#dab14e
  • statusBar.noFolderBackground#2d160d
  • statusBar.noFolderForeground#dab14e
  • statusBarItem.prominentBackground#9b281b
  • statusBarItem.prominentHoverBackground#c26e27
  • statusBarItem.remoteBackground#515b5c
  • statusBarItem.remoteForeground#110b0d
  • tab.activeBackground#110b0d
  • tab.activeBorderTop#9b1d2980
  • tab.activeForeground#dab14e
  • tab.border#2d160d
  • tab.inactiveBackground#5a2c1a
  • tab.inactiveForeground#a26734
  • terminal.ansiBlack#341a0d
  • terminal.ansiBlue#515b5c
  • terminal.ansiBrightBlack#874227
  • terminal.ansiBrightBlue#9eb2b3
  • terminal.ansiBrightCyan#89cc8e
  • terminal.ansiBrightGreen#b3b163
  • terminal.ansiBrightMagenta#ff5b6a
  • terminal.ansiBrightRed#ff4230
  • terminal.ansiBrightWhite#ffe597
  • terminal.ansiBrightYellow#ff9565
  • terminal.ansiCyan#588056
  • terminal.ansiGreen#626132
  • terminal.ansiMagenta#9b1d29
  • terminal.ansiRed#9b281b
  • terminal.ansiWhite#f6d75c
  • terminal.ansiYellow#c26e27
  • terminal.background#110b0d
  • terminal.border#dab14e
  • terminal.foreground#dab14e
  • terminal.selectionBackground#341a0d50
  • textBlockQuote.background#5a2c1a
  • titleBar.activeBackground#5a2c1a
  • titleBar.activeForeground#dab14e
  • titleBar.inactiveBackground#2d160d
  • titleBar.inactiveForeground#a26734
  • walkThrough.embeddedEditorBackground#5a2c1a
  • welcomePage.buttonBackground#341a0d
  • welcomePage.buttonHoverBackground#87422775
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#515b5c
source#dab14e
meta.diff, meta.diff.header#a26734
markup.inserted#626132
markup.deleted#9b281b
markup.changed#c26e27
invalid#9b281bunderline italic
invalid.deprecated#dab14eunderline italic
entity.name.filename#ff9565
markup.error#9b281b
markup.underlineunderline
markup.bold#c26e27bold
markup.heading#515b5cbold
markup.italic#ff9565italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#588056
markup.inline.raw, markup.raw.restructuredtext#626132
markup.underline.link, markup.underline.link.image#588056
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#9b1d29
entity.name.directive.restructuredtext, markup.quote#ff9565italic
meta.separator.markdown#a26734
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#626132
punctuation.definition.constant.restructuredtext#515b5c
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#515b5c
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#dab14e
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ff9565
entity.name.type.class, entity.name.class#588056normal
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#515b5citalic
entity.other.inherited-class#588056italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#a26734
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#9b1d29
comment.block.documentation entity.name.type#588056italic
comment.block.documentation entity.name.type punctuation.definition.bracket#588056
comment.block.documentation variable#c26e27italic
constant, variable.other.constant#515b5c
constant.character.escape, constant.character.string.escape, constant.regexp#9b1d29
entity.name.tag#9b1d29
entity.other.attribute-name.parent-selector#9b1d29
entity.other.attribute-name#626132italic
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#626132
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#c26e27italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#626132italic
meta.decorator variable.other.object#626132
keyword, punctuation.definition.keyword#9b1d29
keyword.control.new, keyword.operator.newbold
meta.selector#9b1d29
support#588056italic
support.function.magic, support.variable, variable.other.predefined#515b5cregular
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#9b1d29
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#dab14e
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#9b1d29
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#588056
constant.other.date, constant.other.timestamp#c26e27
variable.other.alias.yaml#626132italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#9b1d29regular
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#588056italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#c26e27
storage.modifier#9b1d29
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ff9565
punctuation.definition.group.capture.regexp#9b1d29
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#9b281b
punctuation.definition.character-class.regexp#588056
punctuation.definition.group.regexp#c26e27
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#9b281b
meta.assertion.look-ahead.regexp#626132
string#ff9565
punctuation.definition.string.begin, punctuation.definition.string.end#9eb2b3
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#515b5c
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#a26734
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#dab14e
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#c26e27italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#dab14enormal
meta.selectionset.graphql variable#ff9565
meta.selectionset.graphql meta.arguments variable#dab14e
entity.name.fragment.graphql, variable.fragment.graphql#588056
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#dab14e
source.shell variable.other#515b5c
support.constant#515b5cnormal
meta.scope.prerequisites.makefile#ff9565
meta.attribute-selector.scss#ff9565
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#dab14e
meta.preprocessor.haskell#a26734