From 44bab2467f69c3ec6f17f0b207e9cfcb7074f1b3 Mon Sep 17 00:00:00 2001
From: Ahmad Shakib <sabist@users.noreply.github.com>
Date: Fri, 9 Aug 2024 08:31:05 +0330
Subject: [PATCH] Add dark mode config and styles (#598)

Co-authored-by: Darius Matulionis <darius.matulionis@supermetrics.com>
---
 config/l5-swagger.php           |  1 +
 resources/views/index.blade.php | 88 ++++++++++++++++++++++++++++++++-
 2 files changed, 88 insertions(+), 1 deletion(-)

diff --git a/config/l5-swagger.php b/config/l5-swagger.php
index ae90118..38bc42a 100644
--- a/config/l5-swagger.php
+++ b/config/l5-swagger.php
@@ -256,6 +256,7 @@
          */
         'ui' => [
             'display' => [
+                'dark_mode' => env('L5_SWAGGER_UI_DARK_MODE', false),
                 /*
                  * Controls the default expansion setting for the operations and tags. It can be :
                  * 'list' (expands only the tags),
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index da60ada..cc9cc7c 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -25,9 +25,95 @@
       background: #fafafa;
     }
     </style>
+    @if(config('l5-swagger.defaults.ui.display.dark_mode'))
+        <style>
+            body#dark-mode,
+            #dark-mode .scheme-container {
+                background: #1b1b1b;
+            }
+            #dark-mode .scheme-container,
+            #dark-mode .opblock .opblock-section-header{
+                box-shadow: 0 1px 2px 0 rgba(255, 255, 255, 0.15);
+            }
+            #dark-mode .operation-filter-input,
+            #dark-mode .dialog-ux .modal-ux,
+            #dark-mode input[type=email],
+            #dark-mode input[type=file],
+            #dark-mode input[type=password],
+            #dark-mode input[type=search],
+            #dark-mode input[type=text],
+            #dark-mode textarea{
+                background: #343434;
+                color: #e7e7e7;
+            }
+            #dark-mode .title,
+            #dark-mode li,
+            #dark-mode p,
+            #dark-mode table,
+            #dark-mode label,
+            #dark-mode .opblock-tag,
+            #dark-mode .opblock .opblock-summary-operation-id,
+            #dark-mode .opblock .opblock-summary-path,
+            #dark-mode .opblock .opblock-summary-path__deprecated,
+            #dark-mode h1,
+            #dark-mode h2,
+            #dark-mode h3,
+            #dark-mode h4,
+            #dark-mode h5,
+            #dark-mode .btn,
+            #dark-mode .tab li,
+            #dark-mode .parameter__name,
+            #dark-mode .parameter__type,
+            #dark-mode .prop-format,
+            #dark-mode .loading-container .loading:after{
+                color: #e7e7e7;
+            }
+            #dark-mode .opblock-description-wrapper p,
+            #dark-mode .opblock-external-docs-wrapper p,
+            #dark-mode .opblock-title_normal p,
+            #dark-mode .response-col_status,
+            #dark-mode table thead tr td,
+            #dark-mode table thead tr th,
+            #dark-mode .response-col_links,
+            #dark-mode .swagger-ui{
+                color: wheat;
+            }
+            #dark-mode .parameter__extension,
+            #dark-mode .parameter__in,
+            #dark-mode .model-title{
+                color: #949494;
+            }
+            #dark-mode table thead tr td,
+            #dark-mode table thead tr th{
+                border-color: rgba(120,120,120,.2);
+            }
+            #dark-mode .opblock .opblock-section-header{
+                background: transparent;
+            }
+            #dark-mode .opblock.opblock-post{
+                background: rgba(73,204,144,.25);
+            }
+            #dark-mode .opblock.opblock-get{
+                background: rgba(97,175,254,.25);
+            }
+            #dark-mode .opblock.opblock-put{
+                background: rgba(252,161,48,.25);
+            }
+            #dark-mode .opblock.opblock-delete{
+                background: rgba(249,62,62,.25);
+            }
+            #dark-mode .loading-container .loading:before{
+                border-color: rgba(255,255,255,10%);
+                border-top-color: rgba(255,255,255,.6);
+            }
+            #dark-mode svg:not(:root){
+                fill: #e7e7e7;
+            }
+        </style>
+    @endif
 </head>
 
-<body>
+<body @if(config('l5-swagger.defaults.ui.display.dark_mode')) id="dark-mode" @endif>
 <div id="swagger-ui"></div>
 
 <script src="{{ l5_swagger_asset($documentation, 'swagger-ui-bundle.js') }}"></script>