Added theme toggle switch

.env.example

@@ -1,7 +1,6 @@
 APP_DEBUG=false
 APP_LANGUAGE=en
 
-DARK_MODE=false
 DISPLAY_READMES=true
 READMES_FIRST=false
 ZIP_DOWNLOADS=true

app/config/app.php

@@ -36,13 +36,6 @@ return [
      */
     'meta_description' => DI\env('META_DESCRIPTION', 'Yet another directory listing, powered by Directory Lister.'),
 
-    /**
-     * Enable dark mode?
-     *
-     * Default value: false
-     */
-    'dark_mode' => DI\env('DARK_MODE', false),
-
     /**
      * Parse and render README files on the page.
      *

app/resources/js/app.js

@@ -4,31 +4,42 @@ import FileInfoModal from './components/file-info-modal.vue';
 const app = new Vue({
     el: '#app',
     components: { FileInfoModal },
-    data: function () {
-        return { menuOpen: false };
-    },
+    data: () => ({
+        theme: 'light',
+        menuOpen: false,
+    }),
     computed: {
-        menuStyles() { return { 'hidden': ! this.menuOpen } }
+        darkMode() {
+            return this.theme === 'dark';
+        },
+        lightMode() {
+            return this.theme === 'light';
+        }
     },
     methods: {
         showFileInfo(filePath) {
             this.$refs.fileInfoModal.show(filePath);
         },
-        toggleMenuVisibility() {
-            this.menuOpen = ! this.menuOpen;
-        }
+        toggleTheme() {
+            this.theme = this.lightMode ? 'dark' : 'light';
+        },
+    },
+    created: function () {
+        this.theme = localStorage.getItem('theme') || 'light';
     },
     mounted: function() {
-        window.addEventListener('keyup', e => e.key == '/' && this.$refs.searchInput.focus());
+        window.addEventListener('keyup', e => e.key === '/' && this.$refs.searchInput.focus());
 
-        let scrollToTop = this.$refs.scrollToTop;
         window.addEventListener('scroll', function() {
             if (window.scrollY > 10) {
-                scrollToTop.classList.remove('hidden');
+                this.$refs.scrollToTop.classList.remove('hidden');
             } else {
-                scrollToTop.classList.add('hidden');
+                this.$refs.scrollToTop.classList.add('hidden');
             }
-        });
+        }.bind(this));
+    },
+    watch: {
+        theme: value => localStorage.setItem('theme', value),
     }
 });
 

app/resources/sass/app.scss

@@ -17,3 +17,8 @@ $fa-font-path: "./webfonts";
 
 // Additional Styles
 @import "markdown.scss";
+
+// Miscellaneous
+[v-cloak] {
+    display: none;
+}

app/translations/da.yaml

@@ -8,6 +8,7 @@ file:
   info: Filoplysninger
 powered_by: Drevet af
 scroll_to_top: Gå til sidens top
+toggle_theme: Skift lys/mørk tilstand
 
 error:
   directory_not_found: Mappen eksisterer ikke

app/translations/de.yaml

@@ -8,6 +8,7 @@ file:
   info: Dateiinformation
 powered_by: Unterstützt von
 scroll_to_top: Nach oben Scrollen
+toggle_theme: Schalten Sie den Hell/Dunkel-Modus um
 
 error:
   directory_not_found: Verzeichnis nicht gefunden

app/translations/en.yaml

@@ -8,6 +8,7 @@ file:
   info: File Info
 powered_by: Powered by
 scroll_to_top: Scroll to Top
+toggle_theme: Toggle Light/Dark Mode
 
 error:
   directory_not_found: Directory does not exist

app/translations/es.yaml

@@ -8,6 +8,7 @@ file:
   info: Información del Archivo
 powered_by: Desarrollado por
 scroll_to_top: Vuelve al Comienzo
+toggle_theme: Alternar modo claro/oscuro
 
 error:
   directory_not_found: El directorio no existe

app/translations/fi.yaml

@@ -8,6 +8,7 @@ file:
   info: Tiedot
 powered_by: Voimanlähteenä
 scroll_to_top: Takaisin ylös
+toggle_theme: Vaihda vaalea/tumma tila
 
 error:
   directory_not_found: Hakemistoa ei ole olemassa

app/translations/fr.yaml

@@ -8,6 +8,7 @@ file:
   info: Informations sur le Fichier
 powered_by: Alimenté par
 scroll_to_top: Retour en Haut
+toggle_theme: Basculer entre le thème clair/sombre
 
 error:
   directory_not_found: Le répertoire n'existe pas

app/translations/gr.yaml

@@ -8,6 +8,7 @@ file:
   info: Πληροφορίες αρχείου
 powered_by: Powered by
 scroll_to_top: Μεταβείτε στην κορυφή
+toggle_theme: Εναλλαγή φωτεινής/σκοτεινής λειτουργίας
 
 error:
   directory_not_found: Ο κατάλογος δεν υπάρχει

app/translations/id.yaml

@@ -8,6 +8,7 @@ file:
   info: Info Berkas
 powered_by: Diberdayakan oleh
 scroll_to_top: Skrol ke atas
+toggle_theme: Alihkan mode terang/gelap
 
 error:
   directory_not_found: Direktori tidak ditemukan

app/translations/it.yaml

@@ -8,6 +8,7 @@ file:
   info: Info
 powered_by: Powered by
 scroll_to_top: Torna su
+toggle_theme: Attiva/disattiva la modalità luce/buio
 
 error:
   directory_not_found: La cartella non esiste

app/translations/kr.yaml

@@ -8,6 +8,7 @@ file:
   info: 파일 정보
 powered_by: Powered by
 scroll_to_top: 맨위로 스크롤
+toggle_theme: 밝게/어둡게 모드 전환
 
 error:
   directory_not_found:  디렉토리 찾을 수 없습니다
@@ -16,4 +17,4 @@ error:
   no_results_found: 검색 결과를 없습니다
   unexpected: 오류가 발생했습니다
 
-enable_debugging: 더 많은 정보 받아기 위해서 디버깅 활성화하세요
+enable_debugging: 더 많은 정보 받아기 위해서 디버깅 활성화하세요

app/translations/nl.yaml

@@ -1,5 +1,5 @@
 home: Home
-download: Download this Directory
+download: Download deze directory
 search: Zoeken
 file:
   name: Bestandsnaam
@@ -8,6 +8,7 @@ file:
   info: Bestandsinformatie
 powered_by: Mogelijk gemaakt door
 scroll_to_top: Ga naar boven
+toggle_theme: Schakel tussen licht/donker modus
 
 error:
   directory_not_found: Map bestaat niet

app/translations/pl.yaml

@@ -8,6 +8,7 @@ file:
   info: Szczegóły
 powered_by: Wspierane przez
 scroll_to_top: Przewiń na górę
+toggle_theme: Przełącz tryb jasny/ciemny
 
 error:
   directory_not_found: Nie znaleziono ścieżki

app/translations/pt-BR.yaml

@@ -8,6 +8,7 @@ file:
   info: Informação do arquivo
 powered_by: Desenvolvido por
 scroll_to_top: Voltar ao início
+toggle_theme: Alternar modo claro/escuro
 
 error:
   directory_not_found: Diretório não existe

app/translations/ro.yaml

@@ -8,6 +8,7 @@ file:
   info: Info Fișier
 powered_by: Cu sprijinul
 scroll_to_top: Derulați la început
+toggle_theme: Comutați modul lumină/întuneric
 
 error:
   directory_not_found: Directorul nu există

app/translations/ru.yaml

@@ -8,6 +8,7 @@ file:
   info: Информация о файле
 powered_by: Питаться от
 scroll_to_top: Пролистать наверх
+toggle_theme: Переключить светлый/темный режим
 
 error:
   directory_not_found: Каталог не существует

app/translations/zh-CN.yaml

@@ -8,6 +8,7 @@ file:
   info: 文件信息
 powered_by: 基于
 scroll_to_top: 回到顶部
+toggle_theme: 切换亮/暗模式
 
 error:
   directory_not_found: 目录不存在

app/translations/zh-TW.yaml

@@ -8,6 +8,7 @@ file:
   info: 文件資訊
 powered_by: 基於
 scroll_to_top: 回到頂部
+toggle_theme: 切換亮/暗模式
 
 error:
   directory_not_found: 目錄不存在

app/views/components/header.twig

@@ -12,18 +12,24 @@
             {% endif %}
         </div>
 
-        <button class="inline-block text-white mx-2 hover:text-gray-400 md:hidden" v-on:click="toggleMenuVisibility">
+        <button class="inline-block text-white mx-2 hover:text-gray-400 md:hidden" v-on:click="menuOpen = ! menuOpen">
             <i class="fas fa-times fa-lg fa-fw" v-if="menuOpen"></i>
             <i class="fas fa-ellipsis-v fa-lg fa-fw" v-else></i>
         </button>
 
-        <div class="flex items-center flex-grow flex-shrink-0 w-full pt-4 space-x-2 md:flex md:max-w-xs md:p-0" v-bind:class="menuStyles">
+        <div class="flex items-center flex-grow flex-shrink-0 w-full pt-4 space-x-2 md:flex md:max-w-xs md:p-0" v-bind:class="{ 'hidden': ! menuOpen }">
             {% if path and files is not empty and config('zip_downloads') %}
                 <a href="{{ zip_url(path) }}" title="{{ translate('download') }}" class="inline-block text-white p-1 hover:text-gray-300">
                     <i class="fas fa-download fa-lg"></i>
                 </a>
             {% endif %}
 
+            <div class="w-8 h-4 flex justify-center items-center bg-gray-900 bg-opacity-30 rounded-full cursor-pointer p-1 duration-300 ease-in-out" title="{{ translate('toggle_theme') }}" v-on:click="toggleTheme">
+                <div class="flex justify-center items-center bg-white w-5 h-5 rounded-full shadow-md transform duration-300 ease-in-out" v-bind:class="{ '-translate-x-2': darkMode, 'translate-x-2': lightMode }">
+                    <i class="fas fa-lightbulb fa-xs" v-bind:class="{ 'text-gray-600': darkMode, 'text-yellow-400': lightMode }"></i>
+                </div>
+            </div>
+
             <div class="flex-1">
                 {% include 'components/search.twig' %}
             </div>

app/views/layouts/app.twig

@@ -4,7 +4,7 @@
 <meta name="description" content="{{ config('meta_description') }}">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
-<link rel="icon" href="{{ config('dark_mode') ? asset('images/favicon.dark.png') : asset('images/favicon.light.png') }}">
+<link rel="icon" href="{{ asset('images/favicon.light.png') }}">
 <link rel="stylesheet" href="{{ asset('app.css') }}">
 
 {% if config('google_analytics_id', false) %}
@@ -17,10 +17,10 @@
 
 <title>{{ title }} &bull; Directory Lister</title>
 
-<body class="{{ config('dark_mode') ? 'dark' : null }}">
-    <div id="app" class="flex flex-col min-h-screen font-sans dark:bg-gray-800">
+<div id="app" v-bind:class="{ dark: darkMode }" v-cloak>
+    <div class="flex flex-col min-h-screen font-sans dark:bg-gray-800">
         {% block content %}{% endblock %}
     </div>
+</div>
 
-    <script src="{{ asset('app.js') }}" defer></script>
-</body>
+<script src="{{ asset('app.js') }}" defer></script>