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#9B8AE010
  • activityBar.activeBorder#CF6B8E80
  • activityBar.background#142C22
  • activityBar.foreground#F0F5F1
  • activityBar.inactiveForeground#5A8F70
  • activityBarBadge.background#CF6B8E
  • activityBarBadge.foreground#F0F5F1
  • badge.background#1C3A2D
  • badge.foreground#F0F5F1
  • breadcrumb.activeSelectionForeground#F0F5F1
  • breadcrumb.background#0D1F17
  • breadcrumb.focusForeground#F0F5F1
  • breadcrumb.foreground#5A8F70
  • breadcrumbPicker.background#06110C
  • button.background#1C3A2D
  • button.foreground#F0F5F1
  • button.secondaryBackground#0D1F17
  • button.secondaryForeground#F0F5F1
  • button.secondaryHoverBackground#142C22
  • debugToolBar.background#0A1812
  • diffEditor.insertedTextBackground#33B07420
  • diffEditor.removedTextBackground#E05D5750
  • dropdown.background#142C22
  • dropdown.border#06110C
  • dropdown.foreground#F0F5F1
  • editor.background#0D1F17
  • editor.findMatchBackground#E8A84C80
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#1C3A2D75
  • editor.foldBackground#0A181280
  • editor.foreground#F0F5F1
  • editor.hoverHighlightBackground#3ECF8E50
  • editor.lineHighlightBorder#1C3A2D
  • editor.rangeHighlightBackground#9B8AE015
  • editor.selectionBackground#1C3A2D
  • editor.selectionHighlightBackground#1C3A2D
  • editor.snippetFinalTabstopHighlightBackground#0D1F17
  • editor.snippetFinalTabstopHighlightBorder#33B074
  • editor.snippetTabstopHighlightBackground#0D1F17
  • editor.snippetTabstopHighlightBorder#5A8F70
  • editor.wordHighlightBackground#3ECF8E50
  • editor.wordHighlightStrongBackground#33B07450
  • editorBracketHighlight.foreground1#F0F5F1
  • editorBracketHighlight.foreground2#CF6B8E
  • editorBracketHighlight.foreground3#3ECF8E
  • editorBracketHighlight.foreground4#33B074
  • editorBracketHighlight.foreground5#9B8AE0
  • editorBracketHighlight.foreground6#E8A84C
  • editorBracketHighlight.unexpectedBracket.foreground#E05D57
  • editorCodeLens.foreground#5A8F70
  • editorError.foreground#E05D57
  • editorGroup.border#9B8AE0
  • editorGroup.dropBackground#1C3A2D70
  • editorGroupHeader.tabsBackground#06110C
  • editorGutter.addedBackground#33B07480
  • editorGutter.deletedBackground#E05D5780
  • editorGutter.modifiedBackground#3ECF8E80
  • editorHoverWidget.background#0D1F17
  • editorHoverWidget.border#5A8F70
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#5A8F70
  • editorLink.activeForeground#3ECF8E
  • editorMarkerNavigation.background#0A1812
  • editorOverviewRuler.addedForeground#33B07480
  • editorOverviewRuler.border#06110C
  • editorOverviewRuler.currentContentForeground#33B074
  • editorOverviewRuler.deletedForeground#E05D5780
  • editorOverviewRuler.errorForeground#E05D5780
  • editorOverviewRuler.incomingContentForeground#9B8AE0
  • editorOverviewRuler.infoForeground#3ECF8E80
  • editorOverviewRuler.modifiedForeground#3ECF8E80
  • editorOverviewRuler.selectionHighlightForeground#E8A84C
  • editorOverviewRuler.warningForeground#E8A84C80
  • editorOverviewRuler.wordHighlightForeground#3ECF8E
  • editorOverviewRuler.wordHighlightStrongForeground#33B074
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#0A1812
  • editorSuggestWidget.foreground#F0F5F1
  • editorSuggestWidget.selectedBackground#1C3A2D
  • editorWarning.foreground#3ECF8E
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#0A1812
  • errorForeground#E05D57
  • extensionButton.prominentBackground#33B07490
  • extensionButton.prominentForeground#F0F5F1
  • extensionButton.prominentHoverBackground#33B07460
  • focusBorder#5A8F70
  • foreground#F0F5F1
  • gitDecoration.conflictingResourceForeground#E8A84C
  • gitDecoration.deletedResourceForeground#E05D57
  • gitDecoration.ignoredResourceForeground#5A8F70
  • gitDecoration.modifiedResourceForeground#3ECF8E
  • gitDecoration.untrackedResourceForeground#33B074
  • inlineChat.regionHighlight#142C22
  • input.background#0D1F17
  • input.border#06110C
  • input.foreground#F0F5F1
  • input.placeholderForeground#5A8F70
  • inputOption.activeBorder#9B8AE0
  • inputValidation.errorBorder#E05D57
  • inputValidation.infoBorder#CF6B8E
  • inputValidation.warningBorder#E8A84C
  • list.activeSelectionBackground#1C3A2D
  • list.activeSelectionForeground#F0F5F1
  • list.dropBackground#1C3A2D
  • list.errorForeground#E05D57
  • list.focusBackground#1C3A2D75
  • list.highlightForeground#3ECF8E
  • list.hoverBackground#1C3A2D75
  • list.inactiveSelectionBackground#1C3A2D75
  • list.warningForeground#E8A84C
  • listFilterWidget.background#142C22
  • listFilterWidget.noMatchesOutline#E05D57
  • listFilterWidget.outline#1C3A2D
  • merge.currentHeaderBackground#33B07490
  • merge.incomingHeaderBackground#9B8AE090
  • panel.background#0D1F17
  • panel.border#9B8AE0
  • panelTitle.activeBorder#CF6B8E
  • panelTitle.activeForeground#F0F5F1
  • panelTitle.inactiveForeground#5A8F70
  • peekView.border#1C3A2D
  • peekViewEditor.background#0D1F17
  • peekViewEditor.matchHighlightBackground#E0D94C80
  • peekViewResult.background#0A1812
  • peekViewResult.fileForeground#F0F5F1
  • peekViewResult.lineForeground#F0F5F1
  • peekViewResult.matchHighlightBackground#E0D94C80
  • peekViewResult.selectionBackground#1C3A2D
  • peekViewResult.selectionForeground#F0F5F1
  • peekViewTitle.background#06110C
  • peekViewTitleDescription.foreground#5A8F70
  • peekViewTitleLabel.foreground#F0F5F1
  • pickerGroup.border#9B8AE0
  • pickerGroup.foreground#3ECF8E
  • progressBar.background#CF6B8E
  • selection.background#9B8AE0
  • settings.checkboxBackground#0A1812
  • settings.checkboxBorder#06110C
  • settings.checkboxForeground#F0F5F1
  • settings.dropdownBackground#0A1812
  • settings.dropdownBorder#06110C
  • settings.dropdownForeground#F0F5F1
  • settings.headerForeground#F0F5F1
  • settings.modifiedItemIndicator#E8A84C
  • settings.numberInputBackground#0A1812
  • settings.numberInputBorder#06110C
  • settings.numberInputForeground#F0F5F1
  • settings.textInputBackground#0A1812
  • settings.textInputBorder#06110C
  • settings.textInputForeground#F0F5F1
  • sideBar.background#0A1812
  • sideBarSectionHeader.background#0D1F17
  • sideBarSectionHeader.border#06110C
  • sideBarTitle.foreground#F0F5F1
  • statusBar.background#06110C
  • statusBar.debuggingBackground#E05D57
  • statusBar.debuggingForeground#06110C
  • statusBar.foreground#F0F5F1
  • statusBar.noFolderBackground#06110C
  • statusBar.noFolderForeground#F0F5F1
  • statusBarItem.prominentBackground#E05D57
  • statusBarItem.prominentHoverBackground#E8A84C
  • statusBarItem.remoteBackground#9B8AE0
  • statusBarItem.remoteForeground#0D1F17
  • tab.activeBackground#0D1F17
  • tab.activeBorderTop#CF6B8E80
  • tab.activeForeground#F0F5F1
  • tab.border#06110C
  • tab.inactiveBackground#0A1812
  • tab.inactiveForeground#5A8F70
  • terminal.ansiBlack#0A1812
  • terminal.ansiBlue#9B8AE0
  • terminal.ansiBrightBlack#5A8F70
  • terminal.ansiBrightBlue#B0A0F0
  • terminal.ansiBrightCyan#5EDAD0
  • terminal.ansiBrightGreen#3ECF8E
  • terminal.ansiBrightMagenta#D880A0
  • terminal.ansiBrightRed#E87872
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#E8E066
  • terminal.ansiCyan#3ECF8E
  • terminal.ansiGreen#33B074
  • terminal.ansiMagenta#CF6B8E
  • terminal.ansiRed#E05D57
  • terminal.ansiWhite#F0F5F1
  • terminal.ansiYellow#E0D94C
  • terminal.background#0D1F17
  • terminal.foreground#F0F5F1
  • titleBar.activeBackground#0A1812
  • titleBar.activeForeground#F0F5F1
  • titleBar.inactiveBackground#06110C
  • titleBar.inactiveForeground#5A8F70
  • walkThrough.embeddedEditorBackground#0A1812

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#9B8AE0—
meta.diff, meta.diff.header#5A8F70—
markup.inserted#33B074—
markup.deleted#E05D57—
markup.changed#E8A84C—
invalid#E05D57underline italic
invalid.deprecated#F0F5F1underline italic
entity.name.filename#E0D94C—
markup.error#E05D57—
markup.underline—underline
markup.bold#E8A84Cbold
markup.heading#9B8AE0bold
markup.italic#E0D94Citalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#3ECF8E—
markup.inline.raw, markup.raw.restructuredtext#33B074—
markup.underline.link, markup.underline.link.image#3ECF8E—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#CF6B8E—
entity.name.directive.restructuredtext, markup.quote#E0D94Citalic
meta.separator.markdown#5A8F70—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#33B074—
punctuation.definition.constant.restructuredtext#9B8AE0—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#9B8AE0—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#F0F5F1—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#E0D94C—
entity.name.type.class, entity.name.class#3ECF8Enormal
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#9B8AE0italic
entity.other.inherited-class#3ECF8Eitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#5A8F70—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#CF6B8E—
comment.block.documentation entity.name.type#3ECF8Eitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#3ECF8E—
comment.block.documentation variable#E8A84Citalic
constant, variable.other.constant#9B8AE0—
constant.character.escape, constant.character.string.escape, constant.regexp#CF6B8E—
entity.name.tag#CF6B8E—
entity.other.attribute-name.parent-selector#CF6B8E—
entity.other.attribute-name#33B074italic
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#33B074—
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#E8A84Citalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#33B074italic
meta.decorator variable.other.object#33B074—
keyword, punctuation.definition.keyword#CF6B8E—
keyword.control.new, keyword.operator.new—bold
meta.selector#CF6B8E—
support#3ECF8Eitalic
support.function.magic, support.variable, variable.other.predefined#9B8AE0regular
support.function, support.type.property-name—regular
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#CF6B8E—
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#F0F5F1—
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#CF6B8E—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#3ECF8E—
constant.other.date, constant.other.timestamp#E8A84C—
variable.other.alias.yaml#33B074italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#CF6B8Eregular
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#3ECF8Eitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E8A84C—
storage.modifier#CF6B8E—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#E0D94C—
punctuation.definition.group.capture.regexp#CF6B8E—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#E05D57—
punctuation.definition.character-class.regexp#3ECF8E—
punctuation.definition.group.regexp#E8A84C—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#E05D57—
meta.assertion.look-ahead.regexp#33B074—
string#E0D94C—
punctuation.definition.string.begin, punctuation.definition.string.end#E8E066—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#5EDAD0—
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#5A8F70—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#F0F5F1—
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#E8A84Citalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#F0F5F1normal
meta.selectionset.graphql variable#E0D94C—
meta.selectionset.graphql meta.arguments variable#F0F5F1—
entity.name.fragment.graphql, variable.fragment.graphql#3ECF8E—
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#F0F5F1—
source.shell variable.other#9B8AE0—
support.constant#9B8AE0normal
meta.scope.prerequisites.makefile#E0D94C—
meta.attribute-selector.scss#E0D94C—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#F0F5F1—
meta.preprocessor.haskell#5A8F70—
log.error#E05D57bold
log.warning#E0D94Cbold
Supabase Theme by Ender Bonnet - VS Code Theme