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#7D9B7615
  • activityBar.activeBorder#7D9B76
  • activityBar.background#1D1F1B
  • activityBar.foreground#7D9B76
  • activityBar.inactiveForeground#A89F8B
  • activityBarBadge.background#7D9B76
  • activityBarBadge.foreground#1D1F1B
  • badge.background#7D9B76
  • badge.foreground#1D1F1B
  • breadcrumb.activeSelectionForeground#7D9B76
  • breadcrumb.background#1D1F1B
  • breadcrumb.focusForeground#EDE8DC
  • breadcrumb.foreground#A89F8B
  • breadcrumbPicker.background#282B25
  • button.background#7D9B76
  • button.foreground#1D1F1B
  • button.hoverBackground#8DAB86
  • button.secondaryBackground#3A3D36
  • button.secondaryForeground#EDE8DC
  • button.secondaryHoverBackground#4A4D46
  • diffEditor.insertedLineBackground#A4C49B15
  • diffEditor.insertedTextBackground#A4C49B20
  • diffEditor.removedLineBackground#C47D7D15
  • diffEditor.removedTextBackground#C47D7D20
  • dropdown.background#282B25
  • dropdown.border#3A3D36
  • dropdown.foreground#EDE8DC
  • editor.background#1D1F1B
  • editor.findMatchBackground#C9B89650
  • editor.findMatchHighlightBackground#C9B89630
  • editor.findRangeHighlightBackground#7D9B7620
  • editor.foldBackground#282B2550
  • editor.foreground#EDE8DC
  • editor.hoverHighlightBackground#7D9B7620
  • editor.lineHighlightBackground#282B2550
  • editor.lineHighlightBorder#282B2500
  • editor.rangeHighlightBackground#7D9B7615
  • editor.selectionBackground#7D9B7640
  • editor.selectionHighlightBackground#7D9B7625
  • editor.wordHighlightBackground#B8A9C930
  • editor.wordHighlightStrongBackground#B8A9C950
  • editorBracketHighlight.foreground1#7D9B76
  • editorBracketHighlight.foreground2#7BA3A3
  • editorBracketHighlight.foreground3#C9B896
  • editorBracketHighlight.foreground4#B8A9C9
  • editorBracketHighlight.foreground5#8FA8A0
  • editorBracketHighlight.foreground6#A4C49B
  • editorBracketHighlight.unexpectedBracket.foreground#C47D7D
  • editorCursor.foreground#7D9B76
  • editorError.foreground#C47D7D
  • editorGroup.border#3A3D36
  • editorGroup.dropBackground#7D9B7630
  • editorGroupHeader.tabsBackground#161814
  • editorGutter.addedBackground#A4C49B
  • editorGutter.deletedBackground#C47D7D
  • editorGutter.modifiedBackground#7BA3A3
  • editorHoverWidget.background#282B25
  • editorHoverWidget.border#3A3D36
  • editorInfo.foreground#7BA3A3
  • editorLineNumber.activeForeground#7D9B76
  • editorLineNumber.foreground#6B6357
  • editorLink.activeForeground#7BA3A3
  • editorOverviewRuler.addedForeground#A4C49B80
  • editorOverviewRuler.border#1D1F1B
  • editorOverviewRuler.deletedForeground#C47D7D80
  • editorOverviewRuler.errorForeground#C47D7D
  • editorOverviewRuler.infoForeground#7BA3A3
  • editorOverviewRuler.modifiedForeground#7BA3A380
  • editorOverviewRuler.selectionHighlightForeground#7D9B7680
  • editorOverviewRuler.warningForeground#D4A574
  • editorOverviewRuler.wordHighlightForeground#B8A9C980
  • editorOverviewRuler.wordHighlightStrongForeground#B8A9C9A0
  • editorSuggestWidget.background#282B25
  • editorSuggestWidget.foreground#EDE8DC
  • editorSuggestWidget.highlightForeground#7D9B76
  • editorSuggestWidget.selectedBackground#7D9B7640
  • editorWarning.foreground#D4A574
  • editorWhitespace.foreground#3A3D3680
  • editorWidget.background#282B25
  • editorWidget.border#3A3D36
  • errorForeground#C47D7D
  • focusBorder#7D9B7680
  • foreground#EDE8DC
  • gitDecoration.conflictingResourceForeground#D4A574
  • gitDecoration.deletedResourceForeground#C47D7D
  • gitDecoration.ignoredResourceForeground#6B6357
  • gitDecoration.modifiedResourceForeground#7BA3A3
  • gitDecoration.stageModifiedResourceForeground#B8A9C9
  • gitDecoration.untrackedResourceForeground#A4C49B
  • input.background#282B25
  • input.border#3A3D36
  • input.foreground#EDE8DC
  • input.placeholderForeground#A89F8B
  • inputOption.activeBorder#7D9B76
  • inputValidation.errorBorder#C47D7D
  • inputValidation.infoBorder#7BA3A3
  • inputValidation.warningBorder#D4A574
  • list.activeSelectionBackground#7D9B7650
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#7D9B7630
  • list.errorForeground#C47D7D
  • list.focusBackground#7D9B7640
  • list.highlightForeground#A4C49B
  • list.hoverBackground#282B2580
  • list.inactiveSelectionBackground#3A3D3650
  • list.warningForeground#D4A574
  • minimap.errorHighlight#C47D7D80
  • minimap.findMatchHighlight#C9B89680
  • minimap.selectionHighlight#7D9B7680
  • 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#7D9B76
  • panelTitle.activeForeground#EDE8DC
  • panelTitle.inactiveForeground#A89F8B
  • peekView.border#7D9B76
  • peekViewEditor.background#1D1F1B
  • peekViewEditor.matchHighlightBackground#C9B89650
  • peekViewResult.background#161814
  • peekViewResult.fileForeground#EDE8DC
  • peekViewResult.lineForeground#C9C4B8
  • peekViewResult.matchHighlightBackground#C9B89650
  • peekViewResult.selectionBackground#7D9B7640
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#282B25
  • peekViewTitleDescription.foreground#A89F8B
  • peekViewTitleLabel.foreground#EDE8DC
  • progressBar.background#7D9B76
  • quickInput.background#282B25
  • quickInput.foreground#EDE8DC
  • quickInputList.focusBackground#7D9B7640
  • quickInputTitle.background#1D1F1B
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#7D9B7680
  • scrollbarSlider.background#6B635750
  • scrollbarSlider.hoverBackground#6B635780
  • selection.background#7D9B7640
  • settings.checkboxBackground#282B25
  • settings.checkboxBorder#3A3D36
  • settings.checkboxForeground#EDE8DC
  • settings.dropdownBackground#282B25
  • settings.dropdownBorder#3A3D36
  • settings.dropdownForeground#EDE8DC
  • settings.headerForeground#EDE8DC
  • settings.modifiedItemIndicator#7D9B76
  • 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#7D9B76
  • statusBar.debuggingForeground#1D1F1B
  • statusBar.foreground#C9C4B8
  • statusBar.noFolderBackground#282B25
  • statusBar.noFolderForeground#C9C4B8
  • statusBarItem.hoverBackground#3A3D36
  • statusBarItem.prominentBackground#7D9B76
  • statusBarItem.prominentHoverBackground#8DAB86
  • statusBarItem.remoteBackground#7D9B76
  • statusBarItem.remoteForeground#1D1F1B
  • tab.activeBackground#1D1F1B
  • tab.activeBorderTop#7D9B76
  • 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#C8B9D9
  • terminal.ansiBrightRed#D4908F
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#E4B584
  • terminal.ansiCyan#8FA8A0
  • terminal.ansiGreen#A4C49B
  • terminal.ansiMagenta#B8A9C9
  • terminal.ansiRed#C47D7D
  • 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#7D9B76
