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#1a1612
  • activityBar.activeBorder#d4956a
  • activityBar.activeFocusBorder#d4956a
  • activityBar.background#110d09
  • activityBar.border#0c0906
  • activityBar.foreground#c4a0e8
  • activityBar.inactiveForeground#3d362e
  • activityBarBadge.background#d4956a
  • activityBarBadge.foreground#ffffff
  • badge.background#d4956a
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#d4cfc8
  • breadcrumb.focusForeground#c4a0e8
  • breadcrumb.foreground#4a4238
  • breadcrumbPicker.background#110d09
  • button.background#d4956a
  • button.foreground#ffffff
  • button.hoverBackground#daa57a
  • button.secondaryBackground#33291e
  • button.secondaryForeground#b8b0a4
  • button.secondaryHoverBackground#3d3028
  • debugToolBar.background#110d09
  • debugToolBar.border#282218
  • diffEditor.insertedLineBackground#7ab89e10
  • diffEditor.insertedTextBackground#7ab89e18
  • diffEditor.removedLineBackground#d4856a10
  • diffEditor.removedTextBackground#d4856a18
  • dropdown.background#110d09
  • dropdown.border#282218
  • dropdown.foreground#b8b0a4
  • editor.background#1a1612
  • editor.findMatchBackground#d4956a44
  • editor.findMatchHighlightBackground#d4956a22
  • editor.focusedStackFrameHighlightBackground#7ab89e22
  • editor.foreground#d4cfc8
  • editor.hoverHighlightBackground#33291e
  • editor.lineHighlightBackground#211d18
  • editor.selectionBackground#3d3028
  • editor.selectionHighlightBackground#3d302866
  • editor.stackFrameHighlightBackground#d4956a22
  • editor.wordHighlightBackground#33291e66
  • editor.wordHighlightStrongBackground#3d302888
  • editorBracketMatch.background#3d302855
  • editorBracketMatch.border#c4a0e8
  • editorCursor.foreground#d4956a
  • editorError.foreground#d4856a
  • editorGroup.border#0c0906
  • editorGroup.dropBackground#33291e44
  • editorGroupHeader.tabsBackground#110d09
  • editorGroupHeader.tabsBorder#0c0906
  • editorGutter.background#1a1612
  • editorHint.foreground#7ab89e
  • editorHoverWidget.background#161210
  • editorHoverWidget.border#282218
  • editorHoverWidget.foreground#b8b0a4
  • editorIndentGuide.activeBackground1#3d3028
  • editorIndentGuide.background1#282218
  • editorInfo.foreground#c4a0e8
  • editorLineNumber.activeForeground#7a7068
  • editorLineNumber.foreground#3d362e
  • editorOverviewRuler.border#120e0a
  • editorOverviewRuler.errorForeground#d4856a
  • editorOverviewRuler.selectionHighlightForeground#3d3028
  • editorOverviewRuler.warningForeground#d4956a
  • editorRuler.foreground#282218
  • editorSuggestWidget.background#161210
  • editorSuggestWidget.border#282218
  • editorSuggestWidget.focusHighlightForeground#d4956a
  • editorSuggestWidget.foreground#b8b0a4
  • editorSuggestWidget.highlightForeground#d4956a
  • editorSuggestWidget.selectedBackground#33291e
  • editorSuggestWidget.selectedForeground#d4cfc8
  • editorWarning.foreground#d4956a
  • editorWidget.background#161210
  • editorWidget.border#282218
  • editorWidget.foreground#b8b0a4
  • editorWidget.resizeBorder#c4a0e8
  • focusBorder#c4a0e888
  • gitDecoration.addedResourceForeground#7ab89e
  • gitDecoration.conflictingResourceForeground#d4856a
  • gitDecoration.deletedResourceForeground#d4856a
  • gitDecoration.ignoredResourceForeground#3d362e
  • gitDecoration.modifiedResourceForeground#d4956a
  • gitDecoration.renamedResourceForeground#c4a0e8
  • gitDecoration.untrackedResourceForeground#7ab89e
  • input.background#110d09
  • input.border#282218
  • input.foreground#d4cfc8
  • input.placeholderForeground#4a4238
  • inputOption.activeBackground#33291e
  • inputOption.activeBorder#c4a0e8
  • inputOption.activeForeground#d4cfc8
  • inputValidation.errorBackground#3d1818
  • inputValidation.errorBorder#d4856a
  • inputValidation.warningBackground#3d2e10
  • inputValidation.warningBorder#d4956a
  • list.activeSelectionBackground#33291e
  • list.activeSelectionForeground#d4cfc8
  • list.activeSelectionIconForeground#c4a0e8
  • list.dropBackground#33291e
  • list.focusBackground#33291e
  • list.focusOutline#c4a0e855
  • list.highlightForeground#d4956a
  • list.hoverBackground#1e1a15
  • list.inactiveSelectionBackground#1e1a15
  • list.inactiveSelectionForeground#b8b0a4
  • menu.background#110d09
  • menu.border#282218
  • menu.foreground#b8b0a4
  • menu.selectionBackground#33291e
  • menu.selectionForeground#d4cfc8
  • menu.separatorBackground#282218
  • menubar.selectionBackground#33291e
  • menubar.selectionForeground#d4cfc8
  • minimap.background#120e0a
  • minimap.findMatchHighlight#d4956a88
  • minimap.selectionHighlight#3d3028aa
  • minimapGutter.addedBackground#7ab89e
  • minimapGutter.deletedBackground#d4856a
  • minimapGutter.modifiedBackground#d4956a
  • notifications.background#161210
  • notifications.border#282218
  • notifications.foreground#b8b0a4
  • notificationsErrorIcon.foreground#d4856a
  • notificationsInfoIcon.foreground#c4a0e8
  • notificationsWarningIcon.foreground#d4956a
  • notificationToast.border#33291e
  • panel.background#161210
  • panel.border#0c0906
  • panelSection.border#0c0906
  • panelTitle.activeBorder#d4956a
  • panelTitle.activeForeground#d4cfc8
  • panelTitle.inactiveForeground#4a4238
  • peekView.border#c4a0e8
  • peekViewEditor.background#161210
  • peekViewEditor.matchHighlightBackground#d4956a22
  • peekViewResult.background#110d09
  • peekViewResult.matchHighlightBackground#d4956a22
  • peekViewResult.selectionBackground#33291e
  • peekViewTitle.background#110d09
  • peekViewTitleDescription.foreground#7a7068
  • peekViewTitleLabel.foreground#d4cfc8
  • progressBar.background#d4956a
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#5a5248
  • scrollbarSlider.background#3d362e88
  • scrollbarSlider.hoverBackground#4a4238bb
  • selection.background#3d3028
  • settings.checkboxBackground#110d09
  • settings.checkboxBorder#282218
  • settings.dropdownBackground#110d09
  • settings.dropdownBorder#282218
  • settings.headerForeground#c4a0e8
  • settings.modifiedItemIndicator#d4956a
  • settings.numberInputBackground#110d09
  • settings.numberInputBorder#282218
  • settings.textInputBackground#110d09
  • settings.textInputBorder#282218
  • sideBar.background#161210
  • sideBar.border#0c0906
  • sideBar.foreground#b8b0a4
  • sideBarSectionHeader.background#110d09
  • sideBarSectionHeader.border#0c0906
  • sideBarSectionHeader.foreground#c4a0e8
  • sideBarTitle.foreground#7a7068
  • statusBar.background#4a2e18
  • statusBar.border#3a2010
  • statusBar.debuggingBackground#5c2020
  • statusBar.debuggingForeground#f0d0d0
  • statusBar.foreground#e0d0c0
  • statusBar.noFolderBackground#2a1e12
  • statusBarItem.activeBackground#6a4a2e
  • statusBarItem.errorBackground#6a2020
  • statusBarItem.errorForeground#f0d0d0
  • statusBarItem.hoverBackground#5a3a22
  • statusBarItem.remoteBackground#d4956a
  • statusBarItem.remoteForeground#ffffff
  • statusBarItem.warningBackground#5a4018
  • statusBarItem.warningForeground#f0e0c0
  • tab.activeBackground#1a1612
  • tab.activeBorder#1a1612
  • tab.activeBorderTop#d4956a
  • tab.activeForeground#d4cfc8
  • tab.border#0c0906
  • tab.hoverBackground#1a1612
  • tab.hoverForeground#c4a0e8
  • tab.inactiveBackground#110d09
  • tab.inactiveForeground#4a4238
  • tab.lastPinnedBorder#3d362e
  • tab.unfocusedActiveBorderTop#6a4a30
  • terminal.ansiBlack#1a1612
  • terminal.ansiBlue#c4a0e8
  • terminal.ansiBrightBlack#5a5248
  • terminal.ansiBrightBlue#d4b8f0
  • terminal.ansiBrightCyan#90c8b8
  • terminal.ansiBrightGreen#7ab89e
  • terminal.ansiBrightMagenta#d4956a
  • terminal.ansiBrightRed#d4856a
  • terminal.ansiBrightWhite#d4cfc8
  • terminal.ansiBrightYellow#a8b065
  • terminal.ansiCyan#7ab89e
  • terminal.ansiGreen#7ab89e
  • terminal.ansiMagenta#d48a7a
  • terminal.ansiRed#d4856a
  • terminal.ansiWhite#b8b0a4
  • terminal.ansiYellow#a8b065
  • terminal.background#110d09
  • terminal.foreground#b8b0a4
  • terminal.selectionBackground#3d302888
  • terminalCursor.foreground#d4956a
  • titleBar.activeBackground#0c0906
  • titleBar.activeForeground#c4a0e8
  • titleBar.border#080604
  • titleBar.inactiveBackground#0c0906
  • titleBar.inactiveForeground#3d362e
  • walkThrough.embeddedEditorBackground#110d09
  • welcomePage.background#1a1612
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#6b6358italic
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, entity.name.type.instance.jsdoc#7a7068italic
keyword, keyword.control, keyword.control.flow, keyword.operator.new, keyword.operator.delete, storage.type, storage.modifier, keyword.other.important.css#d4956a
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.require#d4956aitalic
variable.language.this, variable.language.self, variable.language.super, variable.language.special.self#d4956aitalic
keyword.operator#b8a0c8
keyword.operator.arrow, keyword.operator.pipe, storage.type.function.arrow#b8a0c8
punctuation.definition, punctuation.terminator, punctuation.accessor, meta.brace, punctuation.separator, punctuation.section#6b6358
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.unquoted, punctuation.definition.string#a8b065
punctuation.definition.template-expression, punctuation.section.embedded, punctuation.definition.interpolation, punctuation.section.interpolation#d4956a
constant.character.escape, constant.other.placeholder#d4856a
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary#d4856a
constant.language#d4856aitalic
constant.character, constant.other#d4856a
entity.name.function, meta.function-call entity.name.function, support.function, support.function.builtin, entity.name.function.member#c4a0e8
variable.parameter, meta.parameters variable.other#c8b898italic
entity.name.type, entity.name.class, entity.other.inherited-class, support.type, support.class, entity.name.type.alias, entity.name.type.interface, entity.name.type.enum, entity.name.enum#7ab89e
meta.type.annotation, meta.type.parameters, meta.return.type#7ab89e
meta.type.parameters entity.name.type#90c8b8
entity.name.namespace, entity.name.module#90c8b8
variable, variable.other, variable.other.readwrite#d4cfc8
variable.other.property, support.variable.property, meta.object-literal.key, variable.other.object.property#b8b0a4
variable.other.constant, variable.other.enummember#d4856a
meta.decorator, punctuation.decorator, entity.name.function.decorator, meta.annotation, storage.type.annotation, punctuation.definition.annotation#d4956aitalic
entity.name.tag, meta.tag.sgml, support.class.component#d48a7a
entity.other.attribute-name, meta.tag entity.other.attribute-name#c4a0e8
punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx#d4956a
constant.character.entity.html#d4856a
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#c4a0e8
support.constant.property-value.css, support.constant.property-value.scss#a8b065
keyword.other.unit.css, keyword.other.unit.scss#d4856a
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.class.scss, entity.other.attribute-name.id.scss#7ab89e
entity.name.tag.css, entity.name.tag.scss#d48a7a
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#90c8b8
keyword.control.at-rule.css, keyword.control.at-rule.scss#d4956a
variable.css, variable.scss, variable.less#c8b898
constant.other.color.rgb-value.css, support.constant.color.css#d4856a
string.regexp, constant.regexp#7ab89e
keyword.operator.quantifier.regexp, keyword.operator.or.regexp, punctuation.definition.group.regexp#d4856a
constant.other.character-class.regexp#90c8b8
support.function.builtin.python#90c8b8
support.type.python#7ab89e
support.function.magic.python, entity.name.function.magic.python#c8b898italic
entity.name.function.decorator.python, meta.function.decorator.python#d4956aitalic
meta.fstring.python, constant.character.format.placeholder.other.python#d4856a
entity.name.package.go#90c8b8
support.function.builtin.go#90c8b8
storage.type.go, keyword.type.go#d4956a
entity.name.lifetime.rust, storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust#d4856aitalic
entity.name.function.macro.rust, meta.macro.rust entity.name.function.rust#90c8b8
meta.attribute.rust, entity.name.function.attribute.rust#d4956aitalic
support.type.primitive.rust, entity.name.type.primitive.rust#90c8b8
entity.name.type.trait.rust#7ab89eitalic
storage.type.annotation.java, meta.declaration.annotation.java, punctuation.definition.annotation.java, entity.name.type.annotation.kotlin, meta.annotation.kotlin#d4956aitalic
storage.modifier.import.java, variable.language.wildcard.java#d4cfc8
storage.type.primitive.java, storage.type.java#90c8b8
keyword.control.directive.c, keyword.control.directive.cpp, punctuation.definition.directive.c#d4956a
entity.name.function.preprocessor.c, entity.name.function.preprocessor.cpp#90c8b8
storage.type.c, storage.type.cpp, support.type.posix-reserved.c#90c8b8
constant.other.symbol.ruby, constant.other.symbol.hashkey.ruby#d4856a
variable.other.readwrite.instance.ruby, variable.other.readwrite.class.ruby#c8b898
support.function.kernel.ruby, support.function.builtin.ruby#90c8b8
punctuation.section.embedded.begin.ruby, punctuation.section.embedded.end.ruby#d4956a
variable.other.php, variable.language.php#c8b898
support.function.builtin.php#90c8b8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#d4956abold
keyword.other.DML.sql, keyword.other.DDL.create.sql, keyword.other.DDL.sql#d4956a
keyword.other.sql, keyword.other.alias.sql, keyword.other.order.sql#b8a0c8
support.function.aggregate.sql, support.function.sql#90c8b8
entity.name.function.sql#c4a0e8
storage.type.sql#7ab89e
comment.line.shebang, punctuation.definition.comment.shebang#d4956abold
support.function.builtin.shell, support.function.builtin.bash#90c8b8
variable.other.normal.shell, variable.other.bracket.shell, variable.other.special.shell, variable.other.positional.shell#c8b898
meta.substitution.command.shell, punctuation.definition.string.begin.shell, punctuation.definition.string.end.shell#d4956a
string.unquoted.argument.shell#d4cfc8
entity.name.tag.yaml, support.type.property-name.yaml#c4a0e8
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml#d4856a
constant.language.boolean.yaml, constant.language.null.yaml#d4856aitalic
entity.other.document.begin.yaml, entity.other.document.end.yaml#6b6358
support.type.property-name.json#c4a0e8
constant.language.json#d4856aitalic
support.type.property-name.table.toml, entity.name.section.toml#d4956a
support.type.property-name.toml#c4a0e8
keyword.type.graphql, keyword.operation.graphql#d4956a
entity.name.type.graphql, support.type.graphql#7ab89e
variable.other.field.graphql#c4a0e8
entity.name.fragment.graphql#90c8b8
entity.name.directive.graphql, meta.directive.graphql#d4956aitalic
keyword.other.special-method.dockerfile#d4956a
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#d4956abold
markup.bold, punctuation.definition.bold.markdown#a8b065bold
markup.italic, punctuation.definition.italic.markdown#c8b898italic
markup.inline.raw, punctuation.definition.raw.markdown#7ab89e
markup.fenced_code.block.markdown, punctuation.definition.fenced.markdown#7ab89e
markup.underline.link, string.other.link#c4a0e8
meta.link.inline.markdown entity.name.label#90c8b8
punctuation.definition.list.begin.markdown, beginning.punctuation.definition.list.markdown#d4956a
markup.quote, punctuation.definition.blockquote.markdown#6b6358italic
meta.separator.markdown#5a5248
invalid, invalid.deprecated#d4856aunderline