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#C9A0A015
  • activityBar.activeBorder#C9A0A0
  • activityBar.background#1D1F1B
  • activityBar.foreground#C9A0A0
  • activityBar.inactiveForeground#A89F8B
  • activityBarBadge.background#C9A0A0
  • activityBarBadge.foreground#1D1F1B
  • badge.background#C9A0A0
  • badge.foreground#1D1F1B
  • breadcrumb.activeSelectionForeground#C9A0A0
  • breadcrumb.background#1D1F1B
  • breadcrumb.focusForeground#EDE8DC
  • breadcrumb.foreground#A89F8B
  • breadcrumbPicker.background#282B25
  • button.background#C9A0A0
  • button.foreground#1D1F1B
  • button.hoverBackground#D9B0B0
  • button.secondaryBackground#3A3D36
  • button.secondaryForeground#EDE8DC
  • button.secondaryHoverBackground#4A4D46
  • diffEditor.insertedLineBackground#A4C49B15
  • diffEditor.insertedTextBackground#A4C49B20
  • diffEditor.removedLineBackground#D9A0A015
  • diffEditor.removedTextBackground#D9A0A020
  • dropdown.background#282B25
  • dropdown.border#3A3D36
  • dropdown.foreground#EDE8DC
  • editor.background#1D1F1B
  • editor.findMatchBackground#C9B89650
  • editor.findMatchHighlightBackground#C9B89630
  • editor.findRangeHighlightBackground#C9A0A020
  • editor.foldBackground#282B2550
  • editor.foreground#EDE8DC
  • editor.hoverHighlightBackground#C9A0A020
  • editor.lineHighlightBackground#282B2550
  • editor.lineHighlightBorder#282B2500
  • editor.rangeHighlightBackground#C9A0A015
  • editor.selectionBackground#C9A0A040
  • editor.selectionHighlightBackground#C9A0A025
  • editor.wordHighlightBackground#C9A0B830
  • editor.wordHighlightStrongBackground#C9A0B850
  • editorBracketHighlight.foreground1#C9A0A0
  • editorBracketHighlight.foreground2#7BA3A3
  • editorBracketHighlight.foreground3#C9B896
  • editorBracketHighlight.foreground4#C9A0B8
  • editorBracketHighlight.foreground5#7D9B76
  • editorBracketHighlight.foreground6#A4C49B
  • editorBracketHighlight.unexpectedBracket.foreground#D9A0A0
  • editorCursor.foreground#C9A0A0
  • editorError.foreground#D9A0A0
  • editorGroup.border#3A3D36
  • editorGroup.dropBackground#C9A0A030
  • editorGroupHeader.tabsBackground#161814
  • editorGutter.addedBackground#A4C49B
  • editorGutter.deletedBackground#D9A0A0
  • editorGutter.modifiedBackground#7BA3A3
  • editorHoverWidget.background#282B25
  • editorHoverWidget.border#3A3D36
  • editorInfo.foreground#7BA3A3
  • editorLineNumber.activeForeground#C9A0A0
  • editorLineNumber.foreground#6B6357
  • editorLink.activeForeground#7BA3A3
  • editorOverviewRuler.addedForeground#A4C49B80
  • editorOverviewRuler.border#1D1F1B
  • editorOverviewRuler.deletedForeground#D9A0A080
  • editorOverviewRuler.errorForeground#D9A0A0
  • editorOverviewRuler.infoForeground#7BA3A3
  • editorOverviewRuler.modifiedForeground#7BA3A380
  • editorOverviewRuler.selectionHighlightForeground#C9A0A080
  • editorOverviewRuler.warningForeground#D4A574
  • editorOverviewRuler.wordHighlightForeground#C9A0B880
  • editorOverviewRuler.wordHighlightStrongForeground#C9A0B8A0
  • editorSuggestWidget.background#282B25
  • editorSuggestWidget.foreground#EDE8DC
  • editorSuggestWidget.highlightForeground#C9A0A0
  • editorSuggestWidget.selectedBackground#C9A0A040
  • editorWarning.foreground#D4A574
  • editorWhitespace.foreground#3A3D3680
  • editorWidget.background#282B25
  • editorWidget.border#3A3D36
  • errorForeground#D9A0A0
  • focusBorder#C9A0A080
  • foreground#EDE8DC
  • gitDecoration.conflictingResourceForeground#D4A574
  • gitDecoration.deletedResourceForeground#D9A0A0
  • gitDecoration.ignoredResourceForeground#6B6357
  • gitDecoration.modifiedResourceForeground#7BA3A3
  • gitDecoration.stageModifiedResourceForeground#C9A0B8
  • gitDecoration.untrackedResourceForeground#A4C49B
  • input.background#282B25
  • input.border#3A3D36
  • input.foreground#EDE8DC
  • input.placeholderForeground#A89F8B
  • inputOption.activeBorder#C9A0A0
  • inputValidation.errorBorder#D9A0A0
  • inputValidation.infoBorder#7BA3A3
  • inputValidation.warningBorder#D4A574
  • list.activeSelectionBackground#C9A0A050
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#C9A0A030
  • list.errorForeground#D9A0A0
  • list.focusBackground#C9A0A040
  • list.highlightForeground#D9B0B0
  • list.hoverBackground#282B2580
  • list.inactiveSelectionBackground#3A3D3650
  • list.warningForeground#D4A574
  • minimap.errorHighlight#D9A0A080
  • minimap.findMatchHighlight#C9B89680
  • minimap.selectionHighlight#C9A0A080
  • minimap.warningHighlight#D4A57480
  • notificationCenter.border#3A3D36
  • notificationCenterHeader.background#282B25
  • notificationCenterHeader.foreground#EDE8DC
  • notificationLink.foreground#7BA3A3
  • notifications.background#282B25
  • notifications.border#3A3D36
  • notifications.foreground#EDE8DC
  • panel.background#161814
  • panel.border#3A3D36
  • panelTitle.activeBorder#C9A0A0
  • panelTitle.activeForeground#EDE8DC
  • panelTitle.inactiveForeground#A89F8B
  • peekView.border#C9A0A0
  • peekViewEditor.background#1D1F1B
  • peekViewEditor.matchHighlightBackground#C9B89650
  • peekViewResult.background#161814
  • peekViewResult.fileForeground#EDE8DC
  • peekViewResult.lineForeground#C9C4B8
  • peekViewResult.matchHighlightBackground#C9B89650
  • peekViewResult.selectionBackground#C9A0A040
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#282B25
  • peekViewTitleDescription.foreground#A89F8B
  • peekViewTitleLabel.foreground#EDE8DC
  • progressBar.background#C9A0A0
  • quickInput.background#282B25
  • quickInput.foreground#EDE8DC
  • quickInputList.focusBackground#C9A0A040
  • quickInputTitle.background#1D1F1B
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#C9A0A080
  • scrollbarSlider.background#6B635750
  • scrollbarSlider.hoverBackground#6B635780
  • selection.background#C9A0A040
  • settings.checkboxBackground#282B25
  • settings.checkboxBorder#3A3D36
  • settings.checkboxForeground#EDE8DC
  • settings.dropdownBackground#282B25
  • settings.dropdownBorder#3A3D36
  • settings.dropdownForeground#EDE8DC
  • settings.headerForeground#EDE8DC
  • settings.modifiedItemIndicator#C9A0A0
  • settings.numberInputBackground#282B25
  • settings.numberInputBorder#3A3D36
  • settings.numberInputForeground#EDE8DC
  • settings.textInputBackground#282B25
  • settings.textInputBorder#3A3D36
  • settings.textInputForeground#EDE8DC
  • sideBar.background#161814
  • sideBar.foreground#C9C4B8
  • sideBarSectionHeader.background#282B25
  • sideBarSectionHeader.border#3A3D36
  • sideBarTitle.foreground#EDE8DC
  • statusBar.background#161814
  • statusBar.debuggingBackground#C9A0A0
  • statusBar.debuggingForeground#1D1F1B
  • statusBar.foreground#C9C4B8
  • statusBar.noFolderBackground#282B25
  • statusBar.noFolderForeground#C9C4B8
  • statusBarItem.hoverBackground#3A3D36
  • statusBarItem.prominentBackground#C9A0A0
  • statusBarItem.prominentHoverBackground#D9B0B0
  • statusBarItem.remoteBackground#C9A0A0
  • statusBarItem.remoteForeground#1D1F1B
  • tab.activeBackground#1D1F1B
  • tab.activeBorderTop#C9A0A0
  • tab.activeForeground#EDE8DC
  • tab.border#161814
  • tab.hoverBackground#282B25
  • tab.inactiveBackground#161814
  • tab.inactiveForeground#A89F8B
  • terminal.ansiBlack#282B25
  • terminal.ansiBlue#7BA3A3
  • terminal.ansiBrightBlack#6B6357
  • terminal.ansiBrightBlue#8BB3B3
  • terminal.ansiBrightCyan#9FB8B0
  • terminal.ansiBrightGreen#B4D4AB
  • terminal.ansiBrightMagenta#D9B0C8
  • terminal.ansiBrightRed#D9B0B0
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#E4B584
  • terminal.ansiCyan#8FA8A0
  • terminal.ansiGreen#A4C49B
  • terminal.ansiMagenta#C9A0B8
  • terminal.ansiRed#C9A0A0
  • terminal.ansiWhite#EDE8DC
  • terminal.ansiYellow#D4A574
  • terminal.background#1D1F1B
  • terminal.foreground#EDE8DC
  • titleBar.activeBackground#161814
  • titleBar.activeForeground#EDE8DC
  • titleBar.inactiveBackground#161814
  • titleBar.inactiveForeground#A89F8B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#C9A0A0
