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#593e2c10
  • activityBar.activeBorder#aa998e80
  • activityBar.background#fffffa
  • activityBar.foreground#593e2c
  • activityBar.inactiveForeground#aa998e
  • activityBarBadge.background#aa998e
  • activityBarBadge.foreground#593e2c
  • badge.background#e2dcd8
  • badge.foreground#593e2c
  • breadcrumb.activeSelectionForeground#593e2c
  • breadcrumb.background#fffffa
  • breadcrumb.focusForeground#593e2c
  • breadcrumb.foreground#aa998e
  • breadcrumbPicker.background#fffffa
  • button.background#e2dcd8
  • button.foreground#593e2c
  • button.secondaryBackground#fffffa
  • button.secondaryForeground#593e2c
  • button.secondaryHoverBackground#fffffa
  • debugToolBar.background#fffffa
  • diffEditor.insertedTextBackground#745b4b20
  • diffEditor.removedTextBackground#593e2c50
  • dropdown.background#fffffa
  • dropdown.border#fffffa
  • dropdown.foreground#593e2c
  • editor.background#fffffa
  • editor.findMatchBackground#8f796c80
  • editor.findMatchHighlightBackground#fffffa40
  • editor.findRangeHighlightBackground#e2dcd8
  • editor.foldBackground#e2dcd880
  • editor.foreground#593e2c
  • editor.hoverHighlightBackground#593e2c50
  • editor.lineHighlightBackground#e2dcd8
  • editor.rangeHighlightBackground#593e2c15
  • editor.selectionBackground#e2dcd8
  • editor.selectionHighlightBackground#e2dcd8
  • editor.snippetFinalTabstopHighlightBackground#fffffa
  • editor.snippetFinalTabstopHighlightBorder#745b4b
  • editor.snippetTabstopHighlightBackground#fffffa
  • editor.snippetTabstopHighlightBorder#aa998e
  • editor.wordHighlightBackground#593e2c50
  • editor.wordHighlightStrongBackground#745b4b50
  • editorBracketHighlight.foreground1#593e2c
  • editorBracketHighlight.foreground2#aa998e
  • editorBracketHighlight.foreground3#593e2c
  • editorBracketHighlight.foreground4#745b4b
  • editorBracketHighlight.foreground5#593e2c
  • editorBracketHighlight.foreground6#8f796c
  • editorBracketHighlight.unexpectedBracket.foreground#593e2c
  • editorCodeLens.foreground#aa998e
  • editorError.foreground#593e2c
  • editorGroup.border#593e2c
  • editorGroup.dropBackground#8b6045
  • editorGroupHeader.tabsBackground#fffffa
  • editorGutter.addedBackground#745b4b80
  • editorGutter.deletedBackground#593e2c80
  • editorGutter.modifiedBackground#593e2c80
  • editorHoverWidget.background#fffffa
  • editorHoverWidget.border#aa998e
  • editorIndentGuide.activeBackground#fffffa45
  • editorIndentGuide.background#fffffa
  • editorLineNumber.activeForeground#aa998e
  • editorLineNumber.foreground#aa998e
  • editorLink.activeForeground#593e2c
  • editorMarkerNavigation.background#fffffa
  • editorOverviewRuler.addedForeground#745b4b80
  • editorOverviewRuler.border#fffffa
  • editorOverviewRuler.currentContentForeground#745b4b
  • editorOverviewRuler.deletedForeground#593e2c80
  • editorOverviewRuler.errorForeground#593e2c80
  • editorOverviewRuler.incomingContentForeground#593e2c
  • editorOverviewRuler.infoForeground#593e2c80
  • editorOverviewRuler.modifiedForeground#593e2c80
  • editorOverviewRuler.selectionHighlightForeground#8f796c
  • editorOverviewRuler.warningForeground#8f796c80
  • editorOverviewRuler.wordHighlightForeground#593e2c
  • editorOverviewRuler.wordHighlightStrongForeground#745b4b
  • editorRuler.foreground#fffffa
  • editorSuggestWidget.background#fffffa
  • editorSuggestWidget.foreground#593e2c
  • editorSuggestWidget.selectedBackground#e2dcd8
  • editorWarning.foreground#593e2c
  • editorWhitespace.foreground#fffffa
  • editorWidget.background#fffffa
  • errorForeground#593e2c
  • extensionButton.prominentBackground#745b4b90
  • extensionButton.prominentForeground#593e2c
  • extensionButton.prominentHoverBackground#745b4b60
  • focusBorder#aa998e
  • foreground#593e2c
  • gitDecoration.conflictingResourceForeground#8f796c
  • gitDecoration.deletedResourceForeground#593e2c
  • gitDecoration.ignoredResourceForeground#aa998e
  • gitDecoration.modifiedResourceForeground#593e2c
  • gitDecoration.untrackedResourceForeground#745b4b
  • input.background#fffffa
  • input.border#fffffa
  • input.foreground#593e2c
  • input.placeholderForeground#aa998e
  • inputOption.activeBorder#593e2c
  • inputValidation.errorBorder#593e2c
  • inputValidation.infoBorder#aa998e
  • inputValidation.warningBorder#8f796c
  • list.activeSelectionBackground#e2dcd8
  • list.activeSelectionForeground#593e2c
  • list.dropBackground#e2dcd8
  • list.errorForeground#593e2c
  • list.focusBackground#e2dcd8
  • list.highlightForeground#593e2c
  • list.hoverBackground#e2dcd8
  • list.inactiveSelectionBackground#e2dcd8
  • list.warningForeground#8f796c
  • listFilterWidget.background#fffffa
  • listFilterWidget.noMatchesOutline#593e2c
  • listFilterWidget.outline#fffffa
  • merge.currentHeaderBackground#745b4b90
  • merge.incomingHeaderBackground#593e2c90
  • panel.background#fffffa
  • panel.border#593e2c
  • panelTitle.activeBorder#aa998e
  • panelTitle.activeForeground#593e2c
  • panelTitle.inactiveForeground#aa998e
  • peekView.border#e2dcd8
  • peekViewEditor.background#fffffa
  • peekViewEditor.matchHighlightBackground#c6bab380
  • peekViewResult.background#fffffa
  • peekViewResult.fileForeground#593e2c
  • peekViewResult.lineForeground#593e2c
  • peekViewResult.matchHighlightBackground#c6bab380
  • peekViewResult.selectionBackground#e2dcd8
  • peekViewResult.selectionForeground#593e2c
  • peekViewTitle.background#fffffa
  • peekViewTitleDescription.foreground#aa998e
  • peekViewTitleLabel.foreground#593e2c
  • pickerGroup.border#593e2c
  • pickerGroup.foreground#593e2c
  • progressBar.background#aa998e
  • selection.background#593e2c
  • settings.checkboxBackground#fffffa
  • settings.checkboxBorder#fffffa
  • settings.checkboxForeground#593e2c
  • settings.dropdownBackground#fffffa
  • settings.dropdownBorder#fffffa
  • settings.dropdownForeground#593e2c
  • settings.headerForeground#593e2c
  • settings.modifiedItemIndicator#8f796c
  • settings.numberInputBackground#fffffa
  • settings.numberInputBorder#fffffa
  • settings.numberInputForeground#593e2c
  • settings.textInputBackground#fffffa
  • settings.textInputBorder#fffffa
  • settings.textInputForeground#593e2c
  • sideBar.background#fffffa
  • sideBarSectionHeader.background#fffffa
  • sideBarSectionHeader.border#fffffa
  • sideBarTitle.foreground#593e2c
  • statusBar.background#fffffa
  • statusBar.debuggingBackground#593e2c
  • statusBar.debuggingForeground#fffffa
  • statusBar.foreground#593e2c
  • statusBar.noFolderBackground#fffffa
  • statusBar.noFolderForeground#593e2c
  • statusBarItem.prominentBackground#593e2c
  • statusBarItem.prominentHoverBackground#8f796c
  • statusBarItem.remoteBackground#fffffa
  • statusBarItem.remoteForeground#593e2c
  • tab.activeBackground#fffffa
  • tab.activeBorderTop#aa998e80
  • tab.activeForeground#593e2c
  • tab.border#fffffa
  • tab.inactiveBackground#fffffa
  • tab.inactiveForeground#aa998e
  • terminal.ansiBlack#593e2c
  • terminal.ansiBlue#593e2c
  • terminal.ansiBrightBlack#593e2c
  • terminal.ansiBrightBlue#593e2c
  • terminal.ansiBrightCyan#593e2c
  • terminal.ansiBrightGreen#593e2c
  • terminal.ansiBrightMagenta#593e2c
  • terminal.ansiBrightRed#593e2c
  • terminal.ansiBrightWhite#593e2c
  • terminal.ansiBrightYellow#593e2c
  • terminal.ansiCyan#593e2c
  • terminal.ansiGreen#593e2c
  • terminal.ansiMagenta#593e2c
  • terminal.ansiRed#593e2c
  • terminal.ansiWhite#593e2c
  • terminal.ansiYellow#593e2c
  • terminal.background#fffffa
  • terminal.foreground#593e2c
  • textBlockQuote.background#e2dcd8
  • textBlockQuote.textBlockQuote#aa998e
  • textCodeBlock.background#e2dcd8
  • textLink.activeForeground#593e2c
  • textLink.foreground#593e2c
  • titleBar.activeBackground#fffffa
  • titleBar.activeForeground#593e2c
  • titleBar.inactiveBackground#fffffa
  • titleBar.inactiveForeground#aa998e
  • walkThrough.embeddedEditorBackground#fffffa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#593e2c—
