From a888430ef3c68a7dc57c5a11840c642e24197de9 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 29 Oct 2020 01:41:32 +0000
Subject: [PATCH] Integrate the typography plugin with dark mode

References #27
---
 .../custom/opdavies/assets/css/custom-base.pcss    |  2 +-
 web/themes/custom/opdavies/tailwind.config.js      | 14 ++++++++++++++
 .../opdavies/templates/field/field--body.html.twig |  6 +++---
 .../field--node--field-events--talk.html.twig      |  2 +-
 .../opdavies/templates/node/node--talk.html.twig   |  2 +-
 .../view/views-view--blog-posts.html.twig          |  2 +-
 .../templates/view/views-view--talks.html.twig     |  2 +-
 7 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/web/themes/custom/opdavies/assets/css/custom-base.pcss b/web/themes/custom/opdavies/assets/css/custom-base.pcss
index 12d4e01..0c743f2 100644
--- a/web/themes/custom/opdavies/assets/css/custom-base.pcss
+++ b/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 {
diff --git a/web/themes/custom/opdavies/tailwind.config.js b/web/themes/custom/opdavies/tailwind.config.js
index f2970a8..7504ee5 100644
--- a/web/themes/custom/opdavies/tailwind.config.js
+++ b/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,
diff --git a/web/themes/custom/opdavies/templates/field/field--body.html.twig b/web/themes/custom/opdavies/templates/field/field--body.html.twig
index 76635a6..3486c85 100644
--- a/web/themes/custom/opdavies/templates/field/field--body.html.twig
+++ b/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>
diff --git a/web/themes/custom/opdavies/templates/field/field--node--field-events--talk.html.twig b/web/themes/custom/opdavies/templates/field/field--node--field-events--talk.html.twig
index 1763132..7858944 100644
--- a/web/themes/custom/opdavies/templates/field/field--node--field-events--talk.html.twig
+++ b/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>
diff --git a/web/themes/custom/opdavies/templates/node/node--talk.html.twig b/web/themes/custom/opdavies/templates/node/node--talk.html.twig
index e34b7c8..5f29446 100644
--- a/web/themes/custom/opdavies/templates/node/node--talk.html.twig
+++ b/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>
 
diff --git a/web/themes/custom/opdavies/templates/view/views-view--blog-posts.html.twig b/web/themes/custom/opdavies/templates/view/views-view--blog-posts.html.twig
index 7000322..f460baa 100644
--- a/web/themes/custom/opdavies/templates/view/views-view--blog-posts.html.twig
+++ b/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 %}
diff --git a/web/themes/custom/opdavies/templates/view/views-view--talks.html.twig b/web/themes/custom/opdavies/templates/view/views-view--talks.html.twig
index 7000322..f460baa 100644
--- a/web/themes/custom/opdavies/templates/view/views-view--talks.html.twig
+++ b/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 %}