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#bd6c0010
  • activityBar.activeBorder#fb5d0080
  • activityBar.background#262626
  • activityBar.foreground#d9a971
  • activityBar.inactiveForeground#8f6c41
  • activityBarBadge.background#fb5d00
  • activityBarBadge.foreground#262626
  • badge.background#000000
  • badge.foreground#d9a971
  • breadcrumb.activeSelectionForeground#d9a971
  • breadcrumb.background#262626
  • breadcrumb.focusForeground#d9a971
  • breadcrumb.foreground#8f6c41
  • breadcrumbPicker.background#231a0d
  • button.background#46341b
  • button.foreground#d9a971
  • checkbox.background#46341b
  • checkbox.border#231a0d
  • checkbox.foreground#d9a971
  • contrastBorder#231a0d
  • debugToolBar.background#46341b
  • diffEditor.insertedTextBackground#a3a90020
  • diffEditor.removedTextBackground#c0390050
  • dropdown.background#262626
  • dropdown.border#231a0d
  • dropdown.foreground#d9a971
  • editor.background#262626
  • editor.findMatchBackground#caae0080
  • editor.findMatchHighlightBackground#f9f9fe40
  • editor.findRangeHighlightBackground#6a4e2975
  • editor.foldBackground#46341b
  • editor.foreground#d9a971
  • editor.hoverHighlightBackground#231a0d
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#bd6c0015
  • editor.selectionBackground#000000
  • editor.selectionHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBackground#262626
  • editor.snippetFinalTabstopHighlightBorder#a3a900
  • editor.snippetTabstopHighlightBackground#262626
  • editor.snippetTabstopHighlightBorder#8f6c41
  • editor.wordHighlightBackground#f7940050
  • editor.wordHighlightStrongBackground#a3a90050
  • editorCodeLens.foreground#8f6c41
  • editorError.foreground#c03900
  • editorGroup.border#bd6c00
  • editorGroup.dropBackground#6a4e2970
  • editorGroupHeader.tabsBackground#231a0d
  • editorGutter.addedBackground#a3a90080
  • editorGutter.deletedBackground#c0390080
  • editorGutter.modifiedBackground#f7940080
  • editorHoverWidget.background#262626
  • editorHoverWidget.border#8f6c41
  • editorIndentGuide.activeBackground#f9f9fe45
  • editorIndentGuide.background#f9f9fe1A
  • editorLineNumber.foreground#8f6c41
  • editorLink.activeForeground#f79400
  • editorMarkerNavigation.background#46341b
  • editorOverviewRuler.addedForeground#a3a90080
  • editorOverviewRuler.border#231a0d
  • editorOverviewRuler.currentContentForeground#a3a900
  • editorOverviewRuler.deletedForeground#c0390080
  • editorOverviewRuler.errorForeground#c0390080
  • editorOverviewRuler.incomingContentForeground#bd6c00
  • editorOverviewRuler.infoForeground#f7940080
  • editorOverviewRuler.modifiedForeground#f7940080
  • editorOverviewRuler.selectionHighlightForeground#caae00
  • editorOverviewRuler.warningForeground#caae0080
  • editorOverviewRuler.wordHighlightForeground#f79400
  • editorOverviewRuler.wordHighlightStrongForeground#a3a900
  • editorRuler.foreground#f9f9fe1A
  • editorSuggestWidget.background#46341b
  • editorSuggestWidget.foreground#d9a971
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#caae00
  • editorWhitespace.foreground#f9f9fe1A
  • editorWidget.background#46341b
  • errorForeground#c03900
  • extensionButton.prominentBackground#a3a90090
  • extensionButton.prominentForeground#d9a971
  • extensionButton.prominentHoverBackground#a3a90060
  • focusBorder#8f6c41
  • foreground#d9a971
  • gitDecoration.conflictingResourceForeground#caae00
  • gitDecoration.deletedResourceForeground#c03900
  • gitDecoration.ignoredResourceForeground#8f6c41
  • gitDecoration.modifiedResourceForeground#f79400
  • gitDecoration.untrackedResourceForeground#a3a900
  • input.background#262626
  • input.border#231a0d
  • input.foreground#d9a971
  • input.placeholderForeground#8f6c41
  • inputOption.activeBorder#bd6c00
  • inputValidation.errorBackground#262626
  • inputValidation.errorBorder#c03900
  • inputValidation.errorForeground#c03900
  • inputValidation.infoBackground#262626
  • inputValidation.infoBorder#bd6c00
  • inputValidation.infoForeground#bd6c00
  • inputValidation.warningBackground#262626
  • inputValidation.warningBorder#caae00
  • inputValidation.warningForeground#caae00
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#d9a971
  • list.dropBackground#000000
  • list.errorForeground#c03900
  • list.focusBackground#6a4e2975
  • list.highlightForeground#f79400
  • list.hoverBackground#6a4e2975
  • list.inactiveSelectionBackground#6a4e2975
  • list.warningForeground#caae00
  • listFilterWidget.background#262626
  • listFilterWidget.noMatchesOutline#c03900
  • listFilterWidget.outline#000000
  • merge.currentHeaderBackground#a3a90090
  • merge.incomingHeaderBackground#bd6c0090
  • notification.background#262626
  • notification.buttonBackground#000000
  • notification.buttonForeground#d9a971
  • notification.buttonHoverBackground#6a4e2975
  • notification.errorBackground#c03900
  • notification.errorForeground#262626
  • notification.foreground#d9a971
  • notification.infoBackground#bd6c00
  • notification.infoForeground#262626
  • notification.warningBackground#caae00
  • notification.warningForeground#262626
  • notificationCenter.border#46341b
  • notificationCenterHeader.background#262626
  • notificationCenterHeader.foreground#d9a971
  • notificationLink.foreground#f79400
  • notifications.background#262626
  • notifications.border#46341b
  • notifications.foreground#d9a971
  • notificationsErrorIcon.foreground#c03900
  • notificationsInfoIcon.foreground#bd6c00
  • notificationsWarningIcon.foreground#caae00
  • notificationToast.border#46341b
  • panel.background#262626
  • panel.border#bd6c00
  • panelInput.border#d9a971
  • panelTitle.activeBorder#fb5d00
  • panelTitle.activeForeground#d9a971
  • panelTitle.inactiveForeground#8f6c41
  • peekView.border#000000
  • peekViewEditor.background#262626
  • peekViewEditor.matchHighlightBackground#ffe36e80
  • peekViewResult.background#46341b
  • peekViewResult.fileForeground#d9a971
  • peekViewResult.lineForeground#d9a971
  • peekViewResult.matchHighlightBackground#ffe36e80
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#d9a971
  • peekViewTitle.background#231a0d
  • peekViewTitleDescription.foreground#8f6c41
  • peekViewTitleLabel.foreground#d9a971
  • pickerGroup.border#bd6c00
  • pickerGroup.foreground#f79400
  • progressBar.background#fb5d00
  • scrollbar.shadow#444444
  • selection.background#bd6c00
  • settings.checkboxBackground#46341b
  • settings.checkboxBorder#231a0d
  • settings.checkboxForeground#d9a971
  • settings.dropdownBackground#46341b
  • settings.dropdownBorder#231a0d
  • settings.dropdownForeground#d9a971
  • settings.headerForeground#d9a971
  • settings.modifiedItemIndicator#caae00
  • settings.numberInputBackground#46341b
  • settings.numberInputBorder#231a0d
  • settings.numberInputForeground#d9a971
  • settings.textInputBackground#46341b
  • settings.textInputBorder#231a0d
  • settings.textInputForeground#d9a971
  • sideBar.background#46341b
  • sideBarSectionHeader.background#262626
  • sideBarSectionHeader.border#231a0d
  • sideBarTitle.foreground#d9a971
  • statusBar.background#231a0d
  • statusBar.debuggingBackground#c03900
  • statusBar.debuggingForeground#231a0d
  • statusBar.foreground#d9a971
  • statusBar.noFolderBackground#231a0d
  • statusBar.noFolderForeground#d9a971
  • statusBarItem.prominentBackground#c03900
  • statusBarItem.prominentHoverBackground#caae00
  • statusBarItem.remoteBackground#bd6c00
  • statusBarItem.remoteForeground#262626
  • tab.activeBackground#262626
  • tab.activeBorderTop#fb5d0080
  • tab.activeForeground#d9a971
  • tab.border#231a0d
  • tab.inactiveBackground#46341b
  • tab.inactiveForeground#8f6c41
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#bd6c00
  • terminal.ansiBrightBlack#6a4e29
  • terminal.ansiBrightBlue#ffbd54
  • terminal.ansiBrightCyan#c59752
  • terminal.ansiBrightGreen#f6ff3f
  • terminal.ansiBrightMagenta#fc874f
  • terminal.ansiBrightRed#ff8b67
  • terminal.ansiBrightWhite#f9f9fe
  • terminal.ansiBrightYellow#ffe36e
  • terminal.ansiCyan#f79400
  • terminal.ansiGreen#a3a900
  • terminal.ansiMagenta#fb5d00
  • terminal.ansiRed#c03900
  • terminal.ansiWhite#ffc88a
  • terminal.ansiYellow#caae00
  • terminal.background#262626
  • terminal.border#d9a971
  • terminal.foreground#d9a971
  • terminal.selectionBackground#00000050
  • textBlockQuote.background#46341b
  • titleBar.activeBackground#46341b
  • titleBar.activeForeground#d9a971
  • titleBar.inactiveBackground#231a0d
  • titleBar.inactiveForeground#8f6c41
  • walkThrough.embeddedEditorBackground#46341b
  • welcomePage.buttonBackground#000000
  • welcomePage.buttonHoverBackground#6a4e2975
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#bd6c00
source#d9a971
meta.diff, meta.diff.header#8f6c41
markup.inserted#a3a900
markup.deleted#c03900
markup.changed#caae00
invalid#c03900underline italic
invalid.deprecated#d9a971underline italic
entity.name.filename#ffe36e
markup.error#c03900
markup.underlineunderline
markup.bold#caae00bold
markup.heading#bd6c00bold
markup.italic#ffe36eitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#f79400
markup.inline.raw, markup.raw.restructuredtext#a3a900
markup.underline.link, markup.underline.link.image#f79400
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#fb5d00
entity.name.directive.restructuredtext, markup.quote#ffe36eitalic
meta.separator.markdown#8f6c41
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#a3a900
punctuation.definition.constant.restructuredtext#bd6c00
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#bd6c00
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#d9a971
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffe36e
entity.name.type.class, entity.name.class#f79400normal
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#bd6c00italic
entity.other.inherited-class#f79400italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#8f6c41
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#fb5d00
comment.block.documentation entity.name.type#f79400italic
comment.block.documentation entity.name.type punctuation.definition.bracket#f79400
comment.block.documentation variable#caae00italic
constant, variable.other.constant#bd6c00
constant.character.escape, constant.character.string.escape, constant.regexp#fb5d00
entity.name.tag#fb5d00
entity.other.attribute-name.parent-selector#fb5d00
entity.other.attribute-name#a3a900italic
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#a3a900
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#caae00italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#a3a900italic
meta.decorator variable.other.object#a3a900
keyword, punctuation.definition.keyword#fb5d00
keyword.control.new, keyword.operator.newbold
meta.selector#fb5d00
support#f79400italic
support.function.magic, support.variable, variable.other.predefined#bd6c00regular
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#fb5d00
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#d9a971
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#fb5d00
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#f79400
constant.other.date, constant.other.timestamp#caae00
variable.other.alias.yaml#a3a900italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#fb5d00regular
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#f79400italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#caae00
storage.modifier#fb5d00
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffe36e
punctuation.definition.group.capture.regexp#fb5d00
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#c03900
punctuation.definition.character-class.regexp#f79400
punctuation.definition.group.regexp#caae00
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#c03900
meta.assertion.look-ahead.regexp#a3a900
string#ffe36e
punctuation.definition.string.begin, punctuation.definition.string.end#ffbd54
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#bd6c00
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#8f6c41
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#d9a971
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#caae00italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#d9a971normal
meta.selectionset.graphql variable#ffe36e
meta.selectionset.graphql meta.arguments variable#d9a971
entity.name.fragment.graphql, variable.fragment.graphql#f79400
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#d9a971
source.shell variable.other#bd6c00
support.constant#bd6c00normal
meta.scope.prerequisites.makefile#ffe36e
meta.attribute-selector.scss#ffe36e
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#d9a971
meta.preprocessor.haskell#8f6c41