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#37795610
  • activityBar.activeBorder#5779b580
  • activityBar.background#1f1e1e
  • activityBar.foreground#DAA190
  • activityBar.inactiveForeground#003F2E
  • activityBarBadge.background#5779b5
  • activityBarBadge.foreground#DAA190
  • badge.background#272e2a
  • badge.foreground#DAA190
  • breadcrumb.activeSelectionForeground#DAA190
  • breadcrumb.background#02090c
  • breadcrumb.focusForeground#DAA190
  • breadcrumb.foreground#003F2E
  • breadcrumbPicker.background#171616
  • button.background#272e2a
  • button.foreground#DAA190
  • contrastBorder#171616
  • debugToolBar.background#292826
  • diffEditor.insertedTextBackground#FA8A4020
  • diffEditor.removedTextBackground#9F9DAA50
  • dropdown.background#1f1e1e
  • dropdown.border#171616
  • dropdown.foreground#DAA190
  • editor.background#02090c
  • editor.findMatchBackground#deab3580
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#292826
  • editor.foreground#DAA190
  • editor.hoverHighlightBackground#AA236650
  • editor.lineHighlightBorder#272e2a
  • editor.rangeHighlightBackground#37795615
  • editor.selectionBackground#272e2a
  • editor.selectionHighlightBackground#262525
  • editor.snippetFinalTabstopHighlightBackground#02090c
  • editor.snippetFinalTabstopHighlightBorder#FA8A40
  • editor.snippetTabstopHighlightBackground#02090c
  • editor.snippetTabstopHighlightBorder#003F2E
  • editor.wordHighlightBackground#AA236650
  • editor.wordHighlightStrongBackground#FA8A4050
  • editorCodeLens.foreground#003F2E
  • editorError.foreground#9F9DAA
  • editorGroup.border#377956
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#171616
  • editorGutter.addedBackground#FA8A4080
  • editorGutter.deletedBackground#9F9DAA80
  • editorGutter.modifiedBackground#AA236680
  • editorHoverWidget.background#02090c
  • editorHoverWidget.border#003F2E
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#003F2E
  • editorLink.activeForeground#AA2366
  • editorMarkerNavigation.background#292826
  • editorOverviewRuler.addedForeground#FA8A4080
  • editorOverviewRuler.border#171616
  • editorOverviewRuler.currentContentForeground#FA8A40
  • editorOverviewRuler.deletedForeground#9F9DAA80
  • editorOverviewRuler.errorForeground#9F9DAA80
  • editorOverviewRuler.incomingContentForeground#377956
  • editorOverviewRuler.infoForeground#AA236680
  • editorOverviewRuler.modifiedForeground#AA236680
  • editorOverviewRuler.selectionHighlightForeground#deab35
  • editorOverviewRuler.warningForeground#deab3580
  • editorOverviewRuler.wordHighlightForeground#AA2366
  • editorOverviewRuler.wordHighlightStrongForeground#FA8A40
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#292826
  • editorSuggestWidget.foreground#DAA190
  • editorSuggestWidget.selectedBackground#272e2a
  • editorWarning.foreground#AA2366
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#292826
  • errorForeground#9F9DAA
  • extensionButton.prominentBackground#FA8A4090
  • extensionButton.prominentForeground#DAA190
  • extensionButton.prominentHoverBackground#FA8A4060
  • focusBorder#003F2E
  • foreground#DAA190
  • gitDecoration.conflictingResourceForeground#deab35
  • gitDecoration.deletedResourceForeground#9F9DAA
  • gitDecoration.ignoredResourceForeground#003F2E
  • gitDecoration.modifiedResourceForeground#AA2366
  • gitDecoration.untrackedResourceForeground#FA8A40
  • input.background#02090c
  • input.border#171616
  • input.foreground#DAA190
  • input.placeholderForeground#003F2E
  • inputOption.activeBorder#377956
  • inputValidation.errorBorder#9F9DAA
  • inputValidation.infoBorder#5779b5
  • inputValidation.warningBorder#deab35
  • list.activeSelectionBackground#272e2a
  • list.activeSelectionForeground#DAA190
  • list.dropBackground#272e2a
  • list.errorForeground#9F9DAA
  • list.focusBackground#44475A75
  • list.highlightForeground#AA2366
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#deab35
  • listFilterWidget.background#1f1e1e
  • listFilterWidget.noMatchesOutline#9F9DAA
  • listFilterWidget.outline#262525
  • merge.currentHeaderBackground#FA8A4090
  • merge.incomingHeaderBackground#37795690
  • notification.background#02090c
  • notification.buttonBackground#272e2a
  • notification.buttonForeground#DAA190
  • notification.buttonHoverBackground#44475A75
  • notification.errorBackground#9F9DAA
  • notification.errorForeground#DAA190
  • notification.foreground#DAA190
  • notification.infoBackground#AA2366
  • notification.infoForeground#02090c
  • notification.warningBackground#deab35
  • notification.warningForeground#02090c
  • panel.background#02090c
  • panel.border#377956
  • panelTitle.activeBorder#5779b5
  • panelTitle.activeForeground#DAA190
  • panelTitle.inactiveForeground#003F2E
  • peekView.border#272e2a
  • peekViewEditor.background#02090c
  • peekViewEditor.matchHighlightBackground#BE9B5C80
  • peekViewResult.background#292826
  • peekViewResult.fileForeground#DAA190
  • peekViewResult.lineForeground#DAA190
  • peekViewResult.matchHighlightBackground#BE9B5C80
  • peekViewResult.selectionBackground#272e2a
  • peekViewResult.selectionForeground#DAA190
  • peekViewTitle.background#171616
  • peekViewTitleDescription.foreground#003F2E
  • peekViewTitleLabel.foreground#DAA190
  • pickerGroup.border#377956
  • pickerGroup.foreground#AA2366
  • progressBar.background#5779b5
  • selection.background#377956
  • settings.checkboxBackground#292826
  • settings.checkboxBorder#171616
  • settings.checkboxForeground#DAA190
  • settings.dropdownBackground#292826
  • settings.dropdownBorder#171616
  • settings.dropdownForeground#DAA190
  • settings.headerForeground#DAA190
  • settings.modifiedItemForeground#deab35
  • settings.modifiedItemIndicator#deab35
  • settings.numberInputBackground#292826
  • settings.numberInputBorder#171616
  • settings.numberInputForeground#DAA190
  • settings.textInputBackground#292826
  • settings.textInputBorder#171616
  • settings.textInputForeground#DAA190
  • sideBar.background#292826
  • sideBarSectionHeader.background#02090c
  • sideBarSectionHeader.border#171616
  • sideBarTitle.foreground#DAA190
  • statusBar.background#171616
  • statusBar.debuggingBackground#9F9DAA
  • statusBar.debuggingForeground#171616
  • statusBar.foreground#DAA190
  • statusBar.noFolderBackground#171616
  • statusBar.noFolderForeground#DAA190
  • statusBarItem.prominentBackground#9F9DAA
  • statusBarItem.prominentHoverBackground#deab35
  • statusBarItem.remoteBackground#377956
  • statusBarItem.remoteForeground#DAA190
  • tab.activeBackground#02090c
  • tab.activeBorderTop#5779b580
  • tab.activeForeground#DAA190
  • tab.border#171616
  • tab.inactiveBackground#292826
  • tab.inactiveForeground#003F2E
  • terminal.ansiBlack#171617
  • terminal.ansiBlue#b5bab9
  • terminal.ansiBrightBlack#838ca6
  • terminal.ansiBrightBlue#bfc274
  • terminal.ansiBrightCyan#d66da0
  • terminal.ansiBrightGreen#9888d1
  • terminal.ansiBrightMagenta#e8c15d
  • terminal.ansiBrightRed#ed9247
  • terminal.ansiBrightWhite#f5f0f0
  • terminal.ansiBrightYellow#e3baa3
  • terminal.ansiCyan#dbb2ad
  • terminal.ansiGreen#9dcfaa
  • terminal.ansiMagenta#e6c291
  • terminal.ansiRed#d68418
  • terminal.ansiWhite#e8d4be
  • terminal.ansiYellow#84b8ac
  • terminal.background#02090c
  • terminal.foreground#DAA190
  • titleBar.activeBackground#292826
  • titleBar.activeForeground#DAA190
  • titleBar.inactiveBackground#171616
  • titleBar.inactiveForeground#003F2E
  • walkThrough.embeddedEditorBackground#292826

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#377956
source#DAA190
meta.diff, meta.diff.header#003F2E
markup.inserted#FA8A40
markup.deleted#9F9DAA
markup.changed#deab35
invalid#9F9DAAunderline italic
invalid.deprecated#DAA190underline italic
entity.name.filename#BE9B5C
markup.error#9F9DAA
markup.underlineunderline
markup.bold#deab35bold
markup.heading#377956bold
markup.italic#BE9B5Citalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#AA2366
markup.inline.raw, markup.raw.restructuredtext#FA8A40
markup.underline.link, markup.underline.link.image#AA2366
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#5779b5
entity.name.directive.restructuredtext, markup.quote#BE9B5Citalic
meta.separator.markdown#003F2E
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#FA8A40
punctuation.definition.constant.restructuredtext#377956
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#377956
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#DAA190
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#BE9B5C
entity.name.type.class, entity.name.class#AA2366normal
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#377956italic
entity.other.inherited-class#AA2366italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#003F2E
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#5779b5
comment.block.documentation entity.name.type#AA2366italic
comment.block.documentation entity.name.type punctuation.definition.bracket#AA2366
comment.block.documentation variable#deab35italic
constant, variable.other.constant#377956
constant.character.escape, constant.character.string.escape, constant.regexp#5779b5
entity.name.tag#5779b5
entity.other.attribute-name.parent-selector#5779b5
entity.other.attribute-name#FA8A40italic
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#FA8A40
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#deab35italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#FA8A40italic
meta.decorator variable.other.object#FA8A40
keyword, punctuation.definition.keyword#5779b5
keyword.control.new, keyword.operator.newbold
meta.selector#5779b5
support#AA2366italic
support.function.magic, support.variable, variable.other.predefined#377956regular
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#5779b5
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#DAA190
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#5779b5
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#AA2366
constant.other.date, constant.other.timestamp#deab35
variable.other.alias.yaml#FA8A40italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#5779b5regular
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#AA2366italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#deab35
storage.modifier#5779b5
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#BE9B5C
punctuation.definition.group.capture.regexp#5779b5
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#9F9DAA
punctuation.definition.character-class.regexp#AA2366
punctuation.definition.group.regexp#deab35
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#9F9DAA
meta.assertion.look-ahead.regexp#FA8A40
string#BE9B5C
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#003F2E
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#DAA190
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#deab35italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#DAA190normal
meta.selectionset.graphql variable#BE9B5C
meta.selectionset.graphql meta.arguments variable#DAA190
entity.name.fragment.graphql, variable.fragment.graphql#AA2366
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#DAA190
source.shell variable.other#377956
support.constant#377956normal
meta.scope.prerequisites.makefile#BE9B5C
meta.attribute-selector.scss#BE9B5C
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#DAA190
meta.preprocessor.haskell#003F2E