Add dark mode support

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

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>

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>

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>

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: [