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.background#ede8e0
  • activityBar.border#d4c8c0
  • activityBar.foreground#3a2f27
  • activityBar.inactiveForeground#6a6a6a
  • activityBarBadge.background#3a2f27
  • activityBarBadge.foreground#f8f7f3
  • badge.background#2d8080
  • badge.foreground#f8f7f3
  • breadcrumb.activeSelectionForeground#0d6565
  • breadcrumb.background#f8f7f3
  • breadcrumb.focusForeground#3a2f27
  • breadcrumb.foreground#8a8078
  • breadcrumbPicker.background#f8f7f3
  • button.background#2d8080
  • button.foreground#f8f7f3
  • button.hoverBackground#3d9090
  • debugExceptionWidget.background#f8f7f3
  • debugExceptionWidget.border#a63355
  • debugToolBar.background#ede8e0
  • diffEditor.insertedTextBackground#1f594220
  • diffEditor.removedTextBackground#a6335520
  • dropdown.background#e8e0d8
  • dropdown.border#d4c8c0
  • dropdown.foreground#3a2f27
  • editor.background#f8f7f3
  • editor.findMatchBackground#f0dcc080
  • editor.findMatchHighlightBackground#f0dcc040
  • editor.findRangeHighlightBackground#d4e8e080
  • editor.foreground#3a2f27
  • editor.hoverHighlightBackground#d4e8e080
  • editor.inactiveSelectionBackground#e0f0f0
  • editor.lineHighlightBackground#f0ede8
  • editor.lineHighlightBorder#f0ede800
  • editor.rangeHighlightBackground#d4e8e040
  • editor.selectionBackground#d4e8e0
  • editor.selectionHighlightBackground#e0f0f0
  • editor.wordHighlightBackground#d4e8e080
  • editor.wordHighlightStrongBackground#c8e0d8
  • editorBracketHighlight.foreground1#b0b0b0
  • editorBracketHighlight.foreground2#a0a0a0
  • editorBracketHighlight.foreground3#909090
  • editorBracketHighlight.foreground4#d0a0a0
  • editorBracketHighlight.foreground5#c08080
  • editorBracketHighlight.foreground6#803030
  • editorBracketMatch.background#d4c8c0
  • editorBracketMatch.border#3a2f27
  • editorBracketPairGuide.background1#b0b0b040
  • editorBracketPairGuide.background2#a0a0a040
  • editorBracketPairGuide.background3#90909040
  • editorBracketPairGuide.background4#d0a0a040
  • editorBracketPairGuide.background5#c0808040
  • editorBracketPairGuide.background6#80303040
  • editorCodeLens.foreground#6a6a6a
  • editorCursor.foreground#3a2f27
  • editorError.foreground#a63355
  • editorGhostText.border#8a807840
  • editorGhostText.foreground#8a807899
  • editorGutter.addedBackground#1f5942
  • editorGutter.background#f8f7f3
  • editorGutter.deletedBackground#a63355
  • editorGutter.modifiedBackground#9d8800
  • editorHint.foreground#6a6a6a
  • editorIndentGuide.activeBackground#b8a898
  • editorIndentGuide.background#d4c8c0
  • editorInfo.foreground#1a5858
  • editorLightBulb.foreground#a55530
  • editorLightBulbAutoFix.foreground#2d8080
  • editorLineNumber.activeForeground#3a2f27
  • editorLineNumber.foreground#6a6a6a
  • editorLink.activeForeground#3a2f27
  • editorOverviewRuler.border#e0f0f0
  • editorOverviewRuler.bracketMatchForeground#2d8080
  • editorOverviewRuler.currentContentForeground#6d6500
  • editorOverviewRuler.errorForeground#a63355
  • editorOverviewRuler.findMatchForeground#a55530
  • editorOverviewRuler.incomingContentForeground#1f5942
  • editorOverviewRuler.infoForeground#0d6565
  • editorOverviewRuler.selectionHighlightForeground#d4e8e0
  • editorOverviewRuler.warningForeground#a55530
  • editorOverviewRuler.wordHighlightForeground#0d6565
  • editorOverviewRuler.wordHighlightStrongForeground#2d8080
  • editorRuler.foreground#d4c8c0
  • editorStickyScroll.background#ede8e0
  • editorStickyScrollHover.background#e8e0d8
  • editorSuggestWidget.background#f8f7f3
  • editorSuggestWidget.border#d4c8c0
  • editorSuggestWidget.foreground#3a2f27
  • editorSuggestWidget.highlightForeground#0d6565
  • editorSuggestWidget.selectedBackground#d4e8e0
  • editorUnicodeHighlight.background#a5553020
  • editorUnicodeHighlight.border#a55530
  • editorWarning.foreground#8d4620
  • editorWhitespace.foreground#b8b0a880
  • extensionBadge.remoteBackground#2d8080
  • extensionBadge.remoteForeground#f8f7f3
  • extensionButton.prominentBackground#2d8080
  • extensionButton.prominentForeground#f8f7f3
  • extensionButton.prominentHoverBackground#3d9090
  • focusBorder#007070
  • gitDecoration.conflictingResourceForeground#a55530
  • gitDecoration.deletedResourceForeground#a63355
  • gitDecoration.ignoredResourceForeground#b8a898
  • gitDecoration.modifiedResourceForeground#9d8800
  • gitDecoration.untrackedResourceForeground#1f5942
  • input.background#e8e0d8
  • input.border#d4c8c0
  • input.foreground#3a2f27
  • input.placeholderForeground#8a8078
  • inputOption.activeBackground#2d808040
  • inputOption.activeBorder#2d8080
  • inputValidation.errorBackground#a63355
  • inputValidation.errorBorder#a63355
  • inputValidation.errorForeground#f8f7f3
  • inputValidation.infoBackground#0d6565
  • inputValidation.infoBorder#0d6565
  • inputValidation.warningBackground#a55530
  • inputValidation.warningBorder#a55530
  • list.activeSelectionBackground#d4e8e0
  • list.activeSelectionForeground#3a2f27
  • list.focusBackground#d4e8e0
  • list.focusForeground#3a2f27
  • list.highlightForeground#0d6565
  • list.hoverBackground#e8e0d8
  • list.hoverForeground#3a2f27
  • list.inactiveSelectionBackground#e0f0f0
  • list.inactiveSelectionForeground#3a2f27
  • menu.background#f8f7f3
  • menu.foreground#3a2f27
  • menu.selectionBackground#d4e8e0
  • menu.selectionForeground#3a2f27
  • menu.separatorBackground#d4c8c0
  • menubar.selectionBackground#e0f0f0
  • menubar.selectionForeground#3a2f27
  • merge.border#d4c8c0
  • merge.currentContentBackground#6d650020
  • merge.currentHeaderBackground#6d650040
  • merge.incomingContentBackground#1f594220
  • merge.incomingHeaderBackground#1f594240
  • minimap.background#f8f7f3
  • minimap.errorHighlight#a63355
  • minimap.findMatchHighlight#f0dcc080
  • minimap.selectionHighlight#d4e8e0
  • minimap.warningHighlight#a55530
  • minimapGutter.addedBackground#1f5942
  • minimapGutter.deletedBackground#a63355
  • minimapGutter.modifiedBackground#9d8800
  • minimapSlider.activeBackground#b8a898c0
  • minimapSlider.background#b8a89880
  • minimapSlider.hoverBackground#b8a898a0
  • notificationCenter.border#d4c8c0
  • notificationCenterHeader.background#f8f7f3
  • notificationCenterHeader.foreground#3a2f27
  • notificationLink.foreground#0d6565
  • notifications.background#f8f7f3
  • notifications.border#d4c8c0
  • notifications.foreground#3a2f27
  • panel.background#ede8e0
  • panel.border#d4c8c0
  • panelTitle.activeBorder#2d8080
  • panelTitle.activeForeground#3a2f27
  • panelTitle.inactiveForeground#8a8078
  • peekView.border#2d8080
  • peekViewEditor.background#ede8e0
  • peekViewEditor.matchHighlightBackground#f0dcc080
  • peekViewEditorGutter.background#ede8e0
  • peekViewResult.background#ede8e0
  • peekViewResult.fileForeground#3a2f27
  • peekViewResult.lineForeground#8a8078
  • peekViewResult.matchHighlightBackground#f0dcc080
  • peekViewResult.selectionBackground#d4e8e0
  • peekViewResult.selectionForeground#3a2f27
  • peekViewTitle.background#f8f7f3
  • peekViewTitleDescription.foreground#8a8078
  • peekViewTitleLabel.foreground#3a2f27
  • pickerGroup.border#0d656540
  • pickerGroup.foreground#0d6565
  • progressBar.background#2d8080
  • quickInput.background#f8f7f3
  • quickInput.foreground#3a2f27
  • quickInputList.focusBackground#d4e8e0
  • quickInputList.focusForeground#3a2f27
  • scrollbar.shadow#f8f7f300
  • scrollbarSlider.activeBackground#b8a898c0
  • scrollbarSlider.background#b8a89880
  • scrollbarSlider.hoverBackground#b8a898a0
  • selection.background#d4e8e080
  • settings.checkboxBackground#e8e0d8
  • settings.checkboxBorder#d4c8c0
  • settings.checkboxForeground#3a2f27
  • settings.dropdownBackground#e8e0d8
  • settings.dropdownBorder#d4c8c0
  • settings.dropdownForeground#3a2f27
  • settings.headerForeground#3a2f27
  • settings.modifiedItemIndicator#9d8800
  • settings.numberInputBackground#e8e0d8
  • settings.numberInputBorder#d4c8c0
  • settings.numberInputForeground#3a2f27
  • settings.textInputBackground#e8e0d8
  • settings.textInputBorder#d4c8c0
  • settings.textInputForeground#3a2f27
  • sideBar.background#ede8e0
  • sideBar.border#d4c8c0
  • sideBar.foreground#3a2f27
  • sideBarSectionHeader.background#f8f7f3
  • sideBarSectionHeader.border#d4c8c0
  • sideBarSectionHeader.foreground#3a2f27
  • sideBarTitle.foreground#3a2f27
  • statusBar.background#ede8e0
  • statusBar.border#d4c8c0
  • statusBar.debuggingBackground#a63355
  • statusBar.debuggingForeground#f8f7f3
  • statusBar.foreground#3a2f27
  • statusBar.noFolderBackground#ede8e0
  • statusBarItem.activeBackground#d4e8e0
  • statusBarItem.errorBackground#a63355
  • statusBarItem.errorForeground#f8f7f3
  • statusBarItem.hoverBackground#e0f0f0
  • statusBarItem.prominentBackground#2d8080
  • statusBarItem.prominentForeground#f8f7f3
  • statusBarItem.remoteBackground#2d8080
  • statusBarItem.remoteForeground#f8f7f3
  • statusBarItem.warningBackground#a55530
  • statusBarItem.warningForeground#f8f7f3
  • tab.activeBackground#f8f7f3
  • tab.activeBorder#2d8080
  • tab.activeBorderTop#2d8080
  • tab.activeForeground#3a2f27
  • tab.border#d4c8c0
  • tab.hoverBackground#e8e0d8
  • tab.hoverForeground#3a2f27
  • tab.inactiveBackground#ede8e0
  • tab.inactiveForeground#8a8078
  • tab.lastPinnedBorder#d4c8c0
  • tab.unfocusedActiveBorder#b8a898
  • tab.unfocusedActiveBorderTop#b8a898
  • terminal.ansiBlack#5a5047
  • terminal.ansiBlue#234060
  • terminal.ansiBrightBlack#8a7f77
  • terminal.ansiBrightBlue#4a7a9d
  • terminal.ansiBrightCyan#2d9090
  • terminal.ansiBrightGreen#3d9080
  • terminal.ansiBrightMagenta#d57093
  • terminal.ansiBrightRed#c74a70
  • terminal.ansiBrightWhite#d8d0c8
  • terminal.ansiBrightYellow#d8a000
  • terminal.ansiCyan#0d6565
  • terminal.ansiGreen#1f5942
  • terminal.ansiMagenta#c75080
  • terminal.ansiRed#a63355
  • terminal.ansiWhite#c8bfb8
  • terminal.ansiYellow#b88800
  • terminal.background#f8f7f3
  • terminal.foreground#3a2f27
  • terminalCursor.background#f8f7f3
  • terminalCursor.foreground#0d6565
  • titleBar.activeBackground#ede8e0
  • titleBar.activeForeground#3a2f27
  • titleBar.border#d4c8c0
  • titleBar.inactiveBackground#ede8e0
  • titleBar.inactiveForeground#8a8078
  • tree.indentGuidesStroke#b8a898
  • walkthrough.stepDescription.foreground#8a8078
  • walkthrough.stepNext.background#2d808020
  • walkthrough.stepNext.foreground#0d6565
  • walkthrough.stepTitle.foreground#3a2f27
  • widget.shadow#00000020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.type.function, storage.type.class, storage.type.enum, storage.type.interface, storage.type.property, keyword.operator.new, keyword.operator.expression, keyword.operator.new, keyword.operator.delete, storage.type.extends#a63355
