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#11111110
  • activityBar.activeBorder#d7d7d780
  • activityBar.background#fffffa
  • activityBar.foreground#111111
  • activityBar.inactiveForeground#d7d7d7
  • activityBarBadge.background#d7d7d7
  • activityBarBadge.foreground#111111
  • badge.background#fcfaf0
  • badge.foreground#111111
  • breadcrumb.activeSelectionForeground#111111
  • breadcrumb.background#fffffa
  • breadcrumb.focusForeground#111111
  • breadcrumb.foreground#d7d7d7
  • breadcrumbPicker.background#fffffa
  • button.background#fcfaf0
  • button.foreground#111111
  • button.secondaryBackground#fffffa
  • button.secondaryForeground#111111
  • button.secondaryHoverBackground#fffffa
  • debugToolBar.background#fffffa
  • diffEditor.insertedTextBackground#60606020
  • diffEditor.removedTextBackground#11111150
  • dropdown.background#fffffa
  • dropdown.border#fffffa
  • dropdown.foreground#111111
  • editor.background#fffffa
  • editor.findMatchBackground#b0b0b080
  • editor.findMatchHighlightBackground#fffffa40
  • editor.findRangeHighlightBackground#fcfaf0
  • editor.foldBackground#fcfaf080
  • editor.foreground#111111
  • editor.hoverHighlightBackground#11111150
  • editor.lineHighlightBackground#fcfaf0
  • editor.rangeHighlightBackground#11111115
  • editor.selectionBackground#fcfaf0
  • editor.selectionHighlightBackground#fcfaf0
  • editor.snippetFinalTabstopHighlightBackground#fffffa
  • editor.snippetFinalTabstopHighlightBorder#606060
  • editor.snippetTabstopHighlightBackground#fffffa
  • editor.snippetTabstopHighlightBorder#d7d7d7
  • editor.wordHighlightBackground#11111150
  • editor.wordHighlightStrongBackground#60606050
  • editorBracketHighlight.foreground1#111111
  • editorBracketHighlight.foreground2#d7d7d7
  • editorBracketHighlight.foreground3#111111
  • editorBracketHighlight.foreground4#606060
  • editorBracketHighlight.foreground5#111111
  • editorBracketHighlight.foreground6#b0b0b0
  • editorBracketHighlight.unexpectedBracket.foreground#111111
  • editorCodeLens.foreground#d7d7d7
  • editorError.foreground#111111
  • editorGroup.border#111111
  • editorGroup.dropBackground#d7d7d7
  • editorGroupHeader.tabsBackground#fffffa
  • editorGutter.addedBackground#60606080
  • editorGutter.deletedBackground#11111180
  • editorGutter.modifiedBackground#11111180
  • editorHoverWidget.background#fffffa
  • editorHoverWidget.border#d7d7d7
  • editorIndentGuide.activeBackground#fffffa45
  • editorIndentGuide.background#fffffa
  • editorLineNumber.activeForeground#d7d7d7
  • editorLineNumber.foreground#d7d7d7
  • editorLink.activeForeground#111111
  • editorMarkerNavigation.background#fffffa
  • editorOverviewRuler.addedForeground#60606080
  • editorOverviewRuler.border#fffffa
  • editorOverviewRuler.currentContentForeground#606060
  • editorOverviewRuler.deletedForeground#11111180
  • editorOverviewRuler.errorForeground#11111180
  • editorOverviewRuler.incomingContentForeground#111111
  • editorOverviewRuler.infoForeground#11111180
  • editorOverviewRuler.modifiedForeground#11111180
  • editorOverviewRuler.selectionHighlightForeground#b0b0b0
  • editorOverviewRuler.warningForeground#b0b0b080
  • editorOverviewRuler.wordHighlightForeground#111111
  • editorOverviewRuler.wordHighlightStrongForeground#606060
  • editorRuler.foreground#fffffa
  • editorSuggestWidget.background#fffffa
  • editorSuggestWidget.foreground#111111
  • editorSuggestWidget.selectedBackground#fcfaf0
  • editorWarning.foreground#111111
  • editorWhitespace.foreground#fffffa
  • editorWidget.background#fffffa
  • errorForeground#111111
  • extensionButton.prominentBackground#60606090
  • extensionButton.prominentForeground#111111
  • extensionButton.prominentHoverBackground#60606060
  • focusBorder#d7d7d7
  • foreground#111111
  • gitDecoration.conflictingResourceForeground#b0b0b0
  • gitDecoration.deletedResourceForeground#111111
  • gitDecoration.ignoredResourceForeground#d7d7d7
  • gitDecoration.modifiedResourceForeground#111111
  • gitDecoration.untrackedResourceForeground#606060
  • input.background#fffffa
  • input.border#fffffa
  • input.foreground#111111
  • input.placeholderForeground#d7d7d7
  • inputOption.activeBorder#111111
  • inputValidation.errorBorder#111111
  • inputValidation.infoBorder#d7d7d7
  • inputValidation.warningBorder#b0b0b0
  • list.activeSelectionBackground#fcfaf0
  • list.activeSelectionForeground#111111
  • list.dropBackground#fcfaf0
  • list.errorForeground#111111
  • list.focusBackground#fcfaf0
  • list.highlightForeground#111111
  • list.hoverBackground#fcfaf0
  • list.inactiveSelectionBackground#fcfaf0
  • list.warningForeground#b0b0b0
  • listFilterWidget.background#fffffa
  • listFilterWidget.noMatchesOutline#111111
  • listFilterWidget.outline#fffffa
  • merge.currentHeaderBackground#60606090
  • merge.incomingHeaderBackground#11111190
  • panel.background#fffffa
  • panel.border#111111
  • panelTitle.activeBorder#d7d7d7
  • panelTitle.activeForeground#111111
  • panelTitle.inactiveForeground#d7d7d7
  • peekView.border#fcfaf0
  • peekViewEditor.background#fffffa
  • peekViewEditor.matchHighlightBackground#b0b0b080
  • peekViewResult.background#fffffa
  • peekViewResult.fileForeground#111111
  • peekViewResult.lineForeground#111111
  • peekViewResult.matchHighlightBackground#b0b0b080
  • peekViewResult.selectionBackground#fcfaf0
  • peekViewResult.selectionForeground#111111
  • peekViewTitle.background#fffffa
  • peekViewTitleDescription.foreground#d7d7d7
  • peekViewTitleLabel.foreground#111111
  • pickerGroup.border#111111
  • pickerGroup.foreground#111111
  • progressBar.background#d7d7d7
  • selection.background#111111
  • settings.checkboxBackground#fffffa
  • settings.checkboxBorder#fffffa
  • settings.checkboxForeground#111111
  • settings.dropdownBackground#fffffa
  • settings.dropdownBorder#fffffa
  • settings.dropdownForeground#111111
  • settings.headerForeground#111111
  • settings.modifiedItemIndicator#b0b0b0
  • settings.numberInputBackground#fffffa
  • settings.numberInputBorder#fffffa
  • settings.numberInputForeground#111111
  • settings.textInputBackground#fffffa
  • settings.textInputBorder#fffffa
  • settings.textInputForeground#111111
  • sideBar.background#fffffa
  • sideBarSectionHeader.background#fffffa
  • sideBarSectionHeader.border#fffffa
  • sideBarTitle.foreground#111111
  • statusBar.background#fffffa
  • statusBar.debuggingBackground#111111
  • statusBar.debuggingForeground#fffffa
  • statusBar.foreground#111111
  • statusBar.noFolderBackground#fffffa
  • statusBar.noFolderForeground#111111
  • statusBarItem.prominentBackground#111111
  • statusBarItem.prominentHoverBackground#b0b0b0
  • statusBarItem.remoteBackground#fffffa
  • statusBarItem.remoteForeground#111111
  • tab.activeBackground#fffffa
  • tab.activeBorderTop#d7d7d780
  • tab.activeForeground#111111
  • tab.border#fffffa
  • tab.inactiveBackground#fffffa
  • tab.inactiveForeground#d7d7d7
  • terminal.ansiBlack#111111
  • terminal.ansiBlue#111111
  • terminal.ansiBrightBlack#111111
  • terminal.ansiBrightBlue#111111
  • terminal.ansiBrightCyan#111111
  • terminal.ansiBrightGreen#111111
  • terminal.ansiBrightMagenta#111111
  • terminal.ansiBrightRed#111111
  • terminal.ansiBrightWhite#111111
  • terminal.ansiBrightYellow#111111
  • terminal.ansiCyan#111111
  • terminal.ansiGreen#111111
  • terminal.ansiMagenta#111111
  • terminal.ansiRed#111111
  • terminal.ansiWhite#111111
  • terminal.ansiYellow#111111
  • terminal.background#fffffa
  • terminal.foreground#111111
  • textBlockQuote.background#fcfaf0
  • textBlockQuote.textBlockQuote#d7d7d7
  • textCodeBlock.background#fcfaf0
  • textLink.activeForeground#111111
  • textLink.foreground#111111
  • titleBar.activeBackground#fffffa
  • titleBar.activeForeground#111111
  • titleBar.inactiveBackground#fffffa
  • titleBar.inactiveForeground#d7d7d7
  • walkThrough.embeddedEditorBackground#fffffa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#111111—
