Implemented theme config and dark-mode

app/themes/default/config.php

@@ -0,0 +1,6 @@
+<?php
+
+return [
+    /** Enable dark mode? */
+    'dark_mode' => false
+];

app/themes/default/functions.php

@@ -13,6 +13,27 @@ return [
                 : $icons[$file->getExtension()] ?? 'fas fa-file';
 
             return "<i class=\"{$icon} fa-fw fa-lg\"></i>";
-        })
+        }),
+
+        /**
+         * Retrieve an item from the theme config.
+         *
+         * @param string $key
+         * @param mixed  $default
+         *
+         * @return mixed
+         */
+        new TwigFunction('config', function (string $key, $default = null) {
+            $config = require __DIR__ . '/config.php';
+
+            foreach (explode('.', $key) as $k) {
+                if (! isset($config[$k])) {
+                    return $default;
+                }
+                $config = $config[$k];
+            }
+
+            return $config;
+        }),
     ]
 ];

app/themes/default/index.twig

@@ -6,8 +6,8 @@
 
 <title>Directory Lister</title>
 
-<div id="app" class="font-mono min-h-screen">
-    <header class="block bg-blue-600 shadow sticky top-0 text-white text-sm tracking-tight">
+<div id="app" class="font-mono min-h-screen {{ config('dark_mode') ? 'dark-mode' : '' }}">
+    <header id="header" class="block bg-blue-600 shadow sticky top-0 text-white text-sm tracking-tight">
         <div class="container mx-auto p-4">
             <a href="/" class="hover:underline">Home</a>
 
@@ -17,8 +17,8 @@
         </div>
     </header>
 
-    <div class="container mx-auto px-4">
-        <ul class="py-8">
+    <div id="content" class="container mx-auto px-4">
+        <ul id="file-list" class="py-8">
             <div class="flex justify-between font-bold p-4">
                 <div class="flex-grow mr-2">
                     File Name

app/themes/default/src/sass/app.scss

@@ -11,3 +11,5 @@ $fa-font-path: "./webfonts";
 
 // Fonts
 // @import url("https://fonts.googleapis.com/css?family=Lato");
+
+@import "dark-mode.scss";

app/themes/default/src/sass/dark-mode.scss

@@ -0,0 +1,23 @@
+#app.dark-mode {
+    @apply bg-gray-800;
+
+    header {
+        @apply bg-purple-700;
+    }
+
+    #content {
+        @apply text-white;
+    }
+
+    #file-list a:hover {
+        @apply bg-purple-700;
+    }
+
+    footer {
+        @apply text-white;
+
+        a:hover {
+            @apply text-purple-600;
+        }
+    }
+}

app/themes/default/webpack.mix.js

@@ -15,9 +15,9 @@ mix.copyDirectory(
 );
 
 mix.purgeCss({
-    extensions: ["html", "scss", "twig"],
-    globs: ["*.twig"],
+    extensions: ["html", "js", "php", "scss", "twig", "vue"],
+    globs: ["**/*.php", "**/*.scss", "**/*.twig"],
     folders: ["src"],
-    whitelist: ["html", "body", "main"],
+    whitelist: ["html", "body", "main", "fab", "far", "fas", "fal", "fad"],
     whitelistPatterns: [/^fa\-/]
 });