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#5a86ac10
  • activityBar.activeBorder#ab80a680
  • activityBar.background#2a1e1d
  • activityBar.foreground#cdbe9b
  • activityBar.inactiveForeground#ab8664
  • activityBarBadge.background#ab80a6
  • activityBarBadge.foreground#2a1e1d
  • badge.background#573d25
  • badge.foreground#cdbe9b
  • breadcrumb.activeSelectionForeground#cdbe9b
  • breadcrumb.background#2a1e1d
  • breadcrumb.focusForeground#cdbe9b
  • breadcrumb.foreground#ab8664
  • breadcrumbPicker.background#332318
  • button.background#664730
  • button.foreground#cdbe9b
  • checkbox.background#664730
  • checkbox.border#332318
  • checkbox.foreground#cdbe9b
  • contrastBorder#332318
  • debugToolBar.background#664730
  • diffEditor.insertedTextBackground#6ba08a20
  • diffEditor.removedTextBackground#be2d2650
  • dropdown.background#2a1e1d
  • dropdown.border#332318
  • dropdown.foreground#cdbe9b
  • editor.background#2a1e1d
  • editor.findMatchBackground#e99c2980
  • editor.findMatchHighlightBackground#fff9d440
  • editor.findRangeHighlightBackground#9a6b4975
  • editor.foldBackground#664730
  • editor.foreground#cdbe9b
  • editor.hoverHighlightBackground#332318
  • editor.lineHighlightBorder#573d25
  • editor.rangeHighlightBackground#5a86ac15
  • editor.selectionBackground#573d25
  • editor.selectionHighlightBackground#573d25
  • editor.snippetFinalTabstopHighlightBackground#2a1e1d
  • editor.snippetFinalTabstopHighlightBorder#6ba08a
  • editor.snippetTabstopHighlightBackground#2a1e1d
  • editor.snippetTabstopHighlightBorder#ab8664
  • editor.wordHighlightBackground#74a5ac50
  • editor.wordHighlightStrongBackground#6ba08a50
  • editorCodeLens.foreground#ab8664
  • editorError.foreground#be2d26
  • editorGroup.border#5a86ac
  • editorGroup.dropBackground#9a6b4970
  • editorGroupHeader.tabsBackground#332318
  • editorGutter.addedBackground#6ba08a80
  • editorGutter.deletedBackground#be2d2680
  • editorGutter.modifiedBackground#74a5ac80
  • editorHoverWidget.background#2a1e1d
  • editorHoverWidget.border#ab8664
  • editorIndentGuide.activeBackground#fff9d445
  • editorIndentGuide.background#fff9d41A
  • editorLineNumber.foreground#ab8664
  • editorLink.activeForeground#74a5ac
  • editorMarkerNavigation.background#664730
  • editorOverviewRuler.addedForeground#6ba08a80
  • editorOverviewRuler.border#332318
  • editorOverviewRuler.currentContentForeground#6ba08a
  • editorOverviewRuler.deletedForeground#be2d2680
  • editorOverviewRuler.errorForeground#be2d2680
  • editorOverviewRuler.incomingContentForeground#5a86ac
  • editorOverviewRuler.infoForeground#74a5ac80
  • editorOverviewRuler.modifiedForeground#74a5ac80
  • editorOverviewRuler.selectionHighlightForeground#e99c29
  • editorOverviewRuler.warningForeground#e99c2980
  • editorOverviewRuler.wordHighlightForeground#74a5ac
  • editorOverviewRuler.wordHighlightStrongForeground#6ba08a
  • editorRuler.foreground#fff9d41A
  • editorSuggestWidget.background#664730
  • editorSuggestWidget.foreground#cdbe9b
  • editorSuggestWidget.selectedBackground#573d25
  • editorWarning.foreground#e99c29
  • editorWhitespace.foreground#fff9d41A
  • editorWidget.background#664730
  • errorForeground#be2d26
  • extensionButton.prominentBackground#6ba08a90
  • extensionButton.prominentForeground#cdbe9b
  • extensionButton.prominentHoverBackground#6ba08a60
  • focusBorder#ab8664
  • foreground#cdbe9b
  • gitDecoration.conflictingResourceForeground#e99c29
  • gitDecoration.deletedResourceForeground#be2d26
  • gitDecoration.ignoredResourceForeground#ab8664
  • gitDecoration.modifiedResourceForeground#74a5ac
  • gitDecoration.untrackedResourceForeground#6ba08a
  • input.background#2a1e1d
  • input.border#332318
  • input.foreground#cdbe9b
  • input.placeholderForeground#ab8664
  • inputOption.activeBorder#5a86ac
  • inputValidation.errorBackground#2a1e1d
  • inputValidation.errorBorder#be2d26
  • inputValidation.errorForeground#be2d26
  • inputValidation.infoBackground#2a1e1d
  • inputValidation.infoBorder#5a86ac
  • inputValidation.infoForeground#5a86ac
  • inputValidation.warningBackground#2a1e1d
  • inputValidation.warningBorder#e99c29
  • inputValidation.warningForeground#e99c29
  • list.activeSelectionBackground#573d25
  • list.activeSelectionForeground#cdbe9b
  • list.dropBackground#573d25
  • list.errorForeground#be2d26
  • list.focusBackground#9a6b4975
  • list.highlightForeground#74a5ac
  • list.hoverBackground#9a6b4975
  • list.inactiveSelectionBackground#9a6b4975
  • list.warningForeground#e99c29
  • listFilterWidget.background#2a1e1d
  • listFilterWidget.noMatchesOutline#be2d26
  • listFilterWidget.outline#573d25
  • merge.currentHeaderBackground#6ba08a90
  • merge.incomingHeaderBackground#5a86ac90
  • notification.background#2a1e1d
  • notification.buttonBackground#573d25
  • notification.buttonForeground#cdbe9b
  • notification.buttonHoverBackground#9a6b4975
  • notification.errorBackground#be2d26
  • notification.errorForeground#2a1e1d
  • notification.foreground#cdbe9b
  • notification.infoBackground#5a86ac
  • notification.infoForeground#2a1e1d
  • notification.warningBackground#e99c29
  • notification.warningForeground#2a1e1d
  • notificationCenter.border#664730
  • notificationCenterHeader.background#2a1e1d
  • notificationCenterHeader.foreground#cdbe9b
  • notificationLink.foreground#74a5ac
  • notifications.background#2a1e1d
  • notifications.border#664730
  • notifications.foreground#cdbe9b
  • notificationsErrorIcon.foreground#be2d26
  • notificationsInfoIcon.foreground#5a86ac
  • notificationsWarningIcon.foreground#e99c29
  • notificationToast.border#664730
  • panel.background#2a1e1d
  • panel.border#5a86ac
  • panelInput.border#cdbe9b
  • panelTitle.activeBorder#ab80a6
  • panelTitle.activeForeground#cdbe9b
  • panelTitle.inactiveForeground#ab8664
  • peekView.border#573d25
  • peekViewEditor.background#2a1e1d
  • peekViewEditor.matchHighlightBackground#d0d04f80
  • peekViewResult.background#664730
  • peekViewResult.fileForeground#cdbe9b
  • peekViewResult.lineForeground#cdbe9b
  • peekViewResult.matchHighlightBackground#d0d04f80
  • peekViewResult.selectionBackground#573d25
  • peekViewResult.selectionForeground#cdbe9b
  • peekViewTitle.background#332318
  • peekViewTitleDescription.foreground#ab8664
  • peekViewTitleLabel.foreground#cdbe9b
  • pickerGroup.border#5a86ac
  • pickerGroup.foreground#74a5ac
  • progressBar.background#ab80a6
  • scrollbar.shadow#444444
  • selection.background#5a86ac
  • settings.checkboxBackground#664730
  • settings.checkboxBorder#332318
  • settings.checkboxForeground#cdbe9b
  • settings.dropdownBackground#664730
  • settings.dropdownBorder#332318
  • settings.dropdownForeground#cdbe9b
  • settings.headerForeground#cdbe9b
  • settings.modifiedItemIndicator#e99c29
  • settings.numberInputBackground#664730
  • settings.numberInputBorder#332318
  • settings.numberInputForeground#cdbe9b
  • settings.textInputBackground#664730
  • settings.textInputBorder#332318
  • settings.textInputForeground#cdbe9b
  • sideBar.background#664730
  • sideBarSectionHeader.background#2a1e1d
  • sideBarSectionHeader.border#332318
  • sideBarTitle.foreground#cdbe9b
  • statusBar.background#332318
  • statusBar.debuggingBackground#be2d26
  • statusBar.debuggingForeground#332318
  • statusBar.foreground#cdbe9b
  • statusBar.noFolderBackground#332318
  • statusBar.noFolderForeground#cdbe9b
  • statusBarItem.prominentBackground#be2d26
  • statusBarItem.prominentHoverBackground#e99c29
  • statusBarItem.remoteBackground#5a86ac
  • statusBarItem.remoteForeground#2a1e1d
  • tab.activeBackground#2a1e1d
  • tab.activeBorderTop#ab80a680
  • tab.activeForeground#cdbe9b
  • tab.border#332318
  • tab.inactiveBackground#664730
  • tab.inactiveForeground#ab8664
  • terminal.ansiBlack#573d25
  • terminal.ansiBlue#5a86ac
  • terminal.ansiBrightBlack#9a6b49
  • terminal.ansiBrightBlue#b8d3ed
  • terminal.ansiBrightCyan#92ced6
  • terminal.ansiBrightGreen#94d7ba
  • terminal.ansiBrightMagenta#d09dca
  • terminal.ansiBrightRed#e84526
  • terminal.ansiBrightWhite#fff9d4
  • terminal.ansiBrightYellow#d0d04f
  • terminal.ansiCyan#74a5ac
  • terminal.ansiGreen#6ba08a
  • terminal.ansiMagenta#ab80a6
  • terminal.ansiRed#be2d26
  • terminal.ansiWhite#dfdab7
  • terminal.ansiYellow#e99c29
  • terminal.background#2a1e1d
  • terminal.border#cdbe9b
  • terminal.foreground#cdbe9b
  • terminal.selectionBackground#573d2550
  • textBlockQuote.background#664730
  • titleBar.activeBackground#664730
  • titleBar.activeForeground#cdbe9b
  • titleBar.inactiveBackground#332318
  • titleBar.inactiveForeground#ab8664
  • walkThrough.embeddedEditorBackground#664730
  • welcomePage.buttonBackground#573d25
  • welcomePage.buttonHoverBackground#9a6b4975
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#5a86ac
source#cdbe9b
meta.diff, meta.diff.header#ab8664
markup.inserted#6ba08a
markup.deleted#be2d26
markup.changed#e99c29
invalid#be2d26underline italic
invalid.deprecated#cdbe9bunderline italic
entity.name.filename#d0d04f
markup.error#be2d26
markup.underlineunderline
markup.bold#e99c29bold
markup.heading#5a86acbold
markup.italic#d0d04fitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#74a5ac
markup.inline.raw, markup.raw.restructuredtext#6ba08a
markup.underline.link, markup.underline.link.image#74a5ac
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ab80a6
entity.name.directive.restructuredtext, markup.quote#d0d04fitalic
meta.separator.markdown#ab8664
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#6ba08a
punctuation.definition.constant.restructuredtext#5a86ac
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#5a86ac
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#cdbe9b
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#d0d04f
entity.name.type.class, entity.name.class#74a5acnormal
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#5a86acitalic
entity.other.inherited-class#74a5acitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#ab8664
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ab80a6
comment.block.documentation entity.name.type#74a5acitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#74a5ac
comment.block.documentation variable#e99c29italic
constant, variable.other.constant#5a86ac
constant.character.escape, constant.character.string.escape, constant.regexp#ab80a6
entity.name.tag#ab80a6
entity.other.attribute-name.parent-selector#ab80a6
entity.other.attribute-name#6ba08aitalic
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#6ba08a
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#e99c29italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#6ba08aitalic
meta.decorator variable.other.object#6ba08a
keyword, punctuation.definition.keyword#ab80a6
keyword.control.new, keyword.operator.newbold
meta.selector#ab80a6
support#74a5acitalic
support.function.magic, support.variable, variable.other.predefined#5a86acregular
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#ab80a6
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#cdbe9b
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#ab80a6
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#74a5ac
constant.other.date, constant.other.timestamp#e99c29
variable.other.alias.yaml#6ba08aitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ab80a6regular
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#74a5acitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#e99c29
storage.modifier#ab80a6
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#d0d04f
punctuation.definition.group.capture.regexp#ab80a6
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#be2d26
punctuation.definition.character-class.regexp#74a5ac
punctuation.definition.group.regexp#e99c29
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#be2d26
meta.assertion.look-ahead.regexp#6ba08a
string#d0d04f
punctuation.definition.string.begin, punctuation.definition.string.end#b8d3ed
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#5a86ac
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#ab8664
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#cdbe9b
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#e99c29italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#cdbe9bnormal
meta.selectionset.graphql variable#d0d04f
meta.selectionset.graphql meta.arguments variable#cdbe9b
entity.name.fragment.graphql, variable.fragment.graphql#74a5ac
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#cdbe9b
source.shell variable.other#5a86ac
support.constant#5a86acnormal
meta.scope.prerequisites.makefile#d0d04f
meta.attribute-selector.scss#d0d04f
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#cdbe9b
meta.preprocessor.haskell#ab8664