comment, punctuation.definition.comment#6B6357italic
comment keyword.codetag.notation, comment.block.documentation keyword, storage.type.class.jsdoc#B8A9C9
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#7D9B76
meta.template.expression#EDE8DC
constant, variable.other.constant#C9B896
constant.numeric#B8A9C9
constant.language.boolean#A4C49B
constant.language.null, constant.language.undefined#A4C49Bitalic
keyword#7D9B76
storage.type, storage.modifier#7D9B76italic
keyword.control#7D9B76
keyword.control.import, keyword.control.export, keyword.control.from#7D9B76italic
entity.name.function, meta.function-call#8FA8A0
variable.parameter#C9B896italic
storage.type.function.arrow#7D9B76
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#7D9B76
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#B8A9C9
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#7D9B76
keyword.operator#7D9B76
keyword.operator.comparison, keyword.operator.relational#7BA3A3
keyword.operator.logical#7D9B76
punctuation#A89F8B
punctuation.definition.block, meta.brace#A89F8B
string.regexp#A4C49B
punctuation.definition.group.regexp, keyword.operator.quantifier.regexp#B8A9C9
meta.decorator, punctuation.decorator#B8A9C9
markup.heading, heading.1.markdown, heading.2.markdown, heading.3.markdown#7D9B76bold
markup.bold#C9B896bold
markup.italic#B8A9C9italic
markup.underline.link, string.other.link#8FA8A0
markup.inline.raw, markup.fenced_code.block#E8DCC4
markup.quote#6B6357italic
punctuation.definition.list.begin.markdown#7D9B76
support.type.property-name.json#7D9B76
string.quoted.double.json#E8DCC4
entity.name.tag.yaml#7D9B76
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#B8A9C9italic
entity.name.function.decorator.python, meta.function.decorator.python#B8A9C9
string.quoted.docstring.multi.python, string.quoted.docstring.single.python#6B6357italic
constant.character.format.placeholder.other.python#7D9B76
punctuation.definition.lifetime.rust, entity.name.lifetime.rust, storage.modifier.lifetime.rust#A4C49Bitalic
entity.name.function.macro.rust, support.macro.rust, meta.macro.rust#B8A9C9
meta.attribute.rust, punctuation.definition.attribute.rust, punctuation.brackets.attribute.rust#7BA3A3
keyword.other.unsafe.rust#A4C49Bbold
storage.modifier.mut.rust#7D9B76italic
entity.name.type.rust, entity.name.type.primitive.rust, support.type.primitive.rust#7BA3A3
entity.name.type.trait.rust#7BA3A3italic
keyword.other.impl.rust#7D9B76italic
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#B8A9C9
support.type.sys-types.c, support.type.sys-types.cpp, storage.type.built-in.c, storage.type.built-in.cpp#7BA3A3
invalid#A4C49Bunderline
invalid.deprecated#6B6357strikethrough
support.function#8FA8A0
support.class#7BA3A3
support.constant#C9B896
entity.name#7BA3A3
entity.name.namespace, entity.name.module#7BA3A3
Matcha Ceremony by fullstacklabXD - VS Code Theme