From 534a38a63c829c262c419f39f5bf9627cd41d0c2 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Wed, 30 Jun 2021 08:00:00 +0100
Subject: [PATCH] Add dark mode support

---
 source/_layouts/default.html.twig | 4 ++--
 source/_pages/blog.html.twig      | 2 +-
 source/_pages/talks.html.twig     | 2 +-
 source/_partials/navbar.html.twig | 4 ++--
 tailwind.config.js                | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/source/_layouts/default.html.twig b/source/_layouts/default.html.twig
index 0e594c63..026642b0 100644
--- a/source/_layouts/default.html.twig
+++ b/source/_layouts/default.html.twig
@@ -1,12 +1,12 @@
 {% extends 'app' %}
 
 {% block body %}
-    <div class="font-sans text-lg font-light text-gray-900">
+    <div class="font-sans text-lg font-light text-gray-900 dark:bg-gray-900 dark:text-white">
         <a class="sr-only focus:not-sr-only" href="#main-content">Skip to main content</a>
 
         {% include 'navbar' %}
 
-        <div class="my-16">
+        <div class="py-16">
             <div id="main-content" class="max-w-2xl px-4 mx-auto">
                 {% block content_wrapper %}
                     {% block content %}{% endblock %}
diff --git a/source/_pages/blog.html.twig b/source/_pages/blog.html.twig
index 03b8279b..d4a252f7 100644
--- a/source/_pages/blog.html.twig
+++ b/source/_pages/blog.html.twig
@@ -11,7 +11,7 @@ use:
         {% for talk in data.posts %}
             <article>
                 <h2 class="text-xl">
-                    <a class="text-blue-700" href="{{ talk.url }}">
+                    <a class="text-blue-700 dark:text-blue-400" href="{{ talk.url }}">
                         {{ talk.title }}
                     </a>
                 </h2>
diff --git a/source/_pages/talks.html.twig b/source/_pages/talks.html.twig
index d9974b1d..8465eca8 100644
--- a/source/_pages/talks.html.twig
+++ b/source/_pages/talks.html.twig
@@ -11,7 +11,7 @@ use:
         {% for talk in data.talks|sort((a,b) => a.sortable_date < b.sortable_date) %}
             <article>
                 <h2 class="text-xl">
-                    <a class="text-blue-700" href="{{ talk.url }}">
+                    <a class="text-blue-700 dark:text-blue-400" href="{{ talk.url }}">
                         {{ talk.title }}
                     </a>
                 </h2>
diff --git a/source/_partials/navbar.html.twig b/source/_partials/navbar.html.twig
index db485d13..59bdcedf 100644
--- a/source/_partials/navbar.html.twig
+++ b/source/_partials/navbar.html.twig
@@ -5,7 +5,7 @@
                 <a href="/">
                     <svg
                       aria-hidden="true"
-                      class="w-16 h-16 text-blue-700 fill-current md:w-18 md:h-18"
+                      class="w-16 h-16 text-blue-700 fill-current dark:text-blue-400 md:w-18 md:h-18"
                       viewBox="0 0 706 504"
                       xmlns="http://www.w3.org/2000/svg"
                     >
@@ -21,7 +21,7 @@
                 <nav class="flex flex-col items-center mt-4 md:mt-0 md:flex-row md:space-x-4">
                     {% for item in site.menus.main %}
                         {% set is_active = page.url matches '#' ~ item.is_active ~ '#' %}
-                        <a class="text-black border-b-3 py-2 {{ is_active ? 'border-blue-700' : 'border-transparent' }}" href="{{ item.href }}">{{ item.title }}</a>
+                        <a class="text-black dark:text-white border-b-3 py-2 {{ is_active ? 'border-blue-700 dark:border-blue-400' : 'border-transparent' }}" href="{{ item.href }}">{{ item.title }}</a>
                     {% endfor %}
                 </nav>
             </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index e7b804bd..314f045c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,7 +7,7 @@ const typography = require('@tailwindcss/typography')
 const { fontFamily } = defaultTheme
 
 module.exports = {
-  darkMode: false,
+  darkMode: 'media',
   important: true,
   purge: {
     content: [