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#ad7fa810
  • activityBar.activeBorder#e858bc80
  • activityBar.background#20201e
  • activityBar.foreground#f3f3f3
  • activityBar.inactiveForeground#e95421
  • activityBarBadge.background#e858bc
  • activityBarBadge.foreground#f3f3f3
  • badge.background#ff8142
  • badge.foreground#f3f3f3
  • breadcrumb.activeSelectionForeground#f3f3f3
  • breadcrumb.background#191917
  • breadcrumb.focusForeground#f3f3f3
  • breadcrumb.foreground#e95421
  • breadcrumbPicker.background#302d2b
  • button.background#ff8142
  • button.foreground#f3f3f3
  • button.secondaryBackground#191917
  • button.secondaryForeground#f3f3f3
  • button.secondaryHoverBackground#20201e
  • debugToolBar.background#151413
  • diffEditor.insertedTextBackground#8fb04f20
  • diffEditor.removedTextBackground#e8585850
  • dropdown.background#20201e
  • dropdown.border#302d2b
  • dropdown.foreground#f3f3f3
  • editor.background#191917
  • editor.findMatchBackground#f27e2a80
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#ffffff15
  • editor.foldBackground#50cbc330
  • editor.foldPlaceholderForeground#e95421
  • editor.foreground#f3f3f3
  • editor.hoverHighlightBackground#50cbc350
  • editor.lineHighlightBorder#ff8142
  • editor.rangeHighlightBackground#ad7fa815
  • editor.selectionBackground#e9542150
  • editor.selectionHighlightBackground#5a5654
  • editor.snippetFinalTabstopHighlightBackground#191917
  • editor.snippetFinalTabstopHighlightBorder#8fb04f
  • editor.snippetTabstopHighlightBackground#191917
  • editor.snippetTabstopHighlightBorder#e95421
  • editor.wordHighlightBackground#50cbc350
  • editor.wordHighlightStrongBackground#8fb04f50
  • editorBracketHighlight.foreground1#f3f3f3
  • editorBracketHighlight.foreground2#e858bc
  • editorBracketHighlight.foreground3#50cbc3
  • editorBracketHighlight.foreground4#8fb04f
  • editorBracketHighlight.foreground5#ad7fa8
  • editorBracketHighlight.foreground6#f27e2a
  • editorBracketHighlight.unexpectedBracket.foreground#e85858
  • editorCodeLens.foreground#e95421
  • editorError.foreground#e85858
  • editorGroup.border#ad7fa8
  • editorGroup.dropBackground#26262670
  • editorGroupHeader.tabsBackground#302d2b
  • editorGutter.addedBackground#8fb04f80
  • editorGutter.deletedBackground#e8585880
  • editorGutter.modifiedBackground#50cbc380
  • editorHoverWidget.background#191917
  • editorHoverWidget.border#e95421
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff10
  • editorLineNumber.foreground#e95421
  • editorLink.activeForeground#50cbc3
  • editorMarkerNavigation.background#151413
  • editorOverviewRuler.addedForeground#8fb04f80
  • editorOverviewRuler.border#302d2b
  • editorOverviewRuler.currentContentForeground#8fb04f
  • editorOverviewRuler.deletedForeground#e8585880
  • editorOverviewRuler.errorForeground#e8585880
  • editorOverviewRuler.incomingContentForeground#ad7fa8
  • editorOverviewRuler.infoForeground#50cbc380
  • editorOverviewRuler.modifiedForeground#50cbc380
  • editorOverviewRuler.selectionHighlightForeground#f27e2a
  • editorOverviewRuler.warningForeground#f27e2a80
  • editorOverviewRuler.wordHighlightForeground#50cbc3
  • editorOverviewRuler.wordHighlightStrongForeground#8fb04f
  • editorRuler.foreground#ffffff10
  • editorSuggestWidget.background#151413
  • editorSuggestWidget.foreground#f3f3f3
  • editorSuggestWidget.selectedBackground#ff8142
  • editorWarning.foreground#50cbc3
  • editorWhitespace.foreground#ffffff10
  • editorWidget.background#151413
  • errorForeground#e85858
  • extensionButton.prominentBackground#8fb04f90
  • extensionButton.prominentForeground#f3f3f3
  • extensionButton.prominentHoverBackground#8fb04f60
  • focusBorder#e95421
  • foreground#f3f3f3
  • gitDecoration.conflictingResourceForeground#f27e2a
  • gitDecoration.deletedResourceForeground#e85858
  • gitDecoration.ignoredResourceForeground#e95421
  • gitDecoration.modifiedResourceForeground#50cbc3
  • gitDecoration.untrackedResourceForeground#8fb04f
  • inlineChat.regionHighlight#20201e
  • input.background#191917
  • input.border#302d2b
  • input.foreground#f3f3f3
  • input.placeholderForeground#e95421
  • inputOption.activeBorder#ad7fa8
  • inputValidation.errorBorder#e85858
  • inputValidation.infoBorder#e858bc
  • inputValidation.warningBorder#f27e2a
  • list.activeSelectionBackground#ff8142
  • list.activeSelectionForeground#f3f3f3
  • list.dropBackground#ff8142
  • list.errorForeground#e85858
  • list.focusBackground#ffffff15
  • list.highlightForeground#50cbc3
  • list.hoverBackground#ffffff15
  • list.inactiveSelectionBackground#ffffff15
  • list.warningForeground#f27e2a
  • listFilterWidget.background#20201e
  • listFilterWidget.noMatchesOutline#e85858
  • listFilterWidget.outline#5a5654
  • merge.currentHeaderBackground#8fb04f90
  • merge.incomingHeaderBackground#ad7fa890
  • panel.background#191917
  • panel.border#ad7fa8
  • panelTitle.activeBorder#e858bc
  • panelTitle.activeForeground#f3f3f3
  • panelTitle.inactiveForeground#e95421
  • peekView.border#ff8142
  • peekViewEditor.background#191917
  • peekViewEditor.matchHighlightBackground#f2c55c80
  • peekViewResult.background#151413
  • peekViewResult.fileForeground#f3f3f3
  • peekViewResult.lineForeground#f3f3f3
  • peekViewResult.matchHighlightBackground#f2c55c80
  • peekViewResult.selectionBackground#ff8142
  • peekViewResult.selectionForeground#f3f3f3
  • peekViewTitle.background#302d2b
  • peekViewTitleDescription.foreground#e95421
  • peekViewTitleLabel.foreground#f3f3f3
  • pickerGroup.border#ad7fa8
  • pickerGroup.foreground#50cbc3
  • progressBar.background#e858bc
  • selection.background#ad7fa8
  • settings.checkboxBackground#151413
  • settings.checkboxBorder#302d2b
  • settings.checkboxForeground#f3f3f3
  • settings.dropdownBackground#151413
  • settings.dropdownBorder#302d2b
  • settings.dropdownForeground#f3f3f3
  • settings.headerForeground#f3f3f3
  • settings.modifiedItemIndicator#f27e2a
  • settings.numberInputBackground#151413
  • settings.numberInputBorder#302d2b
  • settings.numberInputForeground#f3f3f3
  • settings.textInputBackground#151413
  • settings.textInputBorder#302d2b
  • settings.textInputForeground#f3f3f3
  • sideBar.background#151413
  • sideBarSectionHeader.background#191917
  • sideBarSectionHeader.border#302d2b
  • sideBarTitle.foreground#f3f3f3
  • statusBar.background#302d2b
  • statusBar.debuggingBackground#e85858
  • statusBar.debuggingForeground#302d2b
  • statusBar.foreground#f3f3f3
  • statusBar.noFolderBackground#302d2b
  • statusBar.noFolderForeground#f3f3f3
  • statusBarItem.prominentBackground#e85858
  • statusBarItem.prominentHoverBackground#f27e2a
  • statusBarItem.remoteBackground#ad7fa8
  • statusBarItem.remoteForeground#191917
  • tab.activeBackground#191917
  • tab.activeBorderTop#e858bc80
  • tab.activeForeground#f3f3f3
  • tab.border#302d2b
  • tab.inactiveBackground#151413
  • tab.inactiveForeground#e95421
  • terminal.ansiBlack#1f2328
  • terminal.ansiBlue#1e90ff
  • terminal.ansiBrightBlack#808080
  • terminal.ansiBrightBlue#42a5f5
  • terminal.ansiBrightCyan#4dd0e1
  • terminal.ansiBrightGreen#4ee44e
  • terminal.ansiBrightMagenta#ff80ab
  • terminal.ansiBrightRed#ff5e26
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffeb3b
  • terminal.ansiCyan#00ced1
  • terminal.ansiGreen#32cd32
  • terminal.ansiMagenta#ff69b4
  • terminal.ansiRed#ff8142
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffd700
  • terminal.background#191917
  • terminal.foreground#f3f3f3
  • titleBar.activeBackground#151413
  • titleBar.activeForeground#f3f3f3
  • titleBar.inactiveBackground#302d2b
  • titleBar.inactiveForeground#e95421
  • walkThrough.embeddedEditorBackground#151413

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#ad7fa8
meta.diff, meta.diff.header#e95421
markup.inserted#8fb04f
markup.deleted#e85858
markup.changed#f27e2a
invalid#e85858underline italic
invalid.deprecated#f3f3f3underline italic
entity.name.filename#f2c55c
markup.error#e85858
markup.underlineunderline
markup.bold#f27e2abold
markup.heading#ad7fa8bold
markup.italic#f2c55citalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#50cbc3
markup.inline.raw, markup.raw.restructuredtext#8fb04f
markup.underline.link, markup.underline.link.image#50cbc3
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#e858bc
entity.name.directive.restructuredtext, markup.quote#f2c55citalic
meta.separator.markdown#e95421
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#8fb04f
punctuation.definition.constant.restructuredtext#ad7fa8
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#ad7fa8
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#f3f3f3
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#f2c55c
entity.name.type.class, entity.name.class#50cbc3normal
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#ad7fa8italic
entity.other.inherited-class#50cbc3italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#e95421
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#e858bc
comment.block.documentation entity.name.type#50cbc3italic
comment.block.documentation entity.name.type punctuation.definition.bracket#50cbc3
comment.block.documentation variable#f27e2aitalic
constant, variable.other.constant#ad7fa8
constant.character.escape, constant.character.string.escape, constant.regexp#e858bc
entity.name.tag#e858bc
entity.other.attribute-name.parent-selector#e858bc
entity.other.attribute-name#8fb04fitalic
entity.name.function, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#8fb04f
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#f27e2aitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#8fb04fitalic
meta.decorator variable.other.object#8fb04f
keyword, punctuation.definition.keyword#e858bc
keyword.control.new, keyword.operator.newbold
meta.selector#e858bc
support#50cbc3italic
support.function.magic, support.variable, variable.other.predefined#ad7fa8regular
support.function, support.type.property-nameregular
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#e858bc
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#f3f3f3
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile#e858bc
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#50cbc3
constant.other.date, constant.other.timestamp#f27e2a
variable.other.alias.yaml#8fb04fitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#e858bcregular
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml#50cbc3italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#f27e2a
storage.modifier#e858bc
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#f2c55c
punctuation.definition.group.capture.regexp#e858bc
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#e85858
punctuation.definition.character-class.regexp#50cbc3
punctuation.definition.group.regexp#f27e2a
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#e85858
meta.assertion.look-ahead.regexp#8fb04f
string#f2c55c
punctuation.definition.string.begin, punctuation.definition.string.end#ff8142
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#d4d4d4
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape#e95421
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#f3f3f3
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#f27e2aitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#f3f3f3normal
meta.selectionset.graphql variable#f2c55c
meta.selectionset.graphql meta.arguments variable#f3f3f3
entity.name.fragment.graphql, variable.fragment.graphql#50cbc3
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell#f3f3f3
source.shell variable.other#ad7fa8
support.constant#ad7fa8normal
meta.scope.prerequisites.makefile#f2c55c
meta.attribute-selector.scss#f2c55c
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#f3f3f3
meta.preprocessor.haskell#e95421
log.error#e85858bold
log.warning#f2c55cbold
Humans Theme by Ender Bonnet - VS Code Theme