Updated dark mode to use Tailwind dark mode utilities

app/resources/js/components/file-info-modal.vue

@@ -1,12 +1,11 @@
 <template>
     <div id="file-info-modal" v-bind:class="this.styles" v-on:click.self="hide()"
-        class="fixed top-0 flex justify-center items-center w-screen h-screen p-4 z-50"
-        style="background-color: hsla(218, 23%, 23%, 0.5)"
+        class="fixed top-0 flex justify-center items-center bg-gray-800 bg-opacity-50 w-screen h-screen p-4 z-50 dark:bg-gray-600 dark:bg-opacity-50"
     >
         <div id="file-info-dialogue" v-show="! loading"
-            class="transition duration-500 ease-in-out bg-white rounded-lg shadow-lg overflow-hidden"
+            class="bg-white rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:text-white"
         >
-            <header class="flex justify-between items-center bg-blue-600 p-4">
+            <header class="flex justify-between items-center bg-blue-600 p-4 dark:bg-purple-700">
                 <i class="fas fa-info-circle fa-lg text-white"></i>
 
                 <div class="items-center text-xl text-white font-mono mx-4">
@@ -14,7 +13,7 @@
                 </div>
 
                 <button v-on:click="hide()"
-                    class="flex justify-center items-center rounded-full w-6 h-6 text-blue-900 text-sm hover:bg-red-700 hover:text-white hover:shadow"
+                    class="flex justify-center items-center rounded-full w-6 h-6 text-gray-900 text-opacity-50 text-sm hover:bg-red-700 hover:text-white hover:shadow"
                 >
                     <i class="fas fa-times"></i>
                 </button>

app/resources/sass/app.scss

@@ -17,7 +17,6 @@ $fa-font-path: "./webfonts";
 
 // Additional Styles
 @import "markdown.scss";
-@import "dark-mode.scss";
 
 // Miscellaneous
 :target::before {

app/resources/sass/dark-mode.scss

@@ -1,109 +0,0 @@
-#app.dark-mode {
-    @apply bg-gray-800;
-
-    header {
-        @apply bg-purple-700;
-
-        #search {
-            @apply bg-purple-800;
-
-            i.fa-search {
-                @apply text-purple-900;
-            }
-
-            a {
-                @apply text-purple-900;
-
-                &:hover {
-                    @apply text-white;
-                }
-            }
-        }
-    }
-
-    #content {
-        @apply text-white;
-    }
-
-    #file-list a:hover {
-        @apply bg-purple-700;
-
-        button:hover {
-            @apply bg-purple-900;
-        }
-    }
-
-    footer {
-        @apply text-white;
-        @apply border-white;
-
-        a:hover {
-            @apply text-purple-600;
-        }
-    }
-
-    #scroll-to-top {
-        @apply bg-purple-700;
-    }
-
-    #file-info-modal {
-        background-color: hsla(218, 23%, 33%, 0.5) !important;
-
-        #file-info-dialogue {
-            @apply bg-gray-800;
-            @apply text-white;
-
-            header {
-                @apply bg-purple-700;
-
-                button {
-                    @apply text-purple-900;
-
-                    &:hover {
-                        @apply text-white;
-                    }
-                }
-            }
-        }
-    }
-
-    #readme {
-        article {
-            @apply bg-gray-900;
-            @apply border-0;
-        }
-    }
-
-    .markdown {
-        a {
-            @apply text-purple-600;
-
-            &:hover {
-                @apply text-purple-800;
-            }
-        }
-
-        h1,
-        h2 {
-            @apply border-gray-800;
-        }
-
-        h6 {
-            @apply text-base;
-            @apply text-gray-600;
-        }
-
-        code {
-            @apply bg-gray-800;
-        }
-
-        hr {
-            @apply border-gray-800;
-        }
-
-        .hljs,
-        .hljs-keyword {
-            @apply text-white;
-        }
-    }
-}

app/resources/sass/markdown.scss

@@ -13,18 +13,11 @@
         @apply inline;
     }
 
