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
emphasisitalic
strongbold
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.underlineunderline
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.newbold
meta.selector#aa998e
support#593e2citalic
support.function.magic, support.variable, variable.other.predefined#593e2cregular
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#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

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...