meta.diff, meta.diff.header#aa998e—
markup.inserted#745b4b—
markup.deleted#593e2c—
markup.changed#8f796c—
invalid#593e2cunderline italic
invalid.deprecated#593e2cunderline italic
entity.name.filename#c6bab3—
markup.error#593e2c—
markup.underline—underline
markup.bold#8f796cbold
markup.heading#593e2cbold
markup.italic#c6bab3italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#593e2c—
markup.inline.raw, markup.raw.restructuredtext#745b4b—
markup.underline.link, markup.underline.link.image#593e2c—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#aa998e—
entity.name.directive.restructuredtext, markup.quote#c6bab3italic
meta.separator.markdown#aa998e—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#745b4b—
punctuation.definition.constant.restructuredtext#593e2c—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#593e2c—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#593e2c—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#c6bab3—
entity.name.type.class, entity.name.class#593e2cnormal
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#593e2citalic
entity.other.inherited-class#593e2citalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#aa998eitalic
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#aa998e—
comment.block.documentation entity.name.type#593e2citalic
comment.block.documentation entity.name.type punctuation.definition.bracket#593e2c—
comment.block.documentation variable#8f796citalic
constant, variable.other.constant#593e2c—
constant.character.escape, constant.character.string.escape, constant.regexp#aa998e—
entity.name.tag#aa998e—
entity.other.attribute-name.parent-selector#aa998e—
entity.other.attribute-name#745b4bitalic
entity.name.function, 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#745b4b—
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#8f796citalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#745b4bitalic
meta.decorator variable.other.object#745b4b—
keyword, punctuation.definition.keyword#aa998e—
keyword.control.new, keyword.operator.new—bold
meta.selector#aa998e—
support#593e2citalic
support.function.magic, support.variable, variable.other.predefined#593e2cregular
support.function, support.type.property-name—regular
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#aa998e—
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, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#593e2c—
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#aa998e—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#593e2c—
constant.other.date, constant.other.timestamp#8f796c—
variable.other.alias.yaml#745b4bitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#aa998eregular
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#593e2citalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#8f796c—
storage.modifier#aa998e—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#c6bab3—
punctuation.definition.group.capture.regexp#aa998e—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#593e2c—
punctuation.definition.character-class.regexp#593e2c—
punctuation.definition.group.regexp#8f796c—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#593e2c—
meta.assertion.look-ahead.regexp#745b4b—
string#c6bab3—
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#473223italic
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#aa998eitalic
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#593e2c—
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#8f796citalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#593e2cnormal
meta.selectionset.graphql variable#c6bab3—
meta.selectionset.graphql meta.arguments variable#593e2c—
entity.name.fragment.graphql, variable.fragment.graphql#593e2c—
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#593e2c—
source.shell variable.other#593e2c—
support.constant#593e2cnormal
meta.scope.prerequisites.makefile#c6bab3—
meta.attribute-selector.scss#c6bab3—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#593e2c—
meta.preprocessor.haskell#aa998e—
log.error#593e2cbold
log.warning#c6bab3bold