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#4698a210
  • activityBar.activeBorder#8c423180
  • activityBar.background#241200
  • activityBar.foreground#c5ab60
  • activityBar.inactiveForeground#957f58
  • activityBarBadge.background#8c4231
  • activityBarBadge.foreground#241200
  • badge.background#000000
  • badge.foreground#c5ab60
  • breadcrumb.activeSelectionForeground#c5ab60
  • breadcrumb.background#241200
  • breadcrumb.focusForeground#c5ab60
  • breadcrumb.foreground#957f58
  • breadcrumbPicker.background#2a231c
  • button.background#544638
  • button.foreground#c5ab60
  • checkbox.background#544638
  • checkbox.border#2a231c
  • checkbox.foreground#c5ab60
  • contrastBorder#2a231c
  • debugToolBar.background#544638
  • diffEditor.insertedTextBackground#909b0020
  • diffEditor.removedTextBackground#d5252b50
  • dropdown.background#241200
  • dropdown.border#2a231c
  • dropdown.foreground#c5ab60
  • editor.background#241200
  • editor.findMatchBackground#bd8a1380
  • editor.findMatchHighlightBackground#ffe9a340
  • editor.findRangeHighlightBackground#7e695475
  • editor.foldBackground#544638
  • editor.foreground#c5ab60
  • editor.hoverHighlightBackground#2a231c
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#4698a215
  • editor.selectionBackground#000000
  • editor.selectionHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBackground#241200
  • editor.snippetFinalTabstopHighlightBorder#909b00
  • editor.snippetTabstopHighlightBackground#241200
  • editor.snippetTabstopHighlightBorder#957f58
  • editor.wordHighlightBackground#d9811250
  • editor.wordHighlightStrongBackground#909b0050
  • editorCodeLens.foreground#957f58
  • editorError.foreground#d5252b
  • editorGroup.border#4698a2
  • editorGroup.dropBackground#7e695470
  • editorGroupHeader.tabsBackground#2a231c
  • editorGutter.addedBackground#909b0080
  • editorGutter.deletedBackground#d5252b80
  • editorGutter.modifiedBackground#d9811280
  • editorHoverWidget.background#241200
  • editorHoverWidget.border#957f58
  • editorIndentGuide.activeBackground#ffe9a345
  • editorIndentGuide.background#ffe9a31A
  • editorLineNumber.foreground#957f58
  • editorLink.activeForeground#d98112
  • editorMarkerNavigation.background#544638
  • editorOverviewRuler.addedForeground#909b0080
  • editorOverviewRuler.border#2a231c
  • editorOverviewRuler.currentContentForeground#909b00
  • editorOverviewRuler.deletedForeground#d5252b80
  • editorOverviewRuler.errorForeground#d5252b80
  • editorOverviewRuler.incomingContentForeground#4698a2
  • editorOverviewRuler.infoForeground#d9811280
  • editorOverviewRuler.modifiedForeground#d9811280
  • editorOverviewRuler.selectionHighlightForeground#bd8a13
  • editorOverviewRuler.warningForeground#bd8a1380
  • editorOverviewRuler.wordHighlightForeground#d98112
  • editorOverviewRuler.wordHighlightStrongForeground#909b00
  • editorRuler.foreground#ffe9a31A
  • editorSuggestWidget.background#544638
  • editorSuggestWidget.foreground#c5ab60
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#bd8a13
  • editorWhitespace.foreground#ffe9a31A
  • editorWidget.background#544638
  • errorForeground#d5252b
  • extensionButton.prominentBackground#909b0090
  • extensionButton.prominentForeground#c5ab60
  • extensionButton.prominentHoverBackground#909b0060
  • focusBorder#957f58
  • foreground#c5ab60
  • gitDecoration.conflictingResourceForeground#bd8a13
  • gitDecoration.deletedResourceForeground#d5252b
  • gitDecoration.ignoredResourceForeground#957f58
  • gitDecoration.modifiedResourceForeground#d98112
  • gitDecoration.untrackedResourceForeground#909b00
  • input.background#241200
  • input.border#2a231c
  • input.foreground#c5ab60
  • input.placeholderForeground#957f58
  • inputOption.activeBorder#4698a2
  • inputValidation.errorBackground#241200
  • inputValidation.errorBorder#d5252b
  • inputValidation.errorForeground#d5252b
  • inputValidation.infoBackground#241200
  • inputValidation.infoBorder#4698a2
  • inputValidation.infoForeground#4698a2
  • inputValidation.warningBackground#241200
  • inputValidation.warningBorder#bd8a13
  • inputValidation.warningForeground#bd8a13
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#c5ab60
  • list.dropBackground#000000
  • list.errorForeground#d5252b
  • list.focusBackground#7e695475
  • list.highlightForeground#d98112
  • list.hoverBackground#7e695475
  • list.inactiveSelectionBackground#7e695475
  • list.warningForeground#bd8a13
  • listFilterWidget.background#241200
  • listFilterWidget.noMatchesOutline#d5252b
  • listFilterWidget.outline#000000
  • merge.currentHeaderBackground#909b0090
  • merge.incomingHeaderBackground#4698a290
  • notification.background#241200
  • notification.buttonBackground#000000
  • notification.buttonForeground#c5ab60
  • notification.buttonHoverBackground#7e695475
  • notification.errorBackground#d5252b
  • notification.errorForeground#241200
  • notification.foreground#c5ab60
  • notification.infoBackground#4698a2
  • notification.infoForeground#241200
  • notification.warningBackground#bd8a13
  • notification.warningForeground#241200
  • notificationCenter.border#544638
  • notificationCenterHeader.background#241200
  • notificationCenterHeader.foreground#c5ab60
  • notificationLink.foreground#d98112
  • notifications.background#241200
  • notifications.border#544638
  • notifications.foreground#c5ab60
  • notificationsErrorIcon.foreground#d5252b
  • notificationsInfoIcon.foreground#4698a2
  • notificationsWarningIcon.foreground#bd8a13
  • notificationToast.border#544638
  • panel.background#241200
  • panel.border#4698a2
  • panelInput.border#c5ab60
  • panelTitle.activeBorder#8c4231
  • panelTitle.activeForeground#c5ab60
  • panelTitle.inactiveForeground#957f58
  • peekView.border#000000
  • peekViewEditor.background#241200
  • peekViewEditor.matchHighlightBackground#ffca1b80
  • peekViewResult.background#544638
  • peekViewResult.fileForeground#c5ab60
  • peekViewResult.lineForeground#c5ab60
  • peekViewResult.matchHighlightBackground#ffca1b80
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#c5ab60
  • peekViewTitle.background#2a231c
  • peekViewTitleDescription.foreground#957f58
  • peekViewTitleLabel.foreground#c5ab60
  • pickerGroup.border#4698a2
  • pickerGroup.foreground#d98112
  • progressBar.background#8c4231
  • scrollbar.shadow#444444
  • selection.background#4698a2
  • settings.checkboxBackground#544638
  • settings.checkboxBorder#2a231c
  • settings.checkboxForeground#c5ab60
  • settings.dropdownBackground#544638
  • settings.dropdownBorder#2a231c
  • settings.dropdownForeground#c5ab60
  • settings.headerForeground#c5ab60
  • settings.modifiedItemIndicator#bd8a13
  • settings.numberInputBackground#544638
  • settings.numberInputBorder#2a231c
  • settings.numberInputForeground#c5ab60
  • settings.textInputBackground#544638
  • settings.textInputBorder#2a231c
  • settings.textInputForeground#c5ab60
  • sideBar.background#544638
  • sideBarSectionHeader.background#241200
  • sideBarSectionHeader.border#2a231c
  • sideBarTitle.foreground#c5ab60
  • statusBar.background#2a231c
  • statusBar.debuggingBackground#d5252b
  • statusBar.debuggingForeground#2a231c
  • statusBar.foreground#c5ab60
  • statusBar.noFolderBackground#2a231c
  • statusBar.noFolderForeground#c5ab60
  • statusBarItem.prominentBackground#d5252b
  • statusBarItem.prominentHoverBackground#bd8a13
  • statusBarItem.remoteBackground#4698a2
  • statusBarItem.remoteForeground#241200
  • tab.activeBackground#241200
  • tab.activeBorderTop#8c423180
  • tab.activeForeground#c5ab60
  • tab.border#2a231c
  • tab.inactiveBackground#544638
  • tab.inactiveForeground#957f58
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#4698a2
  • terminal.ansiBrightBlack#7e6954
  • terminal.ansiBrightBlue#7cc9ce
  • terminal.ansiBrightCyan#e6a96b
  • terminal.ansiBrightGreen#bfc659
  • terminal.ansiBrightMagenta#d16349
  • terminal.ansiBrightRed#e4591b
  • terminal.ansiBrightWhite#ffe9a3
  • terminal.ansiBrightYellow#ffca1b
  • terminal.ansiCyan#d98112
  • terminal.ansiGreen#909b00
  • terminal.ansiMagenta#8c4231
  • terminal.ansiRed#d5252b
  • terminal.ansiWhite#ddc165
  • terminal.ansiYellow#bd8a13
  • terminal.background#241200
  • terminal.border#c5ab60
  • terminal.foreground#c5ab60
  • terminal.selectionBackground#00000050
  • textBlockQuote.background#544638
  • titleBar.activeBackground#544638
  • titleBar.activeForeground#c5ab60
  • titleBar.inactiveBackground#2a231c
  • titleBar.inactiveForeground#957f58
  • walkThrough.embeddedEditorBackground#544638
  • welcomePage.buttonBackground#000000
  • welcomePage.buttonHoverBackground#7e695475
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#4698a2
source#c5ab60
meta.diff, meta.diff.header#957f58
markup.inserted#909b00
markup.deleted#d5252b
markup.changed#bd8a13
invalid#d5252bunderline italic
invalid.deprecated#c5ab60underline italic
entity.name.filename#ffca1b
markup.error#d5252b
markup.underlineunderline
markup.bold#bd8a13bold
markup.heading#4698a2bold
markup.italic#ffca1bitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#d98112
markup.inline.raw, markup.raw.restructuredtext#909b00
markup.underline.link, markup.underline.link.image#d98112
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#8c4231
entity.name.directive.restructuredtext, markup.quote#ffca1bitalic
meta.separator.markdown#957f58
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#909b00
punctuation.definition.constant.restructuredtext#4698a2
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#4698a2
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#c5ab60
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffca1b
entity.name.type.class, entity.name.class#d98112normal
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#4698a2italic
entity.other.inherited-class#d98112italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#957f58
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#8c4231
comment.block.documentation entity.name.type#d98112italic
comment.block.documentation entity.name.type punctuation.definition.bracket#d98112
comment.block.documentation variable#bd8a13italic
constant, variable.other.constant#4698a2
constant.character.escape, constant.character.string.escape, constant.regexp#8c4231
entity.name.tag#8c4231
entity.other.attribute-name.parent-selector#8c4231
entity.other.attribute-name#909b00italic
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#909b00
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#bd8a13italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#909b00italic
meta.decorator variable.other.object#909b00
keyword, punctuation.definition.keyword#8c4231
keyword.control.new, keyword.operator.newbold
meta.selector#8c4231
support#d98112italic
support.function.magic, support.variable, variable.other.predefined#4698a2regular
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#8c4231
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#c5ab60
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#8c4231
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#d98112
constant.other.date, constant.other.timestamp#bd8a13
variable.other.alias.yaml#909b00italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#8c4231regular
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#d98112italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#bd8a13
storage.modifier#8c4231
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffca1b
punctuation.definition.group.capture.regexp#8c4231
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#d5252b
punctuation.definition.character-class.regexp#d98112
punctuation.definition.group.regexp#bd8a13
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#d5252b
meta.assertion.look-ahead.regexp#909b00
string#ffca1b
punctuation.definition.string.begin, punctuation.definition.string.end#7cc9ce
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#4698a2
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#957f58
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#c5ab60
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#bd8a13italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#c5ab60normal
meta.selectionset.graphql variable#ffca1b
meta.selectionset.graphql meta.arguments variable#c5ab60
entity.name.fragment.graphql, variable.fragment.graphql#d98112
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#c5ab60
source.shell variable.other#4698a2
support.constant#4698a2normal
meta.scope.prerequisites.makefile#ffca1b
meta.attribute-selector.scss#ffca1b
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#c5ab60
meta.preprocessor.haskell#957f58