1 files changed, 55 insertions, 0 deletions
diff --git a/doc/_templates/styles.html b/doc/_templates/styles.html
new file mode 100644
index 0000000..137fa24
--- /dev/null
+++ b/doc/_templates/styles.html
@@ -0,0 +1,55 @@
+{% extends "layout.html" %}
+
+{% block htmltitle %}<title>Styles{{ titlesuffix }}</title>{% endblock %}
+
+{% block body %}
+<style>
+.style-gallery {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+h2 {
+    margin-top: 2em;
+}
+.style-gallery h3 {
+    margin-bottom: 0.1em;
+}
+.style-gallery pre {
+    background-color: inherit;
+}
+</style>
+{{ body }}
+
+<h1>Styles</h1>
+
+<p>Pygments comes with the following builtin styles.
+For more information about styles refer to <a href="{{ pathto('docs/styles') }}">the documentation</a>.
+</p>
+
+<div class=style-gallery>
+{% for style in styles_aa %}
+    <div>
+    <h3 id="{{style.name}}">{{style.name}}</h3>
+    {{style.html|safe}}
+    </div>
+{% endfor %}
+</div>
+
+<h2>Styles with a lower contrast</h2>
+<p>
+The following styles do not meet the <a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html">WCAG 2.1 AA contrast minimum</a>,
+so they might be difficult to read for people with suboptimal vision.
+If you want your highlighted code to be well readable for other people, you
+should use one of the earlier styles instead.
+</p>
+<div class=style-gallery>
+    {% for style in styles_sub_aa %}
+    <div>
+    <h3 id="{{style.name}}">{{style.name}}</h3>
+    {{style.html|safe}}
+    </div>
+    {% endfor %}
+</div>
+
+{% endblock %}