Modus
Publisher: wroycaThemes in package: 16
Accessible themes conforming to the highest standard for color contrast (WCAG AAA).
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.background#2b3045
- activityBar.foreground#ffffff
- activityBar.inactiveForeground#989898
- activityBarBadge.background#1640b0
- activityBarBadge.foreground#ffffff
- activityErrorBadge.background#9d1f1f
- activityErrorBadge.foreground#ffffff
- activityWarningBadge.background#7a6100
- activityWarningBadge.foreground#ffffff
- badge.background#1640b0
- badge.foreground#ffffff
- breadcrumb.activeSelectionForeground#ffffff
- breadcrumb.focusForeground#ffffff
- breadcrumb.foreground#989898
- breadcrumbPicker.background#1d2235
- button.background#4a4f69
- button.foreground#ffffff
- button.hoverBackground#45605e
- button.secondaryHoverBackground#64404f
- button.separator#61647a
- chat.avatarBackground#2b3045
- chat.avatarForeground#ffffff
- chat.editedFileForeground#79a8ff
- chat.linesAddedForeground#a0e0a0
- chat.linesRemovedForeground#ffbfbf
- chat.requestBackground#1d2235
- chat.requestBorder#61647a
- chat.slashCommandBackground#12154a
- chat.slashCommandForeground#b6a0ff
- checkbox.background#2b3045
- commandCenter.background#1d2235
- commandCenter.border#61647a
- debugToolBar.background#1d2235
- diffEditor.border#61647a
- diffEditor.diagonalFill#1a1f30
- diffEditor.insertedLineBackground#00292226
- diffEditor.insertedTextBackground#0355424d
- diffEditor.removedLineBackground#380a1926
- diffEditor.removedTextBackground#781a3a4d
- diffEditor.unchangedCodeBackground#1a1f30
- diffEditor.unchangedRegionBackground#1d2235
- diffEditor.unchangedRegionForeground#989898
- diffEditor.unchangedRegionShadow#1d2235
- diffEditorOverview.insertedForeground#23884f
- diffEditorOverview.removedForeground#b81a26
- disabledForeground#989898
- dropdown.background#2b3045
- editor.background#0d0e1c
- editor.findMatchBackground#7a6100
- editor.findMatchHighlightBackground#2266ae
- editor.findRangeHighlightBackground#2266ae4d
- editor.foreground#ffffff
- editor.inactiveSelectionBackground#555a6673
- editor.lineHighlightBackground#303a6f
- editor.selectionBackground#555a66a6
- editor.selectionForeground#0d0e1c
- editor.selectionHighlightBackground#45605e4d
- editor.wordHighlightBackground#45605e66
- editor.wordHighlightStrongBackground#64404f66
- editor.wordHighlightTextBackground#45605e4d
- editorBracketHighlight.foreground1#ff66ff
- editorBracketHighlight.foreground2#00eff0
- editorBracketHighlight.foreground3#ff6b55
- editorBracketHighlight.foreground4#efef00
- editorBracketHighlight.foreground5#b6a0ff
- editorBracketHighlight.foreground6#44df44
- editorBracketHighlight.unexpectedBracket.foreground#ff5f59
- editorBracketMatch.background#4f7f9f
- editorBracketMatch.border#4f7f9f
- editorCodeLens.foreground#989898
- editorCursor.foreground#ffffff
- editorError.foreground#ff5f59
- editorGroup.border#61647a
- editorGroupHeader.tabsBackground#1d2235
- editorGutter.addedBackground#23884f
- editorGutter.addedSecondaryBackground#035542
- editorGutter.deletedBackground#b81a26
- editorGutter.deletedSecondaryBackground#781a3a
- editorGutter.modifiedBackground#8f7a30
- editorGutter.modifiedSecondaryBackground#4a4a00
- editorHint.foreground#989898
- editorHoverWidget.background#1d2235
- editorHoverWidget.border#61647a
- editorIndentGuide.activeBackground1#61647a
- editorIndentGuide.background1#61647a80
- editorInfo.foreground#11c777
- editorLineNumber.activeForeground#ffffff
- editorLineNumber.foreground#989898
- editorLink.activeForeground#79a8ff
- editorMarkerNavigationError.background#ff5f59
- editorMarkerNavigationInfo.background#11c777
- editorMarkerNavigationWarning.background#d0bc00
- editorOverviewRuler.addedForeground#23884f
- editorOverviewRuler.bracketMatchForeground#4f7f9f
- editorOverviewRuler.currentContentForeground#23884f
- editorOverviewRuler.deletedForeground#b81a26
- editorOverviewRuler.errorForeground#ff5f59
- editorOverviewRuler.findMatchForeground#7a6100
- editorOverviewRuler.incomingContentForeground#1640b0
- editorOverviewRuler.infoForeground#11c777
- editorOverviewRuler.modifiedForeground#8f7a30
- editorOverviewRuler.warningForeground#d0bc00
- editorRuler.foreground#61647a80
- editorSuggestWidget.background#1d2235
- editorSuggestWidget.border#61647a
- editorSuggestWidget.focusHighlightForeground#00bcff
- editorSuggestWidget.highlightForeground#00bcff
- editorWarning.foreground#d0bc00
- editorWhitespace.foreground#61647a
- errorForeground#ff5f59
- focusBorder#61647a
- foreground#ffffff
- git.blame.editorDecorationForeground#efef80
- gitDecoration.addedResourceForeground#a0e0a0
- gitDecoration.conflictingResourceForeground#b81a26
- gitDecoration.deletedResourceForeground#ffbfbf
- gitDecoration.ignoredResourceForeground#989898
- gitDecoration.modifiedResourceForeground#efef80
- gitDecoration.renamedResourceForeground#80e080
- gitDecoration.stageDeletedResourceForeground#ff9095
- gitDecoration.stageModifiedResourceForeground#c0b05f
- gitDecoration.submoduleResourceForeground#8f7a30
- gitDecoration.untrackedResourceForeground#c6daff
- inlineChat.background#1d2235
- inlineChat.border#61647a
- inlineChat.foreground#ffffff
- inlineChatInput.background#0d0e1c
- inlineChatInput.border#61647a
- inlineChatInput.focusBorder#b6a0ff
- inlineChatInput.placeholderForeground#989898
- input.background#2b3045
- inputValidation.errorBackground#9d1f1f
- inputValidation.errorBorder#ff5f59
- inputValidation.errorForeground#ffffff
- inputValidation.infoBackground#2266ae
- inputValidation.infoBorder#11c777
- inputValidation.infoForeground#ffffff
- inputValidation.warningBackground#7a6100
- inputValidation.warningBorder#d0bc00
- inputValidation.warningForeground#ffffff
- list.activeSelectionBackground#45605e33
- list.activeSelectionForeground#ffffff
- list.errorForeground#ff5f59
- list.focusHighlightForeground#00bcff
- list.focusOutline#45605e
- list.highlightForeground#00bcff
- list.hoverBackground#45605e
- list.hoverForeground#ffffff
- list.inactiveSelectionBackground#2b3045
- list.warningForeground#d0bc00
- menu.background#1d2235
- menu.border#61647a
- menu.foreground#ffffff
- menu.selectionBackground#45605e
- menu.selectionForeground#ffffff
- menu.separatorBackground#61647a
- menubar.selectionBackground#45605e
- menubar.selectionForeground#ffffff
- merge.currentContentBackground#0029224d
- merge.currentHeaderBackground#003a2f80
- merge.incomingContentBackground#2426794d
- merge.incomingHeaderBackground#24267980
- minimap.errorHighlight#ff5f59
- minimap.findMatchHighlight#7a6100
- minimap.selectionHighlight#555a66
- minimap.warningHighlight#d0bc00
- minimapGutter.addedBackground#23884f
- minimapGutter.deletedBackground#b81a26
- minimapGutter.modifiedBackground#8f7a30
- minimapSlider.activeBackground#4a4f69cc
- minimapSlider.background#4a4f6980
- minimapSlider.hoverBackground#4a4f69a6
- multiDiffEditor.background#0d0e1c
- multiDiffEditor.border#61647a
- multiDiffEditor.headerBackground#1d2235
- notifications.background#1d2235
- notificationsErrorIcon.foreground#ff5f59
- notificationsInfoIcon.foreground#11c777
- notificationsWarningIcon.foreground#d0bc00
- panel.border#61647a
- panelSection.border#61647a
- peekView.border#b6a0ff
- peekViewEditor.background#b6a0ff1a
- peekViewEditor.matchHighlightBackground#64404f
- peekViewResult.background#1d2235
- peekViewResult.lineForeground#989898
- peekViewResult.matchHighlightBackground#64404f
- pickerGroup.border#61647a
- pickerGroup.foreground#ffffff
- progressBar.background#b6a0ff
- quickInput.background#1d2235
- quickInput.foreground#ffffff
- quickInputList.focusBackground#45605e
- quickInputList.focusForeground#ffffff
- quickInputList.focusIconForeground#ffffff
- sash.hoverBorder#45605e
- scmGraph.foreground1#ff66ff
- scmGraph.foreground2#00eff0
- scmGraph.foreground3#ff6b55
- scmGraph.foreground4#efef00
- scmGraph.foreground5#b6a0ff
- scmGraph.historyItemBaseRefColor#ffffff
- scmGraph.historyItemHoverAdditionsForeground#a0e0a0
- scmGraph.historyItemHoverDefaultLabelBackground#1d2235
- scmGraph.historyItemHoverDefaultLabelForeground#ffffff
- scmGraph.historyItemHoverDeletionsForeground#ffbfbf
- scmGraph.historyItemHoverLabelForeground#0d0e1c
- scmGraph.historyItemRefColor#79a8ff
- scmGraph.historyItemRemoteRefColor#f78fe7
- scrollbarSlider.activeBackground#4a4f69cc
- scrollbarSlider.background#4a4f6980
- scrollbarSlider.hoverBackground#4a4f69a6
- searchEditor.findMatchBackground#7a6100
- selection.background#555a66
- settings.focusedRowBackground#c6daff1a
- settings.focusedRowBorder#61647a
- settings.headerBorder#61647a
- settings.rowHoverBackground#c6daff1a
- settings.sashBorder#61647a
- sideBar.background#1d2235
- sideBar.foreground#ffffffcc
- sideBarSectionHeader.background#1d2235
- sideBarSectionHeader.border#61647a
- sideBySideEditor.horizontalBorder#61647a
- sideBySideEditor.verticalBorder#61647a
- statusBar.background#484d67
- statusBar.foreground#ffffff
- statusBar.noFolderBackground#292d48
- statusBar.noFolderForeground#969696
- statusBarItem.hoverBackground#45605e
- tab.border#1d2235
- tab.hoverBackground#45605e
- tab.hoverForeground#ffffff
- tab.inactiveBackground#252A3C
- terminal.ansiBlack#000000
- terminal.ansiBlue#2fafff
- terminal.ansiBrightBlack#595959
- terminal.ansiBrightBlue#79a8ff
- terminal.ansiBrightCyan#6ae4b9
- terminal.ansiBrightGreen#11c777
- terminal.ansiBrightMagenta#b6a0ff
- terminal.ansiBrightRed#ff6b55
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#fec43f
- terminal.ansiCyan#00d3d0
- terminal.ansiGreen#44bc44
- terminal.ansiMagenta#feacd0
- terminal.ansiRed#ff5f59
- terminal.ansiWhite#989898
- terminal.ansiYellow#d0bc00
- terminal.background#0d0e1c
- terminal.border#61647a
- terminal.foreground#ffffff
- terminal.selectionBackground#555a66
- textBlockQuote.background#1d2235
- textBlockQuote.border#61647a
- textCodeBlock.background#1d2235
- textLink.activeForeground#b6a0ff
- textLink.foreground#79a8ff
- textPreformat.background#1d2235
- textPreformat.foreground#6ae4b9
- textSeparator.foreground#61647a
- titleBar.activeBackground#353a52
- titleBar.activeForeground#ffffff
- walkThrough.embeddedEditorBackground#1d2235
- walkthrough.stepTitle.foreground#ffffff
- welcomePage.progress.background#2b3045
- welcomePage.progress.foreground#b6a0ff
- welcomePage.tileBackground#1d2235
- welcomePage.tileBorder#61647a
- welcomePage.tileHoverBackground#45605e
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #ef8386 | italic |
| string, string.quoted, string.template, string.interpolated | #2fafff | — |
| constant.character.escape, string.regexp | #b6a0ff | — |
| constant, constant.language, constant.character, support.constant | #b6a0ff | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary | #ffffff | — |
| constant.language.boolean | #b6a0ff | — |
| keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.logical, keyword.operator.wordlike | #79a8ff | — |
| keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.comparison, keyword.operator.relational, keyword.operator.increment, keyword.operator.decrement, keyword.operator.ternary | #ffffff | — |
| storage, storage.modifier | #79a8ff | — |
| storage.type | #11c777 | — |
| storage.type.namespace.directive.cpp, storage.type.namespace.definition.cpp | #79a8ff | — |
| entity.name.type, entity.name.type.class, entity.name.type.struct, entity.name.type.interface, entity.name.type.enum, entity.name.type.type-parameter, support.type, support.type.primitive, support.type.builtin | #11c777 | — |
| entity.name.type.parameter | #11c777 | — |
| entity.name.function, entity.name.function.member, support.function, meta.function-call entity.name.function | #f78fe7 | — |
| entity.name.function.method, meta.method.identifier entity.name.function | #f78fe7 | — |
| variable.parameter, meta.parameter | #4ae2f0 | — |
| variable, variable.other, variable.other.readwrite, variable.other.object, variable.other.object.access.cpp | #4ae2f0 | — |
| variable.other.property, variable.other.object.property, meta.object-literal.key | #4ae2f0 | — |
| variable.language | #79a8ff | italic |
| entity.name.class, support.class | #11c777 | — |
| entity.name.namespace, entity.name.scope-resolution | #b6a0ff | — |
| support.function.builtin, support.variable, support.type.property-name | #feacd0 | — |
| meta.decorator, meta.decorator entity.name.function, punctuation.decorator | #b6a0ff | — |
| meta.preprocessor, entity.name.function.preprocessor, keyword.control.directive, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as | #b6a0ff | — |
| punctuation.definition.directive, punctuation.definition.directive.c, punctuation.definition.directive.cpp | #b6a0ff | — |
| string.quoted.other.lt-gt.include, string.quoted.other.lt-gt.include.c, string.quoted.other.lt-gt.include.cpp | #2fafff | — |
| punctuation, punctuation.separator, punctuation.terminator, meta.brace | #ffffff | — |
| punctuation.definition.string | #2fafff | — |
| punctuation.definition.block, punctuation.definition.parameters, punctuation.section, punctuation.definition.begin, punctuation.definition.end | #ffffff | — |
| entity.name.tag, meta.tag | #79a8ff | — |
| entity.other.attribute-name | #4ae2f0 | — |
| support.type.property-name.css | #4ae2f0 | — |
| support.constant.property-value.css, support.constant.font-name, meta.property-value | #b6a0ff | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #f78fe7 | — |
| keyword.other.unit | #ffffff | — |
| support.type.property-name.json | #4ae2f0 | — |
| entity.name.tag.yaml | #4ae2f0 | — |
| support.type.property-name.toml | #4ae2f0 | — |
| support.type.property-name.table.toml | #11c777 | — |
| heading.1.markdown, heading.2.markdown, heading.3.markdown, heading.4.markdown, heading.5.markdown, heading.6.markdown, markup.heading | #ffffff | bold |
| markup.bold | #ffffff | bold |
| markup.italic | #ffffff | italic |
| markup.inline.raw, markup.fenced_code.block | #6ae4b9 | — |
| markup.underline.link, string.other.link | #79a8ff | — |
| punctuation.definition.list.begin.markdown, markup.list | #989898 | — |
| markup.quote | #989898 | italic |
| variable.other.normal.shell, variable.other.special.shell, variable.other.positional.shell | #4ae2f0 | — |
| string.regexp.group, punctuation.definition.group.regexp, keyword.operator.quantifier.regexp | #b6a0ff | — |
| constant.other.character-class.regexp, constant.character.escape.backslash.regexp | #f78fe7 | — |
| markup.inserted | #a0e0a0 | — |
| markup.deleted | #ffbfbf | — |
| markup.changed | #efef80 | — |
| string.quoted.docstring, comment.block.documentation | #9ac8e0 | italic |
| comment.block.documentation keyword, comment.block.documentation variable, storage.type.class.jsdoc, entity.name.type.instance.jsdoc, variable.other.jsdoc | #caa6df | — |
| variable.other.enummember | #b6a0ff | — |
| entity.name.label | #feacd0 | — |
| token.info-token | #11c777 | — |
| token.warn-token | #d0bc00 | — |
| token.error-token | #ff5f59 | — |
| token.debug-token | #b6a0ff | — |