Add dark mode styles

References #27

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

@@ -0,0 +1,4 @@
+.sidebar .block {
+  @apply p-6 rounded;
+  @apply dark:bg-gray-750
+}

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

@@ -1,3 +1,4 @@
+@import './components/block.pcss';
 @import './components/button.pcss';
 @import './components/container.pcss';
 @import './components/lead.pcss';

web/themes/custom/opdavies/templates/block/block.html.twig

@@ -25,7 +25,7 @@
  * @see template_preprocess_block()
  */
 #}
-<section{{ attributes.addClass('mt-6 first:mt-0') }}>
+<section{{ attributes.addClass('[ block ] [ mt-6 first:mt-0 ]') }}>
   {{ title_prefix }}
   {% if label %}
     <h2{{ title_attributes.addClass('mb-3') }}>

web/themes/custom/opdavies/templates/layout/page.html.twig

@@ -45,7 +45,7 @@
  * @ingroup themeable
  */
 #}
-<div class="antialiased font-sans text-gray-800 leading-relaxed">
+<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-500 border-b-3 border-blue-700">
       <div class="container">
@@ -98,7 +98,7 @@
           </div>{# /.layout-content #}
 
           {% if page.sidebar_second %}
-            <aside role="complementary" class="col-span-12 md:col-span-4">
+            <aside role="complementary" class="sidebar col-span-12 md:col-span-4">
               {{ page.sidebar_second }}
             </aside>
           {% endif %}