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#80808080
  • activityBar.background#fffffa
  • activityBar.foreground#111111
  • activityBar.inactiveForeground#ddddda
  • activityBarBadge.background#808080
  • activityBarBadge.foreground#111111
  • badge.background#fcfaf0
  • badge.foreground#111111
  • breadcrumb.activeSelectionForeground#111111
  • breadcrumb.background#fffffa
  • breadcrumb.focusForeground#111111
  • breadcrumb.foreground#ddddda
  • breadcrumbPicker.background#fffffa
  • button.background#fcfaf0
  • button.foreground#111111
  • button.secondaryBackground#fffffa
  • button.secondaryForeground#111111
  • button.secondaryHoverBackground#fffffa
  • debugToolBar.background#fffffa
  • diffEditor.insertedTextBackground#11111120
  • diffEditor.removedTextBackground#11111150
  • dropdown.background#fffffa
  • dropdown.border#fffffa
  • dropdown.foreground#111111
  • editor.background#fffffa
  • editor.findMatchBackground#11111180
  • 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#111111
  • editor.snippetTabstopHighlightBackground#fffffa
  • editor.snippetTabstopHighlightBorder#ddddda
  • editor.wordHighlightBackground#11111150
  • editor.wordHighlightStrongBackground#11111150
  • editorBracketHighlight.foreground1#111111
  • editorBracketHighlight.foreground2#808080
  • editorBracketHighlight.foreground3#111111
  • editorBracketHighlight.foreground4#111111
  • editorBracketHighlight.foreground5#111111
  • editorBracketHighlight.foreground6#111111
  • editorBracketHighlight.unexpectedBracket.foreground#111111
  • editorCodeLens.foreground#ddddda
  • editorError.foreground#111111
  • editorGroup.border#111111
  • editorGroup.dropBackground#ddddda
  • editorGroupHeader.tabsBackground#fffffa
  • editorGutter.addedBackground#11111180
  • editorGutter.deletedBackground#11111180
  • editorGutter.modifiedBackground#11111180
  • editorHoverWidget.background#fffffa
  • editorHoverWidget.border#ddddda
  • editorIndentGuide.activeBackground#fffffa45
  • editorIndentGuide.background#fffffa
  • editorLineNumber.activeForeground#808080
  • editorLineNumber.foreground#ddddda
  • editorLink.activeForeground#111111
  • editorMarkerNavigation.background#fffffa
  • editorOverviewRuler.addedForeground#11111180
  • editorOverviewRuler.border#fffffa
  • editorOverviewRuler.currentContentForeground#111111
  • editorOverviewRuler.deletedForeground#11111180
  • editorOverviewRuler.errorForeground#11111180
  • editorOverviewRuler.incomingContentForeground#111111
  • editorOverviewRuler.infoForeground#11111180
  • editorOverviewRuler.modifiedForeground#11111180
  • editorOverviewRuler.selectionHighlightForeground#111111
  • editorOverviewRuler.warningForeground#11111180
  • editorOverviewRuler.wordHighlightForeground#111111
  • editorOverviewRuler.wordHighlightStrongForeground#111111
  • 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#11111190
  • extensionButton.prominentForeground#111111
  • extensionButton.prominentHoverBackground#11111160
  • focusBorder#ddddda
  • foreground#111111
  • gitDecoration.conflictingResourceForeground#111111
  • gitDecoration.deletedResourceForeground#111111
  • gitDecoration.ignoredResourceForeground#ddddda
  • gitDecoration.modifiedResourceForeground#111111
  • gitDecoration.untrackedResourceForeground#111111
  • input.background#fffffa
  • input.border#fffffa
  • input.foreground#111111
  • input.placeholderForeground#ddddda
  • inputOption.activeBorder#111111
  • inputValidation.errorBorder#111111
  • inputValidation.infoBorder#808080
  • inputValidation.warningBorder#111111
  • 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#111111
  • listFilterWidget.background#fffffa
  • listFilterWidget.noMatchesOutline#111111
  • listFilterWidget.outline#fffffa
  • merge.currentHeaderBackground#11111190
  • merge.incomingHeaderBackground#11111190
  • panel.background#fffffa
  • panel.border#111111
  • panelTitle.activeBorder#808080
  • panelTitle.activeForeground#111111
  • panelTitle.inactiveForeground#ddddda
  • peekView.border#fcfaf0
  • peekViewEditor.background#fffffa
  • peekViewEditor.matchHighlightBackground#11111180
  • peekViewResult.background#fffffa
  • peekViewResult.fileForeground#111111
  • peekViewResult.lineForeground#111111
  • peekViewResult.matchHighlightBackground#11111180
  • peekViewResult.selectionBackground#fcfaf0
  • peekViewResult.selectionForeground#111111
  • peekViewTitle.background#fffffa
  • peekViewTitleDescription.foreground#ddddda
  • peekViewTitleLabel.foreground#111111
  • pickerGroup.border#111111
  • pickerGroup.foreground#111111
  • progressBar.background#808080
  • 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#111111
  • 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#111111
  • statusBarItem.remoteBackground#fffffa
  • statusBarItem.remoteForeground#111111
  • tab.activeBackground#fffffa
  • tab.activeBorderTop#80808080
  • tab.activeForeground#111111
  • tab.border#fffffa
  • tab.inactiveBackground#fffffa
  • tab.inactiveForeground#ddddda
  • 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#ddddda
  • textCodeBlock.background#fcfaf0
  • textLink.activeForeground#111111
  • textLink.foreground#111111
  • titleBar.activeBackground#fffffa
  • titleBar.activeForeground#111111
  • titleBar.inactiveBackground#fffffa
  • titleBar.inactiveForeground#ddddda
  • walkThrough.embeddedEditorBackground#fffffa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#111111
