A modern collection of more than 60 trending syntax highlighting themes for Prism.
| Theme Gallery | NPM | CDN |
|---|
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:
<!doctype html>
<html>
<head>
...
<link
href="https://unpkg.com/automad-prism-themes/dist/prism-tokyo-night.css"
rel="stylesheet"
/>
</head>
<body>
...
<script src="https://unpkg.com/prismjs@1.29.0/components/prism-core.min.js"></script>
<script src="https://unpkg.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
</body>
</html>Some basic theme settings are exposed using CSS custom properties. These properties can be defined for better integration into a site's theme.
: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:
- Add a new
.cssfile following theprism-[theme].cssnaming pattern including the theme styles. - Remove all common styles that are already defined in
themes/base.css. (See other themes) - Preview the theme in the included PHP testing page. (
index.php) - Generate missing screenshots:
npm run screenshots