Added the ability to explicitly and implicitly select a theme

TheDragonCode · Oct 5, 2020 · cd4fa8c · cd4fa8c
1 parent 214932f
commit cd4fa8c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/config/pretty-routes.php b/config/pretty-routes.php
@@ -39,8 +39,15 @@
     ],
 
     /*
-     * Set a dark theme.
+     * Set a light or dark themes.
+     *
+     * Available:
+     *   light  - always chooses a light theme.
+     *   dark   - always chooses a dark theme.
+     *   auto   - automatic theme detection from browser.
+     *
+     * By default, auto
      */
 
-    'dark' => false,
+    'color_scheme' => 'auto',
 ];
diff --git a/resources/views/routes.blade.php b/resources/views/routes.blade.php
@@ -109,11 +109,24 @@ class="deprecated"
         deprecated: '@lang("Deprecated")'
     };
 
+    const colorScheme = () => {
+        let value = "{{ config('pretty-routes.color_scheme', 'auto') }}";
+
+        switch (value) {
+            case 'dark':
+                return true;
+            case 'light':
+                return false;
+            default:
+                return (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
+        }
+    };
+
     new Vue({
         el: '#app',
         vuetify: new Vuetify({
             theme: {
-                dark: {{ config('pretty-routes.dark', false) ? 'true' : 'false' }}
+                dark: colorScheme()
             }
         }),