Accessible (AA) Theme
Publisher: phun-kyThemes in package: 2
WCAG AA-friendly syntax highlighting in dark and light variants.
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#262831
- activityBar.border#303445
- activityBar.foreground#E4E4E7
- activityBar.inactiveForeground#8C9B9B
- activityBarBadge.background#469EDD
- activityBarBadge.foreground#030303
- badge.background#469EDD
- badge.foreground#030303
- button.background#469EDD
- button.foreground#030303
- button.hoverBackground#63abe3
- checkbox.foreground#E4E4E7
- dropdown.background#2b2e3a
- dropdown.border#303445
- dropdown.listBackground#2b2e3a
- editor.background#262831
- editor.foreground#E4E4E7
- editorBracketHighlight.foreground1#E4E4E7
- editorBracketHighlight.foreground2#8C9B9B
- editorBracketHighlight.foreground3#99acb2
- editorBracketHighlight.foreground4#C79500
- editorBracketHighlight.foreground5#2CAAA0
- editorBracketHighlight.foreground6#469EDD
- editorBracketHighlight.unexpectedBracket.foreground#FF6666
- editorBracketMatch.border#469EDD
- editorGroup.border#303445
- editorGroupHeader.tabsBackground#262831
- editorHoverWidget.background#2b2e3a
- editorHoverWidget.border#303445
- editorWidget.background#2b2e3a
- editorWidget.border#303445
- focusBorder#469EDD
- gitDecoration.addedResourceForeground#2CAAA0
- gitDecoration.conflictingResourceForeground#C79500
- gitDecoration.deletedResourceForeground#FF6666
- gitDecoration.ignoredResourceForeground#8C9B9B
- gitDecoration.modifiedResourceForeground#C79500
- gitDecoration.untrackedResourceForeground#2CAAA0
- input.background#2b2e3a
- input.border#303445
- input.foreground#E4E4E7
- input.placeholderForeground#8C9B9B
- list.activeSelectionBackground#303445
- list.activeSelectionForeground#E4E4E7
- list.focusBackground#303445
- list.focusForeground#E4E4E7
- list.hoverBackground#2b2e3a
- list.hoverForeground#E4E4E7
- list.inactiveSelectionBackground#2b2e3a
- list.inactiveSelectionForeground#E4E4E7
- notificationCenterHeader.background#262831
- notifications.background#262831
- notifications.border#303445
- notifications.foreground#E4E4E7
- panel.background#262831
- panel.border#303445
- panelTitle.activeBorder#469EDD
- panelTitle.activeForeground#E4E4E7
- panelTitle.inactiveForeground#8C9B9B
- peekView.border#469EDD
- peekViewEditor.background#2b2e3a
- peekViewResult.background#262831
- progressBar.background#469EDD
- quickInput.background#262831
- quickInput.foreground#E4E4E7
- quickInputList.focusBackground#303445
- scrollbarSlider.activeBackground#8C9B9B88
- scrollbarSlider.background#8C9B9B44
- scrollbarSlider.hoverBackground#8C9B9B66
- selection.background#469EDD22
- sideBar.background#262831
- sideBar.border#303445
- sideBar.foreground#E4E4E7
- sideBarSectionHeader.background#262831
- sideBarSectionHeader.border#303445
- sideBarSectionHeader.foreground#E4E4E7
- sideBarTitle.foreground#E4E4E7
- statusBar.background#262831
- statusBar.border#303445
- statusBar.debuggingBackground#C79500
- statusBar.debuggingForeground#0D0D0D
- statusBar.foreground#E4E4E7
- statusBar.noFolderBackground#2b2e3a
- statusBar.noFolderForeground#E4E4E7
- statusBarItem.activeBackground#2b2e3a
- statusBarItem.errorBackground#FF6666
- statusBarItem.errorForeground#030303
- statusBarItem.hoverBackground#303445
- statusBarItem.prominentBackground#2b2e3a
- statusBarItem.prominentHoverBackground#303445
- statusBarItem.remoteBackground#2b2e3a
- statusBarItem.remoteForeground#E4E4E7
- statusBarItem.warningBackground#C79500
- statusBarItem.warningForeground#0D0D0D
- tab.activeBackground#303445
- tab.activeBorderTop#469EDD
- tab.activeForeground#E4E4E7
- tab.border#303445
- tab.inactiveBackground#262831
- tab.inactiveForeground#8C9B9B
- terminal.ansiBlack#262831
- terminal.ansiBlue#469EDD
- terminal.ansiBrightBlack#8C9B9B
- terminal.ansiBrightBlue#469EDD
- terminal.ansiBrightCyan#2CAAA0
- terminal.ansiBrightGreen#2CAAA0
- terminal.ansiBrightMagenta#99acb2
- terminal.ansiBrightRed#FF6666
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#C79500
- terminal.ansiCyan#2CAAA0
- terminal.ansiGreen#2CAAA0
- terminal.ansiMagenta#DB70B7
- terminal.ansiRed#FF6666
- terminal.ansiWhite#E4E4E7
- terminal.ansiYellow#C79500
- titleBar.activeBackground#262831
- titleBar.activeForeground#E4E4E7
- titleBar.border#303445
- titleBar.inactiveBackground#262831
- titleBar.inactiveForeground#8C9B9B
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #99acb2 | italic |
| variable, string constant.other.placeholder | #469EDD | — |
| constant.other.color | #2CAAA0 | — |
| invalid, invalid.illegal | #FF6666 | bold |
| keyword, storage.type, storage.modifier, keyword.control, keyword.other, keyword.other.unit | #FFFFFF | — |
| storage.type.tsx, storage.type.ts, support.variable.property.ts, keyword.control.flow.ts | #95c1e2 | — |
| keyword.operator | #C79500 | — |
| punctuation, punctuation.separator, punctuation.terminator | #8C9B9B | — |
| punctuation.section.parens.begin, punctuation.section.parens.end | #C79500 | — |
| variable.other.constant.ts | #C79500 | — |
| support.class.component.tsx | #C79500 | — |
| entity.other.attribute-name.tsx | #E4e4e7 | — |
| punctuation.section.block.begin, punctuation.section.block.end | #469EDD | — |
| punctuation.section.brackets.begin, punctuation.section.brackets.end | #2CAAA0 | — |
| meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.section.embedded | #8C9B9B | — |
| punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx | #E4E4E7 | — |
| meta.jsx.children.tsx | #E4E4E7 | — |
| meta.object-literal.key.tsx | #95c1e2 | — |
| keyword.other.template, keyword.other.substitution | #469EDD | — |
| entity.name.tag, meta.tag.sgml | #8C9B9B | — |
| markup.deleted, markup.deleted.git_gutter | #FF6666 | — |
| entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method | #E4E4E7 | — |
| meta.block variable.other | #469EDD | — |
| support.other.variable, string.other.link | #2CAAA0 | — |
| constant.numeric, constant.language, support.constant, constant.character, constant.escape, constant.language.boolean, constant.language.null | #C79500 | — |
| variable.parameter | #469EDD | — |
| string, constant.other.symbol, constant.other.key | #2CAAA0 | — |
| entity.other.inherited-class | #E4E4E7 | italic |
| markup.heading | #469EDD | — |
| entity.name, support.type, support.class, support.type.sys-types | #E4E4E7 | — |
| support.type, entity.name.type.ts | #C79500 | — |
| entity.name.type, entity.other.inherited-class.ts, entity.name.type.module.ts | #FF6666 | — |
| meta.property.object, variable.other.property, variable.other.object.property | #95c1e2 | — |
| source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name | #E4E4E7 | italic |
| entity.name.module.js, variable.import.parameter.js, variable.other.class.js | #E4E4E7 | — |
| variable.language | #469EDD | italic |
| meta.definition.function entity.name.function, meta.function entity.name.function, meta.function-call entity.name.function | #E4E4E7 | — |
| meta.method-call entity.name.function, meta.function-call.method entity.name.function, meta.property.member entity.name.function, meta.property.object entity.name.function, meta.property.function entity.name.function, entity.name.method | #469EDD | — |
| meta.property.member variable.other.property, meta.property.object variable.other.property, variable.other.object.property | #E4E4E7 | — |
| entity.other.attribute-name | #2CAAA0 | — |
| entity.other.attribute-name.html, entity.other.attribute-name | #469EDD | italic |
| string.quoted.double.html | #95c1e2 | — |
| entity.name.tag.html, entity.name.tag.tsx | #469EDD | — |
| entity.other.attribute-name.class | #2CAAA0 | — |
| entity.other.attribute-name.pseudo-element.css | #72c6c0 | — |
| source.sass keyword.control | #469EDD | — |
| markup.inserted | #2CAAA0 | — |
| markup.changed | #469EDD | — |
| string.regexp | #2CAAA0 | — |
| constant.character.escape | #2CAAA0 | — |
| *url*, *link*, *uri* | #2CAAA0 | underline |
| tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js | #E4E4E7 | italic |
| source.js constant.other.object.key.js string.unquoted.label.js | #469EDD | italic |
| source.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #469EDD | — |
| text.html.markdown, punctuation.definition.list_item.markdown | #E4E4E7 | — |
| text.html.markdown markup.inline.raw.markdown | #469EDD | — |
| text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown | #8C9B9B | — |
| markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown | #469EDD | — |
| markup.italic | #E4E4E7 | italic |
| markup.bold, markup.bold string | #E4E4E7 | bold |
| markup.underline | #469EDD | underline |
| markup.quote punctuation.definition.blockquote.markdown | #8C9B9B | — |
| markup.quote | #E4E4E7 | italic |
| string.other.link.title.markdown | #2CAAA0 | — |
| string.other.link.description.title.markdown | #2CAAA0 | — |
| constant.other.reference.link.markdown | #469EDD | — |
| markup.raw.block, markup.raw.block.fenced.markdown, punctuation.definition.fenced.markdown | #8C9B9B | — |
| variable.language.fenced.markdown, punctuation.section.class.end | #E4E4E7 | — |
| meta.separator | #8C9B9B | bold |
| markup.table | #E4E4E7 | — |
| keyword.control | #469EDD | — |