-    p,
-    blockquote,
-    ul,
-    ol,
-    dl,
-    table,
-    pre {
+    p, blockquote, ul, ol, dl, table, pre {
         @apply my-4;
     }
 
-    ul,
-    ol {
+    ul, ol {
         @apply pl-8;
     }
 
@@ -61,18 +54,11 @@
         @apply text-gray-600;
     }
 
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
+    h1, h2, h3, h4, h5, h6 {
         @apply font-bold leading-relaxed mt-8 mb-4;
     }
 
-    h1 + p,
-    h2 + p,
-    h3 + p {
+    h1 + p, h2 + p, h3 + p {
         @apply mt-4;
     }
 
@@ -95,8 +81,7 @@
     table {
         @apply table;
 
-        th,
-        td {
+        th, td {
             @apply border border-gray-400 p-1;
         }
 
@@ -123,3 +108,34 @@
         @apply mb-0;
     }
 }
+
+body.dark .markdown {
+    a {
+        @apply text-purple-600;
+
+        &:hover {
+            @apply text-purple-800;
+        }
+    }
+
+    h1, h2 {
+        @apply border-gray-800;
+    }
+
+    h6 {
+        @apply text-base;
+        @apply text-gray-600;
+    }
+
+    code {
+        @apply bg-gray-800;
+    }
+
+    hr {
+        @apply border-gray-800;
+    }
+
+    .hljs, .hljs-keyword {
+        @apply text-white;
+    }
+}

app/views/components/file.twig

@@ -1,6 +1,6 @@
 <a
     href="{{ parentDir ? parent_url(path) : file_url(file.getPathname) }}"
-    class="flex flex-col items-center rounded-lg font-mono group hover:bg-gray-100 hover:shadow"
+    class="flex flex-col items-center rounded-lg font-mono group hover:bg-gray-100 hover:shadow dark:hover:bg-purple-700"
 >
     <div class="flex justify-between items-center p-4 w-full">
         <div class="pr-2">
@@ -19,7 +19,7 @@
             <div class="ml-2">
                 <button
                     title="{{ translate('file.info') }}"
-                    class="flex justify-center items-center rounded-full p-2 -m-1 md:invisible hover:bg-gray-300 hover:shadow group-hover:visible"
+                    class="flex justify-center items-center rounded-full p-2 -m-1 md:invisible hover:bg-gray-300 hover:shadow dark:hover:bg-purple-900 group-hover:visible"
                     v-on:click.prevent="showFileInfo('{{ url(file.getPathname) | escape('js') }}')"
                 >
                     <i class="fas fa-info-circle"></i>

app/views/components/footer.twig

@@ -1,7 +1,7 @@
-<footer class="container border-t-2 border-gray-800 text-center mx-auto px-4 py-8 xl:max-w-screen-xl">
+<footer class="container border-t-2 border-gray-800 text-center mx-auto px-4 py-8 xl:max-w-screen-xl dark:text-white dark:border-white">
     <div class="flex flex-col justify-center items-center">
         <p class="mb-4">
-            {{ translate('powered_by') }} <a href="https://www.directorylister.com" class="underline hover:text-blue-700">Directory Lister</a>
+            {{ translate('powered_by') }} <a href="https://www.directorylister.com" class="underline hover:text-blue-700 dark:hover:text-purple-700">Directory Lister</a>
         </p>
 
         <div class="flex">

app/views/components/header.twig

@@ -1,4 +1,4 @@
-<header id="header" class="bg-blue-600 shadow sticky top-0">
+<header id="header" class="bg-blue-600 shadow sticky top-0 dark:bg-purple-700">
     <div class="container flex justify-between flex-wrap items-center mx-auto p-4 md:flex-row xl:max-w-screen-xl">
         <div class="flex-1 font-mono text-white text-sm tracking-tight overflow-x-auto whitespace-nowrap py-1">
             <a href="." class="inline-block hover:underline">

app/views/components/readme.twig

@@ -1,10 +1,10 @@
 <div id="readme" class="my-4 {{ config('readmes_first') ? 'order-first' : null }}">
     <div class="rounded-lg overflow-hidden shadow-md">
-        <header class="flex items-center bg-blue-600 px-4 py-3 text-white">
+        <header class="flex items-center bg-blue-600 px-4 py-3 text-white dark:bg-purple-700">
             <i class="fas fa-book fa-lg pr-3"></i> README.md
         </header>
 
-        <article class="bg-gray-100 rounded-b-lg px-4 py-8 sm:px-6 md:px-8 lg:px-12 {{ readme.getExtension == 'md' ? 'markdown' : 'font-mono' }}" v-pre>
+        <article class="bg-gray-100 rounded-b-lg px-4 py-8 sm:px-6 md:px-8 lg:px-12 dark:bg-gray-900 dark:border-0 {{ readme.getExtension == 'md' ? 'markdown' : 'font-mono' }}" v-pre>
             {% if readme.getExtension == 'md' %}
                 {{ markdown(readme.getContents) | raw }}
             {% else %}

app/views/components/scroll-to-top.twig

@@ -1,7 +1,7 @@
 <div class="fixed bottom-0 left-0 right-0 pointer-events-none">
     <div class="container flex justify-end mx-auto px-4 py-10 xl:max-w-screen-xl">
         <button id="scroll-to-top" ref="scrollToTop"  title="{{ translate('scroll_to_top') }}"
-            class="flex justify-center items-center w-12 h-12 right-0 rounded-full shadow-lg bg-blue-600 text-white cursor-pointer pointer-events-auto hover:bg-blue-700 hidden"
+            class="hidden flex justify-center items-center w-12 h-12 right-0 rounded-full shadow-lg bg-blue-600 text-white cursor-pointer pointer-events-auto hover:bg-blue-700 dark:bg-purple-700 dark:hover:bg-purple-800"
             onclick="window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });"
         >
             <i class="fas fa-arrow-up fa-lg"></i>

app/views/components/search.twig

@@ -1,11 +1,11 @@
-<form id="search" action="." method="get" class="group relative block bg-blue-700 rounded-full shadow-inner">
+<form id="search" action="." method="get" class="group relative block bg-blue-700 rounded-full shadow-inner dark:bg-purple-800">
     <input type="text" value="{{ search }}" name="search" placeholder="{{ translate('search') }}..."
         class="bg-transparent placeholder-gray-900 text-white w-full px-10 py-2"
         ref="searchInput" v-on:focus="$event.target.select()"
     >
 
     <div class="flex items-center absolute left-0 inset-y-0 ml-2 pointer-events-none">
-        <div class="flex justify-center items-center text-blue-900 w-6 h-6">
+        <div class="flex justify-center items-center text-gray-900 text-opacity-50 w-6 h-6">
             <i class="fas fa-search fa-fw"></i>
         </div>
     </div>
@@ -13,7 +13,7 @@
 
     {% if search %}
         <div class="flex items-center absolute right-0 inset-y-0 mr-2">
-            <a href="."  class="flex justify-center items-center rounded-full text-blue-900 w-6 h-6 hover:bg-red-700 hover:text-white hover:shadow">
+            <a href="."  class="flex justify-center items-center rounded-full text-gray-900 text-opacity-50 w-6 h-6 hover:bg-red-700 hover:text-white hover:text-opacity-100 hover:shadow">
                 <i class="fas fa-times"></i>
             </a>
         </div>

app/views/index.twig

@@ -3,7 +3,7 @@
 {% block content %}
     {% include "components/header.twig" %}
 
-    <div id="content" class="flex flex-col flex-grow container mx-auto px-4 xl:max-w-screen-xl">
+    <div id="content" class="flex flex-col flex-grow container mx-auto px-4 xl:max-w-screen-xl dark:text-white">
         <div class="my-4">
             <div class="flex justify-between font-bold p-4">
                 <div class="flex-grow font-mono mr-2">

app/views/layouts/app.twig

@@ -17,8 +17,10 @@
 
 <title>{{ title }} &bull; Directory Lister</title>
 
-<div id="app" class="flex flex-col min-h-screen font-sans {{ config('dark_mode') ? 'dark-mode' : 'light-mode' }}">
-    {% block content %}{% endblock %}
-</div>
+<body class="{{ config('dark_mode') ? 'dark' : null }}">
+    <div id="app" class="flex flex-col min-h-screen font-sans dark:bg-gray-800">
+        {% block content %}{% endblock %}
+    </div>
 
-<script src="{{ asset('app.js') }}" defer></script>
+    <script src="{{ asset('app.js') }}" defer></script>
+</body>

tailwind.config.js

@@ -2,6 +2,7 @@ const defaultTheme = require('tailwindcss/defaultTheme');
 const colors = require('tailwindcss/colors');
 
 module.exports = {
+    darkMode: 'class',
     plugins: [],
     purge: {
         mode: 'all',
@@ -35,6 +36,7 @@ module.exports = {
         }
     },
     variants: {
+        backgroundOpacity: ['dark'],
         visibility: ['responsive', 'hover', 'group-hover']
     }
 };