Repository files navigation

Accessible light and dark syntax highlighting themes. SupportsWCAG level AA contrast requirements (good for most websites and apps).

You candownload the files directly, oruse NPM. After that you can either link to the CSS you need directly, or incorporate it into your build sustem.

Otherservices are also supported.

• Highlight.js
• Prism.js
  • Line Highlight
  • Line Numbers

• Adobe
• Figma (drag SVGs onto your canvas)
• macOS
• Vim
• Xcode
• macOS Terminal
• iTerm

• Carbon (remember to include alt text with your image!)
• JSON

• Light text on a dark background.
• Background color of#2B2B2B.
• WCAG AAA compliant for color contrast.

• Dark text on a light background.
• Background color of#FEFEFE.
• WCAG AA compliant for color contrast. WCAG AAA compliance forces the values on a light background to be too similar to each other to be used effectively for syntax highlighting.

Both themes have enhanced support forWindows High Contrast Mode when possible:

• a11y-light-on-light-dark-on-dark: This theme contains both light text on a dark background and dark text on a light background visual treatments for code. It is set to show a light background color for code when your operating system's light mode is active, and a dark background color when your operating system's dark mode is active.
• a11y-dark-on-light-light-on-dark: This theme contains both light text on a dark background and dark text on a light background visual treatments for code. It is set to show a dark background color for code when your operating system's light mode is active, and a light background color when your operating system's dark mode is active.
• a11y-light: This theme uses a light background color for code for an operating system's light and dark modes.
• a11y-dark: This theme uses a dark background color for code for an operating system's light and dark modes.
• Files that end with.min.css: These themes have had their contents compressed to be used in production environments.
• a11y-dark-legacy.css,a11y-dark-legacy.min.cssa11y-light-legacy.css,a11y-light-legacy.min.css: These files are for Internet Explorer support.

The current version of each syntax file uses features not supported by Internet Explorer. These features include:

• Cascade layers,
• root:,
• :where(),
• CSS Custom Properties,
• hsla() color syntax,
• Dark and light mode media queries, and the
• Forced Colors media query.

Only use the legacy files if you need to support Internet Explorer. Otherwise, syntax highlighting will not work for this browser.

Don't usea11y.css ora11y.min.css, as they use theprefers-color-scheme media query. Pick eithera11y-light-on-dark.min.css ora11y-dark-on-light.min.csss depending on what you want.

Naming things is hard. I had to redo them to have better control between light and dark modes, as well as normalization across different services.

forced-colors is a cross-browser standard derived from the propritary-ms-high-contrast declaraction. It has a slightly different syntax, but will also honor legacy-ms-high-contrast code.

-ms-high-contrastwill not honorforced-colors code. The situation is a bit of a mess, honestly. You can read more aboutthe difference between Windows High Contrast Mode and cross-browser Forced Colors mode in this Smashing Magazine article.

This is by design. These colors are dynamic, and can be adjusted by the person using the theme to make the experience work for their vision needs.

Check your Cascade Layer order. These themes use thevendor-prism andvendor-highlight namespaces, respectively.

Possibly!Raise an issue and let's talk about it.

I'm not interested in that, but modifying the CSS Custom Property values is a good starting point. Just make sure tocheck the foreground's color value against the background color value to make sure it passes level AA.

• Microsoft Visual Studio Code

• aaron-gustafson.com
• cssnano
• Eleventy
• hidde.blog
• Kieran Barker
• Mark Llobrera
• Melanie Richards
• Oddbird CSS Sandbox
• Paul Kinchla
• Quarto
• Sarah Higley
• Zeroheight
• W3C Design System

Run across it being used elsewhere?Let me know!

• Michael Ball, for the idea.
• Scott Vinkle,Carie Fischer, andScott O'Hara for the encouragement.
• Aaron Gustafson, for suggesting line highlighting support.
• Reuben L. Lillie, for Vi/Vim support.
• Elly Loel, for the nudge to modernize the CSS.
• Brandon Mathis, for help with hex code color conversion.