comment, punctuation.definition.comment#6B6357italic
comment keyword.codetag.notation, comment.block.documentation keyword, storage.type.class.jsdoc#C9A0B8
comment.block.documentation variable.other, comment.block.documentation entity.name.type#7BA3A3italic
string#E8DCC4
punctuation.definition.string.begin, punctuation.definition.string.end#D4C4A8
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#C9A0A0
meta.template.expression#EDE8DC
constant, variable.other.constant#C9B896
constant.numeric#C9A0B8
constant.language.boolean#A4C49B
constant.language.null, constant.language.undefined#A4C49Bitalic
keyword#C9A0A0
storage.type, storage.modifier#C9A0A0italic
keyword.control#C9A0A0
keyword.control.import, keyword.control.export, keyword.control.from#C9A0A0italic
entity.name.function, meta.function-call#8FA8A0
variable.parameter#C9B896italic
storage.type.function.arrow#C9A0A0
entity.name.type.class, entity.name.class#7BA3A3bold
entity.name.type.interface#7BA3A3italic
entity.name.type, support.type#7BA3A3italic
entity.name.type.parameter#C9B896
variable#EDE8DC
variable.language#A4C49Bitalic
variable.other.property, meta.object-literal.key#A89F8B
entity.name.tag#C9A0A0
entity.other.attribute-name#C9B896italic
string.quoted.double.html, string.quoted.single.html#E8DCC4
meta.selector, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#7BA3A3
support.type.property-name.css#8FA8A0
support.constant.property-value.css, meta.property-value.css#C9B896
keyword.other.unit.css#C9A0B8
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#C9A0A0
keyword.operator#C9A0A0
keyword.operator.comparison, keyword.operator.relational#7BA3A3
keyword.operator.logical#C9A0A0
punctuation#A89F8B
punctuation.definition.block, meta.brace#A89F8B
string.regexp#A4C49B
punctuation.definition.group.regexp, keyword.operator.quantifier.regexp#C9A0B8
meta.decorator, punctuation.decorator#C9A0B8
markup.heading, heading.1.markdown, heading.2.markdown, heading.3.markdown#C9A0A0bold
markup.bold#C9B896bold
markup.italic#C9A0B8italic
markup.underline.link, string.other.link#8FA8A0
markup.inline.raw, markup.fenced_code.block#E8DCC4
markup.quote#6B6357italic
punctuation.definition.list.begin.markdown#C9A0A0
support.type.property-name.json#C9A0A0
string.quoted.double.json#E8DCC4
entity.name.tag.yaml#C9A0A0
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.language.special.self.python#A4C49Bitalic
support.function.builtin.python, support.type.python#8FA8A0
support.function.magic.python#C9A0B8italic
entity.name.function.decorator.python, meta.function.decorator.python#C9A0B8
string.quoted.docstring.multi.python, string.quoted.docstring.single.python#6B6357italic
constant.character.format.placeholder.other.python#C9A0A0
punctuation.definition.lifetime.rust, entity.name.lifetime.rust, storage.modifier.lifetime.rust#A4C49Bitalic
entity.name.function.macro.rust, support.macro.rust, meta.macro.rust#C9A0B8
meta.attribute.rust, punctuation.definition.attribute.rust, punctuation.brackets.attribute.rust#7BA3A3
keyword.other.unsafe.rust#D9A0A0bold
storage.modifier.mut.rust#C9A0A0italic
entity.name.type.rust, entity.name.type.primitive.rust, support.type.primitive.rust#7BA3A3
entity.name.type.trait.rust#7BA3A3italic
keyword.other.impl.rust#C9A0A0italic
variable.language.self.rust#A4C49Bitalic
entity.name.module.rust, entity.name.namespace.rust#7BA3A3
variable.language.this#A4C49Bitalic
support.type.primitive.ts, support.type.builtin.ts#7BA3A3
entity.name.package.go#7BA3A3
support.function.builtin.go#8FA8A0
keyword.control.directive.include, keyword.control.directive.define, keyword.control.directive.conditional, meta.preprocessor#C9A0B8
support.type.sys-types.c, support.type.sys-types.cpp, storage.type.built-in.c, storage.type.built-in.cpp#7BA3A3
invalid#D9A0A0underline
invalid.deprecated#6B6357strikethrough
support.function#8FA8A0
support.class#7BA3A3
support.constant#C9B896
entity.name#7BA3A3
entity.name.namespace, entity.name.module#7BA3A3