meta.diff, meta.diff.header#ddddda
markup.inserted#111111
markup.deleted#111111
markup.changed#111111
invalid#111111underline italic
invalid.deprecated#111111underline italic
entity.name.filename#111111
markup.error#111111
markup.underlineunderline
markup.bold#111111bold
markup.heading#111111bold
markup.italic#111111italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#111111
markup.inline.raw, markup.raw.restructuredtext#111111
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#808080
entity.name.directive.restructuredtext, markup.quote#111111italic
meta.separator.markdown#ddddda
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#111111
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#111111
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#dddddaitalic
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#808080
comment.block.documentation entity.name.type#111111italic
comment.block.documentation entity.name.type punctuation.definition.bracket#111111
comment.block.documentation variable#111111italic
constant, variable.other.constant#111111
constant.character.escape, constant.character.string.escape, constant.regexp#808080
entity.name.tag#808080
entity.other.attribute-name.parent-selector#808080
entity.other.attribute-name#111111italic
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#111111
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#111111italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#111111italic
meta.decorator variable.other.object#111111
keyword, punctuation.definition.keyword#808080
keyword.control.new, keyword.operator.newbold
meta.selector#808080
support#111111italic
support.function.magic, support.variable, variable.other.predefined#111111regular
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#808080
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#808080
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#111111
constant.other.date, constant.other.timestamp#111111
variable.other.alias.yaml#111111italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#808080regular
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#111111
storage.modifier#808080
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#111111
punctuation.definition.group.capture.regexp#808080
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#111111
punctuation.definition.character-class.regexp#111111
punctuation.definition.group.regexp#111111
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#111111
meta.assertion.look-ahead.regexp#111111
string#111111
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#808080italic
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#dddddaitalic
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#111111italic
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#111111
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#111111
meta.attribute-selector.scss#111111
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#111111
meta.preprocessor.haskell#ddddda
log.error#111111bold
log.warning#111111bold

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

monotropic - Coding Theme