keyword.other.debugger#a63355
storage, modifier, keyword.var, entity.name.tag, keyword.control.case, keyword.control.switch#8d4620
keyword.operator#8d4620
string, punctuation.definition.string.end, punctuation.definition.string.begin, punctuation.definition.string.template.begin, punctuation.definition.string.template.end#1f5942
entity.other.attribute-name#1f5942
constant.character.escape, punctuation.quasi.element, punctuation.definition.template-expression, punctuation.section.embedded, storage.type.format, constant.other.placeholder, constant.other.placeholder, variable.interpolation#1f5942
entity.name.function, support.function, meta.function, meta.function-call, meta.definition.method#6d6500
keyword.control.at-rule, keyword.control.import, keyword.control.export, storage.type.namespace, punctuation.decorator, keyword.control.directive, keyword.preprocessor, punctuation.definition.preprocessor, punctuation.definition.directive, keyword.other.import, keyword.other.package, entity.name.type.namespace, entity.name.scope-resolution, keyword.other.using, keyword.package, keyword.import, keyword.map#1f5942
storage.type.annotation#1f5942
entity.name.label, constant.other.label#1f5942
support.module, support.node, support.other.module, support.type.object.module, entity.name.type.module, entity.name.type.class.module, keyword.control.module#1f5942
storage.type, support.type, entity.name.type, keyword.type#2d5080
entity.name.type.class, support.class, entity.name.class, entity.other.inherited-class, storage.class#2d5080
constant.numeric#1a5858
constant.language.boolean#1a5858
entity.name.function.preprocessor#1a5858
variable.language.this, variable.language.self, variable.language.super, keyword.other.this, variable.language.special, constant.language.null, constant.language.undefined, constant.language.nan#1a5858
constant.language, support.constant#1a5858
variable, support.variable, meta.definition.variable#3a2f27
variable.object.property, support.variable.property, variable.other.property, variable.other.object.property, variable.other.enummember, variable.other.member, meta.object-literal.key#3a2f27
punctuation, meta.brace, meta.delimiter, meta.bracket#8a8078
comment, punctuation.definition.comment#696f75italic
heading.1.markdown, markup.heading.setext.1.markdown#a63355bold
heading.2.markdown, markup.heading.setext.2.markdown#8d4620bold
heading.3.markdown#1f5942bold
heading.4.markdown#6d6500bold
heading.5.markdown#2d5080bold
heading.6.markdown#c75080bold
punctuation.definition.heading.markdown#8a8078regular
string.other.link.title.markdown, constant.other.reference.link.markdown, string.other.link.description.markdown#c75080regular
markup.underline.link.image.markdown, markup.underline.link.markdown#6d6500underline
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.italic.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.metadata.markdown, punctuation.separator.key-value.markdown, punctuation.definition.constant.markdown#8a8078
punctuation.definition.bold.markdown#8a8078regular
meta.separator.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown#8a8078bold
markup.italicitalic
markup.boldbold
markup.bold markup.italic, markup.italic markup.bolditalic bold
punctuation.definition.markdown, punctuation.definition.raw.markdown#1f5942
fenced_code.block.language#1f5942
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#6d6500
punctuation.definition.list.begin.markdown#a63355
punctuation.definition.heading.restructuredtext#8d4620bold
punctuation.definition.field.restructuredtext, punctuation.separator.key-value.restructuredtext, punctuation.definition.directive.restructuredtext, punctuation.definition.constant.restructuredtext, punctuation.definition.italic.restructuredtext, punctuation.definition.table.restructuredtext#8a8078
punctuation.definition.bold.restructuredtext#8a8078regular
entity.name.tag.restructuredtext, punctuation.definition.link.restructuredtext, punctuation.definition.raw.restructuredtext, punctuation.section.raw.restructuredtext#1f5942
constant.other.footnote.link.restructuredtext#c75080
support.directive.restructuredtext#a63355
entity.name.directive.restructuredtext, markup.raw.restructuredtext, markup.raw.inner.restructuredtext, string.other.link.title.restructuredtext#6d6500
punctuation.definition.function.latex, punctuation.definition.function.tex, punctuation.definition.keyword.latex, constant.character.newline.tex, punctuation.definition.keyword.tex#8a8078
support.function.be.latex#a63355
support.function.section.latex, keyword.control.table.cell.latex, keyword.control.table.newline.latex#8d4620
support.class.latex, variable.parameter.latex, variable.parameter.function.latex, variable.parameter.definition.label.latex, constant.other.reference.label.latex#1f5942
keyword.control.preamble.latex#c75080
punctuation.separator.namespace.xml#8a8078
entity.name.tag.html, entity.name.tag.xml, entity.name.tag.localname.xml#8d4620
entity.other.attribute-name.html, entity.other.attribute-name.xml, entity.other.attribute-name.localname.xml#1f5942
string.quoted.double.html, string.quoted.single.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.separator.key-value.html, punctuation.definition.string.begin.xml, punctuation.definition.string.end.xml, string.quoted.double.xml, string.quoted.single.xml, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.xml, meta.tag.xml, meta.tag.preprocessor.xml, meta.tag.other.html, meta.tag.block.any.html, meta.tag.inline.any.html#6d6500
variable.language.documentroot.xml, meta.tag.sgml.doctype.xml#c75080
storage.type.proto#1f5942
string.quoted.double.proto.syntax, string.quoted.single.proto.syntax, string.quoted.double.proto, string.quoted.single.proto#6d6500
entity.name.class.proto, entity.name.class.message.proto#1f5942
punctuation.definition.entity.css, punctuation.separator.key-value.css, punctuation.terminator.rule.css, punctuation.separator.list.comma.css#8a8078
entity.other.attribute-name.class.css#a63355
keyword.other.unit#8d4620
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#1f5942
string.quoted.single.css, string.quoted.double.css, support.constant.property-value.css, meta.property-value.css, punctuation.definition.string.begin.css, punctuation.definition.string.end.css, constant.numeric.css, support.constant.font-name.css, variable.parameter.keyframe-list.css#6d6500
support.type.property-name.css#1f5942
support.type.vendored.property-name.css#2d5080
entity.name.tag.css, entity.other.keyframe-offset.css, punctuation.definition.keyword.css, keyword.control.at-rule.keyframes.css, meta.selector.css#c75080
punctuation.accessor.js, punctuation.separator.key-value.js, punctuation.separator.label.js, keyword.operator.accessor.js#8a8078
punctuation.definition.block.tag.jsdoc#a63355
storage.type.js, storage.type.function.arrow.js#8d4620
JSXNested#3a2f27
punctuation.definition.tag.jsx, entity.other.attribute-name.jsx, punctuation.definition.tag.begin.js.jsx, punctuation.definition.tag.end.js.jsx, entity.other.attribute-name.js.jsx#6d6500
entity.name.type.module.ts#3a2f27
keyword.operator.type.annotation.ts, punctuation.accessor.ts, punctuation.separator.key-value.ts#8a8078
punctuation.definition.tag.directive.ts, entity.other.attribute-name.directive.ts#6d6500
entity.name.type.ts, entity.name.type.interface.ts, entity.other.inherited-class.ts, entity.name.type.alias.ts, entity.name.type.class.ts, entity.name.type.enum.ts#1f5942
storage.type.ts, storage.type.function.arrow.ts, storage.type.type.ts#8d4620
entity.name.type.module.ts#2d5080
keyword.control.import.ts, keyword.control.export.ts, storage.type.namespace.ts#c75080
entity.name.type.module.tsx#3a2f27
keyword.operator.type.annotation.tsx, punctuation.accessor.tsx, punctuation.separator.key-value.tsx#8a8078
punctuation.definition.tag.directive.tsx, entity.other.attribute-name.directive.tsx, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx, entity.other.attribute-name.tsx#6d6500
entity.name.type.tsx, entity.name.type.interface.tsx, entity.other.inherited-class.tsx, entity.name.type.alias.tsx, entity.name.type.class.tsx, entity.name.type.enum.tsx#1f5942
entity.name.type.module.tsx#2d5080
keyword.control.import.tsx, keyword.control.export.tsx, storage.type.namespace.tsx#c75080
storage.type.tsx, storage.type.function.arrow.tsx, storage.type.type.tsx, support.class.component.tsx#8d4620
meta.function-call.arguments.python#3a2f27
punctuation.definition.decorator.python, punctuation.separator.period.python#8a8078
constant.language.python#1f5942
keyword.control.import.python, keyword.control.import.from.python#c75080
entity.name.type.mod.rust#3a2f27
keyword.operator.path.rust, keyword.operator.member-access.rust#8a8078
storage.type.rust#8d4620
support.constant.core.rust#1f5942
meta.attribute.rust, variable.language.rust, storage.type.module.rust#c75080
meta.scope.if-block.shell, meta.scope.group.shell#3a2f27
support.function.builtin.shell, entity.name.function.shell#1f5942
string.quoted.double.shell, string.quoted.single.shell, punctuation.definition.string.begin.shell, punctuation.definition.string.end.shell, string.unquoted.heredoc.shell#6d6500
keyword.control.heredoc-token.shell, variable.other.normal.shell, punctuation.definition.variable.shell, variable.other.special.shell, variable.other.positional.shell, variable.other.bracket.shell#c75080
punctuation.definition.separator.diff#8a8078
markup.deleted.diff, punctuation.definition.deleted.diff#a63355
meta.diff.range.context, punctuation.definition.range.diff#8d4620
meta.diff.header.from-file#1f5942
markup.inserted.diff, punctuation.definition.inserted.diff#6d6500
markup.changed.diff, punctuation.definition.changed.diff#2d5080
punctuation.definition.from-file.diff#c75080
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, punctuation.separator.dictionary.key-value.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, punctuation.separator.dictionary.pair.json, punctuation.separator.array.json#8a8078
support.type.property-name.json#8d4620
string.quoted.double.json#6d6500
punctuation.separator.key-value.mapping.yaml#8a8078
string.unquoted.plain.out.yaml, string.quoted.single.yaml, string.quoted.double.yaml, punctuation.definition.string.begin.yaml, punctuation.definition.string.end.yaml, string.unquoted.plain.in.yaml, string.unquoted.block.yaml#6d6500
punctuation.definition.anchor.yaml, punctuation.definition.block.sequence.item.yaml#1f5942
keyword.key.toml#8d4620
string.quoted.single.basic.line.toml, string.quoted.single.literal.line.toml, punctuation.definition.keyValuePair.toml#6d6500
constant.other.boolean.toml#2d5080
entity.other.attribute-name.table.toml, punctuation.definition.table.toml, entity.other.attribute-name.table.array.toml, punctuation.definition.table.array.toml#c75080
Evergarden Winter by concatenateline - VS Code Theme