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#9059ff10
  • activityBar.activeBorder#ff59f980
  • activityBar.background#3c4852
  • activityBar.foreground#e9eaec
  • activityBar.inactiveForeground#81a0c1
  • activityBarBadge.background#ee6aea
  • activityBarBadge.foreground#e9eaec
  • badge.background#46545e
  • badge.foreground#e9eaec
  • breadcrumb.activeSelectionForeground#e9eaec
  • breadcrumb.background#2f2f2f
  • breadcrumb.focusForeground#e9eaec
  • breadcrumb.foreground#81a0c1
  • breadcrumbPicker.background#20262b
  • button.background#46545e
  • button.foreground#e9eaec
  • button.secondaryBackground#2f2f2f
  • button.secondaryForeground#e9eaec
  • button.secondaryHoverBackground#3c4852
  • debugToolBar.background#2f3940
  • diffEditor.insertedTextBackground#59ff5920
  • diffEditor.removedTextBackground#ff595950
  • dropdown.background#3c4852
  • dropdown.border#20262b
  • dropdown.foreground#e9eaec
  • editor.background#2f2f2f
  • editor.findMatchBackground#ff9c5980
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#2f3940
  • editor.foreground#e9eaec
  • editor.hoverHighlightBackground#59fff950
  • editor.lineHighlightBorder#46545e
  • editor.rangeHighlightBackground#9059ff15
  • editor.selectionBackground#46545e
  • editor.selectionHighlightBackground#46545e
  • editor.snippetFinalTabstopHighlightBackground#2f2f2f
  • editor.snippetFinalTabstopHighlightBorder#6aee6a
  • editor.snippetTabstopHighlightBackground#2f2f2f
  • editor.snippetTabstopHighlightBorder#81a0c1
  • editor.wordHighlightBackground#59fff950
  • editor.wordHighlightStrongBackground#59ff5950
  • editorBracketHighlight.foreground1#e9eaec
  • editorBracketHighlight.foreground2#ee6aea
  • editorBracketHighlight.foreground3#6aeeea
  • editorBracketHighlight.foreground4#6aee6a
  • editorBracketHighlight.foreground5#966aee
  • editorBracketHighlight.foreground6#ff9c59
  • editorBracketHighlight.unexpectedBracket.foreground#ee6a6a
  • editorCodeLens.foreground#81a0c1
  • editorError.foreground#ee6a6a
  • editorGroup.border#966aee
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#20262b
  • editorGutter.addedBackground#59ff5980
  • editorGutter.deletedBackground#ff595980
  • editorGutter.modifiedBackground#59fff980
  • editorHoverWidget.background#2f2f2f
  • editorHoverWidget.border#81a0c1
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#81a0c1
  • editorLink.activeForeground#6aeeea
  • editorMarkerNavigation.background#2f3940
  • editorOverviewRuler.addedForeground#59ff5980
  • editorOverviewRuler.border#20262b
  • editorOverviewRuler.currentContentForeground#6aee6a
  • editorOverviewRuler.deletedForeground#ff595980
  • editorOverviewRuler.errorForeground#ff595980
  • editorOverviewRuler.incomingContentForeground#966aee
  • editorOverviewRuler.infoForeground#59fff980
  • editorOverviewRuler.modifiedForeground#59fff980
  • editorOverviewRuler.selectionHighlightForeground#ff9c59
  • editorOverviewRuler.warningForeground#ff9c5980
  • editorOverviewRuler.wordHighlightForeground#6aeeea
  • editorOverviewRuler.wordHighlightStrongForeground#6aee6a
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#2f3940
  • editorSuggestWidget.foreground#e9eaec
  • editorSuggestWidget.selectedBackground#46545e
  • editorWarning.foreground#6aeeea
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#2f3940
  • errorForeground#ee6a6a
  • extensionButton.prominentBackground#59ff5990
  • extensionButton.prominentForeground#e9eaec
  • extensionButton.prominentHoverBackground#59ff5960
  • focusBorder#81a0c1
  • foreground#e9eaec
  • gitDecoration.conflictingResourceForeground#ff9c59
  • gitDecoration.deletedResourceForeground#ee6a6a
  • gitDecoration.ignoredResourceForeground#81a0c1
  • gitDecoration.modifiedResourceForeground#6aeeea
  • gitDecoration.untrackedResourceForeground#6aee6a
  • input.background#2f2f2f
  • input.border#20262b
  • input.foreground#e9eaec
  • input.placeholderForeground#81a0c1
  • inputOption.activeBorder#966aee
  • inputValidation.errorBorder#ee6a6a
  • inputValidation.infoBorder#ee6aea
  • inputValidation.warningBorder#ff9c59
  • list.activeSelectionBackground#46545e
  • list.activeSelectionForeground#e9eaec
  • list.dropBackground#46545e
  • list.errorForeground#ee6a6a
  • list.focusBackground#44475A75
  • list.highlightForeground#6aeeea
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#ff9c59
  • listFilterWidget.background#3c4852
  • listFilterWidget.noMatchesOutline#ee6a6a
  • listFilterWidget.outline#46545e
  • merge.currentHeaderBackground#59ff5990
  • merge.incomingHeaderBackground#9059ff90
  • panel.background#2f2f2f
  • panel.border#966aee
  • panelTitle.activeBorder#ee6aea
  • panelTitle.activeForeground#e9eaec
  • panelTitle.inactiveForeground#81a0c1
  • peekView.border#46545e
  • peekViewEditor.background#2f2f2f
  • peekViewEditor.matchHighlightBackground#ffff5980
  • peekViewResult.background#2f3940
  • peekViewResult.fileForeground#e9eaec
  • peekViewResult.lineForeground#e9eaec
  • peekViewResult.matchHighlightBackground#ffff5980
  • peekViewResult.selectionBackground#46545e
  • peekViewResult.selectionForeground#e9eaec
  • peekViewTitle.background#20262b
  • peekViewTitleDescription.foreground#81a0c1
  • peekViewTitleLabel.foreground#e9eaec
  • pickerGroup.border#966aee
  • pickerGroup.foreground#6aeeea
  • progressBar.background#ee6aea
  • selection.background#966aee
  • settings.checkboxBackground#2f3940
  • settings.checkboxBorder#20262b
  • settings.checkboxForeground#e9eaec
  • settings.dropdownBackground#2f3940
  • settings.dropdownBorder#20262b
  • settings.dropdownForeground#e9eaec
  • settings.headerForeground#e9eaec
  • settings.modifiedItemIndicator#ff9c59
  • settings.numberInputBackground#2f3940
  • settings.numberInputBorder#20262b
  • settings.numberInputForeground#e9eaec
  • settings.textInputBackground#2f3940
  • settings.textInputBorder#20262b
  • settings.textInputForeground#e9eaec
  • sideBar.background#2f3940
  • sideBarSectionHeader.background#2f2f2f
  • sideBarSectionHeader.border#20262b
  • sideBarTitle.foreground#e9eaec
  • statusBar.background#20262b
  • statusBar.debuggingBackground#ee6a6a
  • statusBar.debuggingForeground#20262b
  • statusBar.foreground#e9eaec
  • statusBar.noFolderBackground#20262b
  • statusBar.noFolderForeground#e9eaec
  • statusBarItem.prominentBackground#ee6a6a
  • statusBarItem.prominentHoverBackground#ff9c59
  • statusBarItem.remoteBackground#966aee
  • statusBarItem.remoteForeground#2f2f2f
  • tab.activeBackground#2f2f2f
  • tab.activeBorderTop#ff59f980
  • tab.activeForeground#e9eaec
  • tab.border#20262b
  • tab.inactiveBackground#2f3940
  • tab.inactiveForeground#81a0c1
  • terminal.ansiBlack#2f2f2f
  • terminal.ansiBlue#966aee
  • terminal.ansiBrightBlack#505050
  • terminal.ansiBrightBlue#c8aff6
  • terminal.ansiBrightCyan#aff6f4
  • terminal.ansiBrightGreen#aff6af
  • terminal.ansiBrightMagenta#f6aff4
  • terminal.ansiBrightRed#f6afaf
  • terminal.ansiBrightWhite#e9eaec
  • terminal.ansiBrightYellow#f6f6af
  • terminal.ansiCyan#6aeeea
  • terminal.ansiGreen#6aee6a
  • terminal.ansiMagenta#ee6aea
  • terminal.ansiRed#ee6a6a
  • terminal.ansiWhite#e9eaec
  • terminal.ansiYellow#eeee6a
  • terminal.background#2f2f2f
  • terminal.foreground#e9eaec
  • titleBar.activeBackground#2f3940
  • titleBar.activeForeground#e9eaec
  • titleBar.inactiveBackground#20262b
  • titleBar.inactiveForeground#81a0c1
  • walkThrough.embeddedEditorBackground#2f3940

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#966aee—
meta.diff, meta.diff.header#81a0c1—
markup.inserted#6aee6a—
markup.deleted#ee6a6a—
markup.changed#ff9c59—
invalid#ee6a6aunderline italic
invalid.deprecated#e9eaecunderline italic
entity.name.filename#eeee6a—
markup.error#ee6a6a—
markup.underline—underline
markup.bold#ff9c59bold
markup.heading#966aeebold
markup.italic#eeee6aitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#6aeeea—
markup.inline.raw, markup.raw.restructuredtext#6aee6a—
markup.underline.link, markup.underline.link.image#6aeeea—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ee6aea—
entity.name.directive.restructuredtext, markup.quote#eeee6aitalic
meta.separator.markdown#81a0c1—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#6aee6a—
punctuation.definition.constant.restructuredtext#966aee—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#966aee—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#e9eaec—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#eeee6a—
entity.name.type.class, entity.name.class#6aeeeanormal
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#966aeeitalic
entity.other.inherited-class#6aeeeaitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#81a0c1—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ee6aea—
comment.block.documentation entity.name.type#6aeeeaitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#6aeeea—
comment.block.documentation variable#ff9c59italic
constant, variable.other.constant#966aee—
constant.character.escape, constant.character.string.escape, constant.regexp#ee6aea—
entity.name.tag#ee6aea—
entity.other.attribute-name.parent-selector#ee6aea—
entity.other.attribute-name#6aee6aitalic
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#6aee6a—
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#ff9c59italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#6aee6aitalic
meta.decorator variable.other.object#6aee6a—
keyword, punctuation.definition.keyword#ee6aea—
keyword.control.new, keyword.operator.new—bold
meta.selector#ee6aea—
support#6aeeeaitalic
support.function.magic, support.variable, variable.other.predefined#966aeeregular
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#ee6aea—
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, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#e9eaec—
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#ee6aea—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#6aeeea—
constant.other.date, constant.other.timestamp#ff9c59—
variable.other.alias.yaml#6aee6aitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ee6aearegular
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#6aeeeaitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ff9c59—
storage.modifier#ee6aea—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#eeee6a—
punctuation.definition.group.capture.regexp#ee6aea—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ee6a6a—
punctuation.definition.character-class.regexp#6aeeea—
punctuation.definition.group.regexp#ff9c59—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ee6a6a—
meta.assertion.look-ahead.regexp#6aee6a—
string#eeee6a—
punctuation.definition.string.begin, punctuation.definition.string.end#f6f6af—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#aff6f4—
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#81a0c1—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#e9eaec—
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#ff9c59italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#e9eaecnormal
meta.selectionset.graphql variable#eeee6a—
meta.selectionset.graphql meta.arguments variable#e9eaec—
entity.name.fragment.graphql, variable.fragment.graphql#6aeeea—
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#e9eaec—
source.shell variable.other#966aee—
support.constant#966aeenormal
meta.scope.prerequisites.makefile#eeee6a—
meta.attribute-selector.scss#eeee6a—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#e9eaec—
meta.preprocessor.haskell#81a0c1—
log.error#ee6a6abold
log.warning#eeee6abold
Minimal-Mistakes Official by TheRepoClub - VS Code Theme