Integrate the typography plugin with dark mode

References #27

web/themes/custom/opdavies/assets/css/custom-base.pcss

@@ -15,7 +15,7 @@ img {
 }
 
 a {
-  @apply text-blue-700 no-underline hover:underline
+  @apply text-blue-500 no-underline hover:underline
 }
 
 blockquote {

web/themes/custom/opdavies/tailwind.config.js

@@ -55,6 +55,19 @@ module.exports = {
           'pre code::before': false,
           'pre code::after': false
         }
+      },
+      dark: {
+        css: {
+          color: theme('colors.gray.200'),
+
+          h2: {
+            color: theme('colors.white')
+          },
+
+          strong: {
+            color: theme('colors.gray.200')
+          }
+        }
       }
     }),
     extend: {
@@ -103,6 +116,7 @@ module.exports = {
     borderStyle: [...variants.borderStyle, 'hover', 'focus'],
     borderWidth: [...variants.borderWidth, 'hover', 'focus'],
     margin: [...variants.margin, 'first', 'last', 'odd', 'even'],
+    typography: ['responsive', 'dark']
   },
   experimental: {
     applyComplexClasses: true,

web/themes/custom/opdavies/templates/field/field--body.html.twig

@@ -44,12 +44,12 @@
   {% if multiple %}
     <div{{ attributes }}>
       {% for item in items %}
-        <div{{ item.attributes.addClass('prose max-w-none') }}>{{ item.content }}</div>
+        <div{{ item.attributes.addClass('prose dark:prose-dark max-w-none') }}>{{ item.content }}</div>
       {% endfor %}
     </div>
   {% else %}
     {% for item in items %}
-      <div{{ attributes.addClass('prose max-w-none') }}>{{ item.content }}</div>
+      <div{{ attributes.addClass('prose dark:prose-dark max-w-none') }}>{{ item.content }}</div>
     {% endfor %}
   {% endif %}
 {% else %}
@@ -59,7 +59,7 @@
     <div>
       {% endif %}
       {% for item in items %}
-        <div{{ item.attributes.addClass('prose max-w-none') }}>{{ item.content }}</div>
+        <div{{ item.attributes.addClass('prose dark:prose-dark max-w-none') }}>{{ item.content }}</div>
       {% endfor %}
       {% if multiple %}
     </div>

web/themes/custom/opdavies/templates/field/field--node--field-events--talk.html.twig

@@ -42,7 +42,7 @@
   ]
 %}
 
-<div{{ attributes.addClass('prose max-w-none') }}>
+<div{{ attributes.addClass('prose dark:prose-dark max-w-none') }}>
   <h2{{ title_attributes.addClass(title_classes) }}>
     {{ label }}
   </h2>

web/themes/custom/opdavies/templates/node/node--talk.html.twig

@@ -90,7 +90,7 @@
     </footer>
   {% endif %}
 
-  <div{{ content_attributes.addClass(['space-y-6', page ? 'prose max-w-none']) }}>
+  <div{{ content_attributes.addClass(['space-y-6', page ? 'prose dark:prose-dark max-w-none']) }}>
     {{ content }}
   </div>
 

web/themes/custom/opdavies/templates/view/views-view--blog-posts.html.twig

@@ -41,7 +41,7 @@
   {{ title_suffix }}
 
   {% if header %}
-    <header class="prose lg:prose-lg xl:prose-xl">
+    <header class="prose dark:prose-dark lg:prose-lg xl:prose-xl">
       {{ header }}
     </header>
   {% endif %}

web/themes/custom/opdavies/templates/view/views-view--talks.html.twig

@@ -41,7 +41,7 @@
   {{ title_suffix }}
 
   {% if header %}
-    <header class="prose lg:prose-lg xl:prose-xl">
+    <header class="prose dark:prose-dark lg:prose-lg xl:prose-xl">
       {{ header }}
     </header>
   {% endif %}