add support for automatic color mode (#923)

* add support for automatic color mode

* standardize naming

* remove comments, fix formatting

---------

Co-authored-by: Roman Lytvynenko <[email protected]>

Author: macbookandrew

config/scramble.php

@@ -42,7 +42,7 @@
         'title' => null,
 
         /*
-         * Define the theme of the documentation. Available options are `light` and `dark`.
+         * Define the theme of the documentation. Available options are `light`, `dark`, and `system`.
          */
         'theme' => 'light',
 

resources/views/docs.blade.php

@@ -65,5 +65,24 @@
         docs.apiDescriptionDocument = @json($spec);
     })();
 </script>
+
+@if($config->get('ui.theme', 'light') === 'system')
+    <script>
+        var mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+        function updateTheme(e) {
+            if (e.matches) {
+                window.document.documentElement.setAttribute('data-theme', 'dark');
+                window.document.getElementsByName('color-scheme')[0].setAttribute('content', 'dark');
+            } else {
+                window.document.documentElement.setAttribute('data-theme', 'light');
+                window.document.getElementsByName('color-scheme')[0].setAttribute('content', 'light');
+            }
+        }
+
+        mediaQuery.addEventListener('change', updateTheme);
+        updateTheme(mediaQuery);
+    </script>
+@endif
 </body>
 </html>