Add dark mode support

.gitignore

@@ -1,2 +1,2 @@
-dist/
+web/build/
 node_modules/

assets/css/tailwind.pcss

@@ -8,20 +8,26 @@ a:focus {
 @tailwind components;
 
 .nav-item {
-    @apply flex text-gray-200 text-xs;
+    @apply flex text-gray-900 text-xs;
 
     @screen lg {
         @apply text-sm
     }
+
+    @screen dark {
+        @apply text-gray-200
+    }
 }
 
 @tailwind utilities;
 
-.filter-contrast-1 {
+@variants responsive {
-    filter: contrast(1%)
+    .filter-contrast-1 {
-}
+        filter: contrast(1%)
-.filter-invert-100 {
+    }
-    filter: invert(100%)
+    .filter-invert-100 {
+        filter: invert(100%)
+    }
 }
 
 .with-arrow:after {

tailwind.config.js

@@ -7,6 +7,8 @@ module.exports = {
         500: "#42a7ff",
       },
       gray: {
+        50: "#f9f9f9",
+        100: "#f5f5f5",
         200: "#aaa",
         700: "#36393e",
         750: "#2e3136",
@@ -22,7 +24,11 @@ module.exports = {
       serif: ["Lucida Grande"],
       georgia: ["Georgia"],
     },
-    extend: {},
+    extend: {
+      screens: {
+        dark: { raw: "(prefers-color-scheme: dark)" },
+      },
+    },
   },
   variants: {
     borderWidth: ["responsive", "hover", "focus"],

web/build/entrypoints.json

@@ -1,9 +0,0 @@
-{
-  "entrypoints": {
-    "app": {
-      "css": [
-        "/build/app.css"
-      ]
-    }
-  }
-}

web/build/manifest.json

@@ -1,3 +0,0 @@
-{
-  "build/app.css": "/build/app.css"
-}

web/index.html

@@ -36,12 +36,13 @@
           on GitHub.
         </div>
       </div>
-      <div class="py-3 md:bg-gray-800 md:py-5">
+
+      <div class="py-3 bg-gray-100 dark:bg-gray-800 md:py-5">
         <div class="w-full max-w-5xl px-4 mx-auto">
           <div class="flex items-center justify-between">
             <div>
               <img
-                class="w-auto h-6 md:h-12 filter-invert-100"
+                class="w-auto h-6 md:h-12 dark:filter-invert-100"
                 src="https://symfony.com/images/logos/header-logo.svg"
                 alt=""
               />
@@ -58,7 +59,7 @@
                 ></path>
               </svg>
               <img
-                class="hidden h-4 md:block filter-contrast-1"
+                class="hidden h-4 md:block dark:filter-contrast-1"
                 src="https://symfony.com/images/pictos/slsponsor.svg"
                 alt=""
               />
@@ -67,7 +68,7 @@
         </div>
       </div>
 
-      <div class="hidden md:block bg-gray-750">
+      <div class="hidden md:block bg-gray-50 dark:bg-gray-750">
         <div class="w-full max-w-5xl px-4 mx-auto">
           <nav class="flex items-center justify-between py-2">
             <a class="nav-item" href="#">About</a>
@@ -113,7 +114,7 @@
         </div>
       </div>
 
-      <div class="text-gray-200 bg-gray-700">
+      <div class="text-gray-900 bg-white dark:text-gray-200 dark:bg-gray-700">
         <div class="w-full max-w-5xl px-4 py-8 mx-auto">
           <div class="space-y-16">
             <div class="grid grid-cols-1 gap-10 md:grid-cols-3">
@@ -150,7 +151,7 @@
               </section>
 
               <section>
-                <div class="p-4 rounded-lg bg-gray-750">
+                <div class="p-4 bg-gray-100 rounded-lg dark:bg-gray-750">
                   <div class="flex">
                     <svg
                       class="w-12 fill-current flex-no-shrink text-silver-500"