Re-add dark version of the theme

Fixes #376

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

@@ -0,0 +1,5 @@
+@layer base {
+  th {
+    @apply dark:text-white
+  }
+}

web/themes/custom/opdavies/assets/css/components/block.pcss

@@ -1,5 +1,5 @@
 @layer components {
   .sidebar .block {
-    @apply p-6 rounded bg-gray-100
+    @apply p-6 rounded bg-gray-100 dark:bg-gray-750
   }
 }

web/themes/custom/opdavies/assets/css/components/note.pcss

@@ -1,6 +1,10 @@
 @layer components {
   .note {
-    @apply max-w-full prose bg-blue-200 border-blue-600 border-l-4 mb-4 p-4 rounded;
+    @apply max-w-full prose bg-blue-200 border-blue-600 border-l-4 mb-4 p-4 rounded dark:prose-dark;
+
+    * {
+      @apply dark:text-gray-700
+    }
 
     p a {
       @apply underline hover:no-underline

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

@@ -9,6 +9,7 @@ const { fontFamily } = defaultTheme
 const { variants } = defaultConfig
 
 module.exports = {
+  darkMode: 'media',
   important: true,
   purge: {
     content: [
@@ -49,6 +50,24 @@ module.exports = {
             'pre code::before': false,
             'pre code::after': false
           }
+        },
+        dark: {
+          css: {
+            color: theme('colors.gray.200'),
+
+            code: {
+              backgroundColor: theme('colors.gray.750'),
+              color: theme('colors.gray.200')
+            },
+
+            'blockquote, h2, h3': {
+              color: theme('colors.white')
+            },
+
+            strong: {
+              color: theme('colors.gray.200')
+            }
+          }
         }
       }),
       colors,
@@ -84,6 +103,9 @@ module.exports = {
     borderStyle: [...variants.borderStyle, 'hover', 'focus'],
     borderWidth: [...variants.borderWidth, 'hover', 'focus'],
     margin: [...variants.margin, 'first', 'last', 'odd', 'even'],
-    typography: ['responsive']
+    typography: ['responsive'],
+    extend: {
+      typography: ['dark']
+    }
   }
 }

web/themes/custom/opdavies/templates/block/block--inline-block--recommendation.html.twig

@@ -10,7 +10,7 @@
     "
   >
     <div class="mt-4 flex-1 sm:mt-0">
-      <div class="text-gray-700">
+      <div class="text-gray-700 dark:text-gray-200">
         {{ content.field_role }}
       </div>
 

web/themes/custom/opdavies/templates/block/block--opdavies-blog-related-posts.html.twig

@@ -25,7 +25,7 @@
  * @see template_preprocess_block()
  */
 #}
-<section{{ attributes.addClass('mt-4 max-w-none prose') }}>
+<section{{ attributes.addClass('mt-4 max-w-none prose dark:prose-dark') }}>
   {{ title_prefix }}
   {% if label %}
     <h2{{ title_attributes }}>{{ label }}</h2>

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/layout/page.html.twig

@@ -45,7 +45,7 @@
  * @ingroup themeable
  */
 #}
-<div class="[ antialiased font-sans leading-relaxed ] [ text-gray-800 ]">
+<div class="[ antialiased font-sans leading-relaxed ] [ text-gray-800 ] [ dark:text-gray-100 dark:bg-gray-700 ]">
   <div class="min-h-screen flex flex-col">
     <div id="nav" class="bg-blue-700">
       <div class="container">

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/node/node.html.twig

@@ -70,7 +70,7 @@
  *   in different view modes.
  */
 #}
-<article{{ attributes.addClass('node min-w-full prose')|without('role') }}>
+<article{{ attributes.addClass('node min-w-full prose dark:prose-dark')|without('role') }}>
 
   {{ title_prefix }}
   {% if not page %}

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 %}

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

@@ -16,7 +16,7 @@
  * @see template_preprocess_views_view_list()
  */
 #}
-{% if attributes.addClass('min-w-full prose') -%}
+{% if attributes.addClass('min-w-full prose dark:prose-dark') -%}
   <div{{ attributes }}>
 {% endif %}
   {% if title %}