meta.diff, meta.diff.header#d7d7d7—
markup.inserted#606060—
markup.deleted#111111—
markup.changed#b0b0b0—
invalid#111111underline italic
invalid.deprecated#111111underline italic
entity.name.filename#b0b0b0—
markup.error#111111—
markup.underline—underline
markup.bold#b0b0b0bold
markup.heading#111111bold
markup.italic#b0b0b0italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#111111—
markup.inline.raw, markup.raw.restructuredtext#606060—
markup.underline.link, markup.underline.link.image#111111—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#d7d7d7—
entity.name.directive.restructuredtext, markup.quote#b0b0b0italic
meta.separator.markdown#d7d7d7—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#606060—
punctuation.definition.constant.restructuredtext#111111—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#111111—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#111111—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#b0b0b0—
entity.name.type.class, entity.name.class#111111normal
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#111111italic
entity.other.inherited-class#111111italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#d7d7d7italic
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#d7d7d7—
comment.block.documentation entity.name.type#111111italic
comment.block.documentation entity.name.type punctuation.definition.bracket#111111—
comment.block.documentation variable#b0b0b0italic
constant, variable.other.constant#111111—
constant.character.escape, constant.character.string.escape, constant.regexp#d7d7d7—
entity.name.tag#d7d7d7—
entity.other.attribute-name.parent-selector#d7d7d7—
entity.other.attribute-name#606060italic
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#606060—
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#b0b0b0italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#606060italic
meta.decorator variable.other.object#606060—
keyword, punctuation.definition.keyword#d7d7d7—
keyword.control.new, keyword.operator.new—bold
meta.selector#d7d7d7—
support#111111italic
support.function.magic, support.variable, variable.other.predefined#111111regular
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#d7d7d7—
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#111111—
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#d7d7d7—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#111111—
constant.other.date, constant.other.timestamp#b0b0b0—
variable.other.alias.yaml#606060italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#d7d7d7regular
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#111111italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#b0b0b0—
storage.modifier#d7d7d7—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#b0b0b0—
punctuation.definition.group.capture.regexp#d7d7d7—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#111111—
punctuation.definition.character-class.regexp#111111—
punctuation.definition.group.regexp#b0b0b0—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#111111—
meta.assertion.look-ahead.regexp#606060—
string#b0b0b0—
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#d7d7d7italic
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#d7d7d7italic
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#111111—
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#b0b0b0italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#111111normal
meta.selectionset.graphql variable#b0b0b0—
meta.selectionset.graphql meta.arguments variable#111111—
entity.name.fragment.graphql, variable.fragment.graphql#111111—
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#111111—
source.shell variable.other#111111—
support.constant#111111normal
meta.scope.prerequisites.makefile#b0b0b0—
meta.attribute-selector.scss#b0b0b0—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#111111—
meta.preprocessor.haskell#d7d7d7—
log.error#111111bold
log.warning#b0b0b0bold
monotropic by avelino - VS Code Theme