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#98a68310
  • activityBar.activeBorder#9c281980
  • activityBar.background#1f1e1e
  • activityBar.foreground#deba92
  • activityBar.inactiveForeground#61614f
  • activityBarBadge.background#9c2819
  • activityBarBadge.foreground#deba92
  • badge.background#2c3832
  • badge.foreground#deba92
  • breadcrumb.activeSelectionForeground#deba92
  • breadcrumb.background#02090c
  • breadcrumb.focusForeground#deba92
  • breadcrumb.foreground#61614f
  • breadcrumbPicker.background#171616
  • button.background#2c3832
  • button.foreground#deba92
  • contrastBorder#171616
  • debugToolBar.background#292826
  • diffEditor.insertedTextBackground#e86d0720
  • diffEditor.removedTextBackground#d4cab050
  • dropdown.background#1f1e1e
  • dropdown.border#171616
  • dropdown.foreground#deba92
  • editor.background#02090c
  • editor.findMatchBackground#c4867c80
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#292826
  • editor.foreground#deba92
  • editor.hoverHighlightBackground#cf844550
  • editor.lineHighlightBorder#2c3832
  • editor.rangeHighlightBackground#98a68315
  • editor.selectionBackground#2c3832
  • editor.selectionHighlightBackground#262525
  • editor.snippetFinalTabstopHighlightBackground#02090c
  • editor.snippetFinalTabstopHighlightBorder#e86d07
  • editor.snippetTabstopHighlightBackground#02090c
  • editor.snippetTabstopHighlightBorder#61614f
  • editor.wordHighlightBackground#cf844550
  • editor.wordHighlightStrongBackground#e86d0750
  • editorCodeLens.foreground#61614f
  • editorError.foreground#d4cab0
  • editorGroup.border#98a683
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#171616
  • editorGutter.addedBackground#e86d0780
  • editorGutter.deletedBackground#d4cab080
  • editorGutter.modifiedBackground#cf844580
  • editorHoverWidget.background#02090c
  • editorHoverWidget.border#61614f
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#61614f
  • editorLink.activeForeground#cf8445
  • editorMarkerNavigation.background#292826
  • editorOverviewRuler.addedForeground#e86d0780
  • editorOverviewRuler.border#171616
  • editorOverviewRuler.currentContentForeground#e86d07
  • editorOverviewRuler.deletedForeground#d4cab080
  • editorOverviewRuler.errorForeground#d4cab080
  • editorOverviewRuler.incomingContentForeground#98a683
  • editorOverviewRuler.infoForeground#cf844580
  • editorOverviewRuler.modifiedForeground#cf844580
  • editorOverviewRuler.selectionHighlightForeground#c4867c
  • editorOverviewRuler.warningForeground#c4867c80
  • editorOverviewRuler.wordHighlightForeground#cf8445
  • editorOverviewRuler.wordHighlightStrongForeground#e86d07
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#292826
  • editorSuggestWidget.foreground#deba92
  • editorSuggestWidget.selectedBackground#2c3832
  • editorWarning.foreground#cf8445
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#292826
  • errorForeground#d4cab0
  • extensionButton.prominentBackground#e86d0790
  • extensionButton.prominentForeground#deba92
  • extensionButton.prominentHoverBackground#e86d0760
  • focusBorder#61614f
  • foreground#deba92
  • gitDecoration.conflictingResourceForeground#c4867c
  • gitDecoration.deletedResourceForeground#d4cab0
  • gitDecoration.ignoredResourceForeground#61614f
  • gitDecoration.modifiedResourceForeground#cf8445
  • gitDecoration.untrackedResourceForeground#e86d07
  • input.background#02090c
  • input.border#171616
  • input.foreground#deba92
  • input.placeholderForeground#61614f
  • inputOption.activeBorder#98a683
  • inputValidation.errorBorder#d4cab0
  • inputValidation.infoBorder#9c2819
  • inputValidation.warningBorder#c4867c
  • list.activeSelectionBackground#2c3832
  • list.activeSelectionForeground#deba92
  • list.dropBackground#2c3832
  • list.errorForeground#d4cab0
  • list.focusBackground#44475A75
  • list.highlightForeground#cf8445
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#c4867c
  • listFilterWidget.background#1f1e1e
  • listFilterWidget.noMatchesOutline#d4cab0
  • listFilterWidget.outline#262525
  • merge.currentHeaderBackground#e86d0790
  • merge.incomingHeaderBackground#98a68390
  • notification.background#02090c
  • notification.buttonBackground#2c3832
  • notification.buttonForeground#deba92
  • notification.buttonHoverBackground#44475A75
  • notification.errorBackground#d4cab0
  • notification.errorForeground#deba92
  • notification.foreground#deba92
  • notification.infoBackground#cf8445
  • notification.infoForeground#02090c
  • notification.warningBackground#c4867c
  • notification.warningForeground#02090c
  • panel.background#02090c
  • panel.border#98a683
  • panelTitle.activeBorder#9c2819
  • panelTitle.activeForeground#deba92
  • panelTitle.inactiveForeground#61614f
  • peekView.border#2c3832
  • peekViewEditor.background#02090c
  • peekViewEditor.matchHighlightBackground#96452680
  • peekViewResult.background#292826
  • peekViewResult.fileForeground#deba92
  • peekViewResult.lineForeground#deba92
  • peekViewResult.matchHighlightBackground#96452680
  • peekViewResult.selectionBackground#2c3832
  • peekViewResult.selectionForeground#deba92
  • peekViewTitle.background#171616
  • peekViewTitleDescription.foreground#61614f
  • peekViewTitleLabel.foreground#deba92
  • pickerGroup.border#98a683
  • pickerGroup.foreground#cf8445
  • progressBar.background#9c2819
  • selection.background#98a683
  • settings.checkboxBackground#292826
  • settings.checkboxBorder#171616
  • settings.checkboxForeground#deba92
  • settings.dropdownBackground#292826
  • settings.dropdownBorder#171616
  • settings.dropdownForeground#deba92
  • settings.headerForeground#deba92
  • settings.modifiedItemForeground#c4867c
  • settings.modifiedItemIndicator#c4867c
  • settings.numberInputBackground#292826
  • settings.numberInputBorder#171616
  • settings.numberInputForeground#deba92
  • settings.textInputBackground#292826
  • settings.textInputBorder#171616
  • settings.textInputForeground#deba92
  • sideBar.background#292826
  • sideBarSectionHeader.background#02090c
  • sideBarSectionHeader.border#171616
  • sideBarTitle.foreground#deba92
  • statusBar.background#171616
  • statusBar.debuggingBackground#d4cab0
  • statusBar.debuggingForeground#171616
  • statusBar.foreground#deba92
  • statusBar.noFolderBackground#171616
  • statusBar.noFolderForeground#deba92
  • statusBarItem.prominentBackground#d4cab0
  • statusBarItem.prominentHoverBackground#c4867c
  • statusBarItem.remoteBackground#98a683
  • statusBarItem.remoteForeground#deba92
  • tab.activeBackground#02090c
  • tab.activeBorderTop#9c281980
  • tab.activeForeground#deba92
  • tab.border#171616
  • tab.inactiveBackground#292826
  • tab.inactiveForeground#61614f
  • terminal.ansiBlack#1f1e1d
  • terminal.ansiBlue#b5bab9
  • terminal.ansiBrightBlack#6d7691
  • terminal.ansiBrightBlue#b19fc2
  • terminal.ansiBrightCyan#afc4bc
  • terminal.ansiBrightGreen#84a19f
  • terminal.ansiBrightMagenta#b5a491
  • terminal.ansiBrightRed#ed9247
  • terminal.ansiBrightWhite#f5f0f0
  • terminal.ansiBrightYellow#e3baa3
  • terminal.ansiCyan#de7266
  • terminal.ansiGreen#9dcfaa
  • terminal.ansiMagenta#deb67e
  • terminal.ansiRed#c97a12
  • terminal.ansiWhite#e8d4be
  • terminal.ansiYellow#84b8ac
  • terminal.background#02090c
  • terminal.foreground#deba92
  • titleBar.activeBackground#292826
  • titleBar.activeForeground#deba92
  • titleBar.inactiveBackground#171616
  • titleBar.inactiveForeground#61614f
  • walkThrough.embeddedEditorBackground#292826

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#98a683
source#deba92
meta.diff, meta.diff.header#61614f
markup.inserted#e86d07
markup.deleted#d4cab0
markup.changed#c4867c
invalid#d4cab0underline italic
invalid.deprecated#deba92underline italic
entity.name.filename#964526
markup.error#d4cab0
markup.underlineunderline
markup.bold#c4867cbold
markup.heading#98a683bold
markup.italic#964526italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#cf8445
markup.inline.raw, markup.raw.restructuredtext#e86d07
markup.underline.link, markup.underline.link.image#cf8445
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#9c2819
entity.name.directive.restructuredtext, markup.quote#964526italic
meta.separator.markdown#61614f
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#e86d07
punctuation.definition.constant.restructuredtext#98a683
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#98a683
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#deba92
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#964526
entity.name.type.class, entity.name.class#cf8445normal
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#98a683italic
entity.other.inherited-class#cf8445italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#61614f
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#9c2819
comment.block.documentation entity.name.type#cf8445italic
comment.block.documentation entity.name.type punctuation.definition.bracket#cf8445
comment.block.documentation variable#c4867citalic
constant, variable.other.constant#98a683
constant.character.escape, constant.character.string.escape, constant.regexp#9c2819
entity.name.tag#9c2819
entity.other.attribute-name.parent-selector#9c2819
entity.other.attribute-name#e86d07italic
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#e86d07
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#c4867citalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#e86d07italic
meta.decorator variable.other.object#e86d07
keyword, punctuation.definition.keyword#9c2819
keyword.control.new, keyword.operator.newbold
meta.selector#9c2819
support#cf8445italic
support.function.magic, support.variable, variable.other.predefined#98a683regular
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#9c2819
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#deba92
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#9c2819
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#cf8445
constant.other.date, constant.other.timestamp#c4867c
variable.other.alias.yaml#e86d07italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#9c2819regular
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#cf8445italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#c4867c
storage.modifier#9c2819
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#964526
punctuation.definition.group.capture.regexp#9c2819
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#d4cab0
punctuation.definition.character-class.regexp#cf8445
punctuation.definition.group.regexp#c4867c
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#d4cab0
meta.assertion.look-ahead.regexp#e86d07
string#964526
punctuation.definition.string.begin, punctuation.definition.string.end#b55b22
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#378da1
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#61614f
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#deba92
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#c4867citalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#deba92normal
meta.selectionset.graphql variable#964526
meta.selectionset.graphql meta.arguments variable#deba92
entity.name.fragment.graphql, variable.fragment.graphql#cf8445
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#deba92
source.shell variable.other#98a683
support.constant#98a683normal
meta.scope.prerequisites.makefile#964526
meta.attribute-selector.scss#964526
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#deba92
meta.preprocessor.haskell#61614f