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#a5b48110
  • activityBar.activeBorder#64853080
  • activityBar.background#1f1e1e
  • activityBar.foreground#ebd0a9
  • activityBar.inactiveForeground#586073
  • activityBarBadge.background#648530
  • activityBarBadge.foreground#ebd0a9
  • badge.background#1f1e1e
  • badge.foreground#ebd0a9
  • breadcrumb.activeSelectionForeground#ebd0a9
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#ebd0a9
  • breadcrumb.foreground#586073
  • breadcrumbPicker.background#171616
  • button.background#1f1e1e
  • button.foreground#ebd0a9
  • contrastBorder#171616
  • debugToolBar.background#292826
  • diffEditor.insertedTextBackground#ff8e1320
  • diffEditor.removedTextBackground#a5b48150
  • dropdown.background#1f1e1e
  • dropdown.border#171616
  • dropdown.foreground#ebd0a9
  • editor.background#000000
  • editor.findMatchBackground#d1757580
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#292826
  • editor.foreground#ebd0a9
  • editor.hoverHighlightBackground#f4b43050
  • editor.lineHighlightBorder#1f1e1e
  • editor.rangeHighlightBackground#a5b48115
  • editor.selectionBackground#1f1e1e
  • editor.selectionHighlightBackground#262525
  • editor.snippetFinalTabstopHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBorder#ff8e13
  • editor.snippetTabstopHighlightBackground#000000
  • editor.snippetTabstopHighlightBorder#586073
  • editor.wordHighlightBackground#f4b43050
  • editor.wordHighlightStrongBackground#ff8e1350
  • editorCodeLens.foreground#586073
  • editorError.foreground#a5b481
  • editorGroup.border#a5b481
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#171616
  • editorGutter.addedBackground#ff8e1380
  • editorGutter.deletedBackground#a5b48180
  • editorGutter.modifiedBackground#f4b43080
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#586073
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#586073
  • editorLink.activeForeground#f4b430
  • editorMarkerNavigation.background#292826
  • editorOverviewRuler.addedForeground#ff8e1380
  • editorOverviewRuler.border#171616
  • editorOverviewRuler.currentContentForeground#ff8e13
  • editorOverviewRuler.deletedForeground#a5b48180
  • editorOverviewRuler.errorForeground#a5b48180
  • editorOverviewRuler.incomingContentForeground#a5b481
  • editorOverviewRuler.infoForeground#f4b43080
  • editorOverviewRuler.modifiedForeground#f4b43080
  • editorOverviewRuler.selectionHighlightForeground#d17575
  • editorOverviewRuler.warningForeground#d1757580
  • editorOverviewRuler.wordHighlightForeground#f4b430
  • editorOverviewRuler.wordHighlightStrongForeground#ff8e13
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#292826
  • editorSuggestWidget.foreground#ebd0a9
  • editorSuggestWidget.selectedBackground#1f1e1e
  • editorWarning.foreground#f4b430
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#292826
  • errorForeground#a5b481
  • extensionButton.prominentBackground#ff8e1390
  • extensionButton.prominentForeground#ebd0a9
  • extensionButton.prominentHoverBackground#ff8e1360
  • focusBorder#586073
  • foreground#ebd0a9
  • gitDecoration.conflictingResourceForeground#d17575
  • gitDecoration.deletedResourceForeground#a5b481
  • gitDecoration.ignoredResourceForeground#586073
  • gitDecoration.modifiedResourceForeground#f4b430
  • gitDecoration.untrackedResourceForeground#ff8e13
  • input.background#000000
  • input.border#171616
  • input.foreground#ebd0a9
  • input.placeholderForeground#586073
  • inputOption.activeBorder#a5b481
  • inputValidation.errorBorder#a5b481
  • inputValidation.infoBorder#648530
  • inputValidation.warningBorder#d17575
  • list.activeSelectionBackground#1f1e1e
  • list.activeSelectionForeground#ebd0a9
  • list.dropBackground#1f1e1e
  • list.errorForeground#a5b481
  • list.focusBackground#44475A75
  • list.highlightForeground#f4b430
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#d17575
  • listFilterWidget.background#1f1e1e
  • listFilterWidget.noMatchesOutline#a5b481
  • listFilterWidget.outline#262525
  • merge.currentHeaderBackground#ff8e1390
  • merge.incomingHeaderBackground#a5b48190
  • notification.background#000000
  • notification.buttonBackground#1f1e1e
  • notification.buttonForeground#ebd0a9
  • notification.buttonHoverBackground#44475A75
  • notification.errorBackground#a5b481
  • notification.errorForeground#ebd0a9
  • notification.foreground#ebd0a9
  • notification.infoBackground#f4b430
  • notification.infoForeground#000000
  • notification.warningBackground#d17575
  • notification.warningForeground#000000
  • panel.background#000000
  • panel.border#a5b481
  • panelTitle.activeBorder#648530
  • panelTitle.activeForeground#ebd0a9
  • panelTitle.inactiveForeground#586073
  • peekView.border#1f1e1e
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#779d4680
  • peekViewResult.background#292826
  • peekViewResult.fileForeground#ebd0a9
  • peekViewResult.lineForeground#ebd0a9
  • peekViewResult.matchHighlightBackground#779d4680
  • peekViewResult.selectionBackground#1f1e1e
  • peekViewResult.selectionForeground#ebd0a9
  • peekViewTitle.background#171616
  • peekViewTitleDescription.foreground#586073
  • peekViewTitleLabel.foreground#ebd0a9
  • pickerGroup.border#a5b481
  • pickerGroup.foreground#f4b430
  • progressBar.background#648530
  • selection.background#a5b481
  • settings.checkboxBackground#292826
  • settings.checkboxBorder#171616
  • settings.checkboxForeground#ebd0a9
  • settings.dropdownBackground#292826
  • settings.dropdownBorder#171616
  • settings.dropdownForeground#ebd0a9
  • settings.headerForeground#ebd0a9
  • settings.modifiedItemForeground#d17575
  • settings.modifiedItemIndicator#d17575
  • settings.numberInputBackground#292826
  • settings.numberInputBorder#171616
  • settings.numberInputForeground#ebd0a9
  • settings.textInputBackground#292826
  • settings.textInputBorder#171616
  • settings.textInputForeground#ebd0a9
  • sideBar.background#292826
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#171616
  • sideBarTitle.foreground#ebd0a9
  • statusBar.background#171616
  • statusBar.debuggingBackground#a5b481
  • statusBar.debuggingForeground#171616
  • statusBar.foreground#ebd0a9
  • statusBar.noFolderBackground#171616
  • statusBar.noFolderForeground#ebd0a9
  • statusBarItem.prominentBackground#a5b481
  • statusBarItem.prominentHoverBackground#d17575
  • statusBarItem.remoteBackground#a5b481
  • statusBarItem.remoteForeground#ebd0a9
  • tab.activeBackground#000000
  • tab.activeBorderTop#64853080
  • tab.activeForeground#ebd0a9
  • tab.border#171616
  • tab.inactiveBackground#292826
  • tab.inactiveForeground#586073
  • terminal.ansiBlack#1f1e1d
  • terminal.ansiBlue#6dd6c3
  • terminal.ansiBrightBlack#6d7691
  • terminal.ansiBrightBlue#D6ACFF
  • terminal.ansiBrightCyan#8fdbdb
  • terminal.ansiBrightGreen#449c5d
  • terminal.ansiBrightMagenta#50e69d
  • terminal.ansiBrightRed#ed9247
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#ffc5a6
  • terminal.ansiCyan#6ea9b5
  • terminal.ansiGreen#50FA7B
  • terminal.ansiMagenta#deb67e
  • terminal.ansiRed#e88a0e
  • terminal.ansiWhite#e8d4be
  • terminal.ansiYellow#72b583
  • terminal.background#000000
  • terminal.foreground#ebd0a9
  • titleBar.activeBackground#292826
  • titleBar.activeForeground#ebd0a9
  • titleBar.inactiveBackground#171616
  • titleBar.inactiveForeground#586073
  • walkThrough.embeddedEditorBackground#292826

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#a5b481
source#ebd0a9
meta.diff, meta.diff.header#586073
markup.inserted#ff8e13
markup.deleted#a5b481
markup.changed#d17575
invalid#a5b481underline italic
invalid.deprecated#ebd0a9underline italic
entity.name.filename#779d46
markup.error#a5b481
markup.underlineunderline
markup.bold#d17575bold
markup.heading#a5b481bold
markup.italic#779d46italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#f4b430
markup.inline.raw, markup.raw.restructuredtext#ff8e13
markup.underline.link, markup.underline.link.image#f4b430
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#648530
entity.name.directive.restructuredtext, markup.quote#779d46italic
meta.separator.markdown#586073
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#ff8e13
punctuation.definition.constant.restructuredtext#a5b481
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#a5b481
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#ebd0a9
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#779d46
entity.name.type.class, entity.name.class#f4b430normal
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#a5b481italic
entity.other.inherited-class#f4b430italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#586073
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#648530
comment.block.documentation entity.name.type#f4b430italic
comment.block.documentation entity.name.type punctuation.definition.bracket#f4b430
comment.block.documentation variable#d17575italic
constant, variable.other.constant#a5b481
constant.character.escape, constant.character.string.escape, constant.regexp#648530
entity.name.tag#648530
entity.other.attribute-name.parent-selector#648530
entity.other.attribute-name#ff8e13italic
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#ff8e13
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#d17575italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#ff8e13italic
meta.decorator variable.other.object#ff8e13
keyword, punctuation.definition.keyword#648530
keyword.control.new, keyword.operator.newbold
meta.selector#648530
support#f4b430italic
support.function.magic, support.variable, variable.other.predefined#a5b481regular
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#648530
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#ebd0a9
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#648530
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#f4b430
constant.other.date, constant.other.timestamp#d17575
variable.other.alias.yaml#ff8e13italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#648530regular
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#f4b430italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#d17575
storage.modifier#648530
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#779d46
punctuation.definition.group.capture.regexp#648530
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#a5b481
punctuation.definition.character-class.regexp#f4b430
punctuation.definition.group.regexp#d17575
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#a5b481
meta.assertion.look-ahead.regexp#ff8e13
string#779d46
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#586073
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#ebd0a9
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#d17575italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#ebd0a9normal
meta.selectionset.graphql variable#779d46
meta.selectionset.graphql meta.arguments variable#ebd0a9
entity.name.fragment.graphql, variable.fragment.graphql#f4b430
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#ebd0a9
source.shell variable.other#a5b481
support.constant#a5b481normal
meta.scope.prerequisites.makefile#779d46
meta.attribute-selector.scss#779d46
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#ebd0a9
meta.preprocessor.haskell#586073