An modernized fork of the Prism themes package, optimized for Automad.
npm install automad-prism-themesA modern collection of more than 60 trending syntax highlighting themes for Prism.
| Theme Gallery | NPM | CDN |
| :----------------------------------------------------------------: | :-------------------------------------------------------: | :---------------------------------------------------------------: |
---
- Included Themes
- Light & Dark Mode Combos
- How to use a Theme
- Customizing
- Adding new Themes
A gallery with screenshots of all included themes can be found here.
This collection also comes with a couple of theme combos that support toggling light and dark mode out of the box. These combos come in two flavors — one light and one dark color scheme.
To use one of the themes, just include the theme's CSS file in your page. Theme files can be directly loaded from CDN or included locally. Example:
``html`
...
rel="stylesheet"
/>
...
Some basic theme settings are exposed using CSS custom properties. These properties can be defined for better integration into a site's theme.
`css`
:root {
--am-prism-padding-y: 1rem;
--am-prism-padding-x: 1rem;
--am-prism-border-width: 1px;
--am-prism-border-radius: 0.3em;
--am-prism-font-size: 0.875rem;
--am-prism-font-family: ui-monospace;
--am-prism-line-height: 1.5;
}
> [!IMPORTANT]
> This collection is carefully curated and serves as the main repository of Prism themes for Automad. Please understand that pull-request have a high chance of being ignored. In case you are missing a theme, feel free to request it by opening an issue.
Follow these steps in order to add a new theme:
1. Add a new .css file following the prism-[theme].css naming pattern including the theme styles.themes/base.css
2. Remove all common styles that are already defined in . (See other themes)index.php
3. Preview the theme in the included PHP testing page. ()`
4. Generate missing screenshots:
bash``
npm run screenshots