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#1d2021
  • badge.background#d65d0e
  • badge.foreground#1d2021
  • breadcrumb.activeSelectionForeground#fbf1c7
  • breadcrumb.focusForeground#fbf1c7
  • breadcrumb.foreground#a89984
  • button.background#665c54
  • debugToolBar.background#1d2021
  • diffEditor.insertedTextBackground#b8bb2620
  • diffEditor.removedTextBackground#fb493420
  • dropdown.background#1d2021
  • dropdown.border#3c3836
  • editor.background#1d2021
  • editor.findMatchBackground#fabd2f40
  • editor.findMatchHighlightBackground#d7992140
  • editor.foldBackground#3c383660
  • editor.foreground#ebdbb2
  • editor.lineHighlightBackground#ebdbb210
  • editor.selectionBackground#7c6f6470
  • editor.selectionHighlightBackground#92837450
  • editor.wordHighlightBackground#665c5450
  • editor.wordHighlightStrongBackground#665c5470
  • editorBracketHighlight.foreground1#fb4934
  • editorBracketHighlight.foreground2#fabd2f
  • editorBracketHighlight.foreground3#d3869b
  • editorBracketHighlight.foreground4#8ec07c
  • editorBracketHighlight.foreground5#83a598
  • editorBracketHighlight.foreground6#fe8019
  • editorBracketHighlight.foreground7#a89984
  • editorBracketMatch.background#665c54
  • editorBracketMatch.border#1d202100
  • editorCodeLens.foreground#7c6f64
  • editorCursor.foreground#fbf1c7
  • editorError.foreground#fb4934
  • editorGroup.border#3c3836
  • editorGroupHeader.noTabsBackground#1d2021
  • editorGroupHeader.tabsBackground#1d2021
  • editorGutter.addedBackground#b8bb26
  • editorGutter.background#1d2021
  • editorGutter.deletedBackground#fb4934
  • editorGutter.modifiedBackground#83a598
  • editorHoverWidget.background#1d2021
  • editorHoverWidget.border#3c3836
  • editorIndentGuide.activeBackground#504945
  • editorIndentGuide.background#3c3836
  • editorInlayHint.background#1d202100
  • editorInlayHint.foreground#928374
  • editorLineNumber.activeForeground#fe8019
  • editorLineNumber.foreground#665c54
  • editorMarkerNavigation.background#3c3836
  • editorOverviewRuler.addedForeground#b8bb2699
  • editorOverviewRuler.border#1d2021
  • editorOverviewRuler.bracketMatchForeground#928374
  • editorOverviewRuler.commonContentForeground#928374
  • editorOverviewRuler.currentContentForeground#458588
  • editorOverviewRuler.deletedForeground#fb493499
  • editorOverviewRuler.errorForeground#fb4934
  • editorOverviewRuler.findMatchForeground#fabd2f99
  • editorOverviewRuler.incomingContentForeground#689d6a
  • editorOverviewRuler.infoForeground#83a598
  • editorOverviewRuler.modifiedForeground#83a59899
  • editorOverviewRuler.selectionHighlightForeground#665c54
  • editorOverviewRuler.warningForeground#d79921
  • editorOverviewRuler.wordHighlightForeground#665c54
  • editorOverviewRuler.wordHighlightStrongForeground#7c6f64
  • editorRuler.foreground#3c3836
  • editorStickyScroll.background#1d2021
  • editorStickyScrollHover.background#3c3836
  • editorSuggestWidget.background#1d2021
  • editorSuggestWidget.highlightForeground#fabd2f
  • editorWarning.foreground#d79921
  • editorWhitespace.foreground#3c3836
  • editorWidget.background#1d2021
  • editorWidget.border#3c3836
  • focusBorder#504945
  • foreground#fbf1c7
  • gitDecoration.addedResourceForeground#b8bb26
  • gitDecoration.conflictingResourceForeground#d3869b
  • gitDecoration.deletedResourceForeground#fb4934
  • gitDecoration.ignoredResourceForeground#7c6f64
  • gitDecoration.modifiedResourceForeground#83a598
  • gitDecoration.stageDeletedResourceForeground#fb4934
  • gitDecoration.stageModifiedResourceForeground#83a598
  • gitDecoration.submoduleResourceForeground#fe8019
  • gitDecoration.untrackedResourceForeground#b8bb26
  • input.background#3c3836
  • input.border#504945
  • input.foreground#fbf1c7
  • input.placeholderForeground#7c6f64
  • list.activeSelectionBackground#3c3836
  • list.activeSelectionForeground#fbf1c7
  • list.focusBackground#3c3836
  • list.focusForeground#fbf1c7
  • list.highlightForeground#fabd2f
  • list.hoverBackground#1a1a1a
  • list.hoverForeground#ebdbb2
  • list.inactiveSelectionBackground#3c3836
  • list.inactiveSelectionForeground#ebdbb2
  • listFilterWidget.background#3c3836
  • listFilterWidget.noMatchesOutline#fb4934
  • listFilterWidget.outline#504945
  • merge.border#1d202100
  • minimap.errorHighlight#fb493480
  • minimap.findMatchHighlight#fabd2f60
  • minimap.selectionHighlight#665c5480
  • minimap.warningHighlight#d7992180
  • minimapGutter.addedBackground#b8bb2680
  • minimapGutter.deletedBackground#fb493480
  • minimapGutter.modifiedBackground#83a59880
  • minimapSlider.activeBackground#50494560
  • minimapSlider.background#50494540
  • minimapSlider.hoverBackground#50494550
  • notificationLink.foreground#83a598
  • notifications.background#3c3836
  • notifications.border#504945
  • notifications.foreground#ebdbb2
  • panel.background#1d2021
  • panelTitle.activeBorder#fe8019
  • panelTitle.activeForeground#fbf1c7
  • panelTitle.inactiveForeground#a89984
  • peekView.border#504945
  • peekViewEditor.background#1a1a1a
  • peekViewEditor.matchHighlightBackground#fabd2f40
  • peekViewEditorGutter.background#3c3836
  • peekViewResult.background#3c3836
  • peekViewResult.fileForeground#fbf1c7
  • peekViewResult.lineForeground#ebdbb2
  • peekViewResult.matchHighlightBackground#fabd2f40
  • peekViewResult.selectionBackground#7c6f64
  • peekViewResult.selectionForeground#fbf1c7
  • peekViewTitle.background#3c3836
  • peekViewTitleDescription.foreground#a89984
  • peekViewTitleLabel.foreground#fbf1c7
  • pickerGroup.border#3c3836
  • pickerGroup.foreground#a89984
  • progressBar.background#fe8019
  • scrollbar.shadow#1d2021
  • scrollbarSlider.activeBackground#7c6f6450
  • scrollbarSlider.background#50494540
  • scrollbarSlider.hoverBackground#665c5450
  • selection.background#7c6f6480
  • settings.checkboxBackground#3c3836
  • settings.checkboxBorder#504945
  • settings.checkboxForeground#fbf1c7
  • settings.dropdownBackground#3c3836
  • settings.dropdownBorder#504945
  • settings.dropdownForeground#fbf1c7
  • settings.dropdownListBorder#504945
  • settings.focusedRowBackground#3c383650
  • settings.headerForeground#fabd2f
  • settings.modifiedItemIndicator#83a598
  • settings.numberInputBackground#3c3836
  • settings.numberInputBorder#504945
  • settings.numberInputForeground#fbf1c7
  • settings.textInputBackground#3c3836
  • settings.textInputBorder#504945
  • settings.textInputForeground#fbf1c7
  • sideBar.background#1d2021
  • sideBar.border#3c3836
  • sideBar.foreground#d5c4a1
  • sideBarSectionHeader.background#1d2021
  • sideBarSectionHeader.foreground#fbf1c7
  • sideBarTitle.foreground#fbf1c7
  • statusBar.background#1d2021
  • statusBar.border#3c3836
  • statusBar.debuggingBackground#fe8019
  • statusBar.debuggingBorder#1d202100
  • statusBar.debuggingForeground#1d2021
  • statusBar.foreground#ebdbb2
  • statusBar.noFolderBackground#3c3836
  • statusBar.noFolderBorder#1d202100
  • statusBar.noFolderForeground#a89984
  • statusBarItem.activeBackground#504945
  • statusBarItem.hoverBackground#3c3836
  • statusBarItem.prominentBackground#fe8019
  • statusBarItem.prominentForeground#1d2021
  • statusBarItem.prominentHoverBackground#d65d0e
  • statusBarItem.remoteBackground#8ec07c
  • statusBarItem.remoteForeground#1d2021
  • tab.activeBackground#3c3836
  • tab.activeBorder#fe8019
  • tab.activeForeground#fbf1c7
  • tab.border#3c3836
  • tab.hoverBackground#504945
  • tab.hoverBorder#fe8019
  • tab.inactiveBackground#1d2021
  • tab.inactiveForeground#a89984
  • tab.unfocusedActiveBorder#d65d0e
  • tab.unfocusedActiveForeground#ebdbb2
  • tab.unfocusedHoverBackground#3c3836
  • tab.unfocusedHoverBorder#d65d0e
  • tab.unfocusedInactiveForeground#928374
  • terminal.ansiBlack#3c3836
  • terminal.ansiBlue#83a598
  • terminal.ansiBrightBlack#928374
  • terminal.ansiBrightBlue#9fc5d8
  • terminal.ansiBrightCyan#b5d5a7
  • terminal.ansiBrightGreen#d5e039
  • terminal.ansiBrightMagenta#e0a8b8
  • terminal.ansiBrightRed#fe6e6e
  • terminal.ansiBrightWhite#fbf1c7
  • terminal.ansiBrightYellow#fcd752
  • terminal.ansiCyan#8ec07c
  • terminal.ansiGreen#b8bb26
  • terminal.ansiMagenta#d3869b
  • terminal.ansiRed#fb4934
  • terminal.ansiWhite#ebdbb2
  • terminal.ansiYellow#fabd2f
  • terminal.background#1d2021
  • terminal.border#3c3836
  • terminal.foreground#ebdbb2
  • terminal.selectionBackground#50494560
  • terminalCursor.background#1d2021
  • terminalCursor.foreground#fbf1c7
  • textBlockQuote.background#3c3836
  • textBlockQuote.border#504945
  • textCodeBlock.background#3c3836
  • textLink.activeForeground#83a598
  • textLink.foreground#83a598
  • textPreformat.foreground#fabd2f
  • textSeparator.foreground#504945
  • titleBar.activeBackground#1d2021
  • titleBar.activeForeground#fbf1c7
  • titleBar.border#3c3836
  • titleBar.inactiveBackground#1d2021
  • titleBar.inactiveForeground#a89984
  • widget.shadow#1d2021

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#928374italic
invalid, invalid.illegal#cc241dstrikethrough
constant, support.constant, variable.arguments#d3869b
constant.numeric, constant.language#b48ead
constant.language.import-export-all#fe8019
entity.name#b8bb26
entity.name.class, entity.name.namespace, entity.name.type, storage.type.namespace, support.class, variable.language.this.constructor, variable.language.super.constructor#8ec07c
entity.name.type, storage.type.cs, storage.type.java#8ec07c
entity.name.function, support.function#b8bb26
entity.name.label, entity.name.tag#fe8019
entity.name.section#d79921
entity.other#b8bb26
entity.other.inherited-class#8ec07c
entity.other.attribute-name#83a598
keyword#fb4934
keyword.control, keyword.other.using, keyword.other.namespace#fb4934
keyword.operator, punctuation.accessor#8ec07c
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array, punctuation.separator.delimiter, punctuation.terminator#a89984
punctuation.section#a89984
markup.underline.link, meta.link.inline, meta.link.reference#83a598underline
markup.bold#fe8019bold
markup.heading, punctuation.definition.heading#b8bb26bold
heading.1.markdown entity.name.section.markdown#fb4934bold
heading.2.markdown entity.name.section.markdown#fe8019bold
heading.3.markdown entity.name.section.markdown#fabd2fbold
heading.4.markdown entity.name.section.markdown#b8bb26bold
heading.5.markdown entity.name.section.markdown#83a598
heading.6.markdown entity.name.section.markdown#d3869b
markup.quote.markdown#928374italic
punctuation.definition.list.begin.markdown#fb4934
fenced_code.block.language.markdown#fe8019
markup.strikethrough.markdown#928374strikethrough
markup.italic#fe8019italic
markup.inline.raw#8ec07c
markup.raw#8ec07c
punctuation.definition.markdown, punctuation.definition.raw.markdown, punctuation.separator.key-value.markdown#a89984
meta.class, meta.module-reference, meta.namespace#8ec07c
meta.preprocessor#fe8019
storage#fb4934
storage.type#fb4934
storage.modifier#fb4934
string#b8bb26
constant.character.escape#fe8019
support#8ec07c
support.function.builtin#fe8019
variable#83a598
variable.function#b8bb26
variable.other#83a598
variable.language#d3869b
variable.parameter#83a598
variable.other.property#83a598
support.type, support.class#8ec07c
support.other.variable#83a598
invalid.broken#cc241dbold italic underline
invalid.deprecated#d3869bbold italic underline
invalid.unimplemented#cc241dbold italic underline
message.error#cc241d
support.type.property-name.json, support.dictionary.json#b8bb26
entity.other.attribute-name.class#b8bb26
entity.name.tag.css#8ec07c
support.type.property-name#fe8019
entity.other.attribute-name.id.css#fabd2f
entity.other.attribute-name.pseudo-class.css#d3869b
support.constant.property-value.css#83a598
keyword.other.unit.css#d3869b
variable.css, variable.scss#83a598
keyword.other.important.css#fb4934bold
constant.other.caps.python, variable.parameter.function-call.python#d79921
variable.parameter.function.language.python#d3869b
meta.function-call.python#83a598
meta.function-call.generic.python#b8bb26
entity.name.function.decorator.python#fe8019
support.function.magic.python, support.variable.magic.python#8ec07c
variable.language.special.self.python#d3869bitalic
entity.name.type.class.python#8ec07c
entity.other.inherited-class.python#8ec07c
storage.type.function.python, storage.type.class.python#fb4934
meta.function.parameters.python#d3869b
meta.fstring.python#b8bb26
constant.character.format.placeholder.other.python#d3869b
keyword.control.import.python, keyword.control.from.python#fb4934
meta.function.return-type.python, meta.function.parameters.annotation.python#8ec07c
string.quoted.docstring.multi.python#928374italic
support.type.exception.python#fb4934
keyword.operator.logical.python#fb4934
variable.language.this.js, variable.language.this.ts, variable.language.this.jsx, variable.language.this.tsx#d3869bitalic
entity.name.function.js, entity.name.function.ts, entity.name.function.jsx, entity.name.function.tsx#b8bb26
entity.name.type.class.js, entity.name.type.class.ts, entity.name.type.class.jsx, entity.name.type.class.tsx#8ec07c
entity.name.type.module.js, entity.name.type.module.ts, entity.name.type.module.jsx, entity.name.type.module.tsx#8ec07c
keyword.control.js, keyword.control.ts, keyword.control.jsx, keyword.control.tsx#fb4934
storage.type.js, storage.type.ts, storage.type.jsx, storage.type.tsx#fb4934
keyword.control.import.js, keyword.control.export.js, keyword.control.import.ts, keyword.control.export.ts, keyword.control.import.jsx, keyword.control.export.jsx, keyword.control.import.tsx, keyword.control.export.tsx#8ec07c
entity.name.type.ts, entity.name.type.tsx#8ec07c
entity.name.type.interface.ts, entity.name.type.interface.tsx#8ec07c
entity.name.type.enum.ts, entity.name.type.enum.tsx#8ec07c
entity.name.type.parameter.ts, entity.name.type.parameter.tsx#d3869b
entity.name.tag.html, entity.name.tag.xml, entity.name.tag.jsx, entity.name.tag.tsx#fe8019
entity.other.attribute-name.html, entity.other.attribute-name.xml, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx#83a598
support.class.component.jsx, support.class.component.tsx#8ec07c
keyword.control.directive.define.c, keyword.control.directive.include.c, keyword.control.directive.ifdef.c, keyword.control.directive.ifndef.c, keyword.control.directive.endif.c, keyword.control.directive.undef.c, keyword.control.directive.conditional.c, keyword.control.directive.define.cpp, keyword.control.directive.include.cpp, keyword.control.directive.ifdef.cpp, keyword.control.directive.ifndef.cpp, keyword.control.directive.endif.cpp, keyword.control.directive.undef.cpp, keyword.control.directive.conditional.cpp, meta.preprocessor.c, meta.preprocessor.cpp#fe8019
entity.name.function.preprocessor.c, entity.name.function.preprocessor.cpp#fabd2f
string.quoted.other.lt-gt.include.c, string.quoted.other.lt-gt.include.cpp#b8bb26
storage.type.struct.c, storage.type.union.c, storage.type.enum.c, storage.type.struct.cpp, storage.type.union.cpp, storage.type.enum.cpp#8ec07c
keyword.operator.dereference.c, keyword.operator.address-of.c, keyword.operator.dereference.cpp, keyword.operator.address-of.cpp#d3869b
keyword.operator.sizeof.c, keyword.operator.alignof.c, keyword.operator.sizeof.cpp, keyword.operator.alignof.cpp#d3869b
entity.name.function.c, entity.name.function.cpp#b8bb26
punctuation.separator.dot-access.c, punctuation.separator.pointer-access.c, punctuation.separator.dot-access.cpp, punctuation.separator.pointer-access.cpp#a89984
text.tex keyword.control.preamble#fb4934
text.tex support.function.environment#8ec07c
text.tex support.function#b8bb26
text.tex keyword.control#fb4934
text.tex punctuation.definition.function.latex#fb4934
text.tex variable.parameter.function.latex#d3869b
text.tex string.other.math.latex#fabd2f
text.tex punctuation.definition.string.begin.latex, text.tex punctuation.definition.string.end.latex#d79921
text.tex string.quoted.double.latex, text.tex string.quoted.single.latex#b8bb26
text.tex constant.other.citation.latex#d3869b
text.tex constant.other.reference.latex#d3869b
text.tex comment.line.percentage.latex#928374italic
text.tex entity.name.section.latex#fabd2fbold
entity.name.package.go#8ec07c
entity.name.function.go#b8bb26
entity.name.type.go#8ec07c
entity.name.lifetime.rust#d3869b
entity.name.macro.rust#fe8019
entity.name.trait.rust#8ec07c
variable.other.readwrite.shell, variable.other.special.shell#83a598
entity.name.function.shell#b8bb26
keyword.control.shell#fb4934
keyword.operator.pipe.shell, keyword.operator.redirect.shell#fe8019
string.interpolated.backtick.shell, string.interpolated.dollar.shell#d3869b
support.function.builtin.shell#fe8019
string.unquoted.heredoc.shell#b8bb26
string.regexp#8ec07c
constant.other.character-class.regexp#d3869b
keyword.operator.quantifier.regexp#fabd2f
keyword.control.anchor.regexp#fb4934
entity.name.tag.yaml#fe8019
CoMPhy Color Theme Collection by Vatsal Sanjay - VS Code Theme