From eeb50f6aec0cd4e1a4f7d31fd1b450f65b4f57ae Mon Sep 17 00:00:00 2001
From: Alessio Del Conte <ale.delconte96@gmail.com>
Date: Tue, 7 Jan 2025 12:02:51 +0100
Subject: [PATCH] Add theme selector for swagger

---
 docker/deploy             |  2 +-
 templates/swagger-ui.html | 38 +++++++++++++++++++++++++++++++++++---
 2 files changed, 36 insertions(+), 4 deletions(-)
diff --git a/docker/deploy b/docker/deploy
index ea01aa7..36a7d01 160000
--- a/docker/deploy
+++ b/docker/deploy
@@ -1 +1 @@
-Subproject commit ea01aa7f76d068079c1531e672823bdfa62d20f3
+Subproject commit 36a7d0122a0465db64f6a61c794e5d2bced3e2c6
diff --git a/templates/swagger-ui.html b/templates/swagger-ui.html
index a4caf5a..ec863a1 100644
--- a/templates/swagger-ui.html
+++ b/templates/swagger-ui.html
@@ -1,6 +1,6 @@
 {% load static %}
 {% block style %}
-    <link rel="icon" type="image/ico" href="{% static 'favicon/favicon.svg' %}" />
+    <link rel="icon" type="image/ico" href="{% static 'favicon/favicon.svg' %}"/>
 {% endblock %}
 <!DOCTYPE html>
 <html>
@@ -9,11 +9,42 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="{% static 'css/swagger-ui.css' %}"/>
-    <link rel="stylesheet" type="text/css" href="{% static 'css/swagger-ui-dark.css' %}"/>
+    {#    <link rel="stylesheet" type="text/css" href="{% static 'css/swagger-ui-dark.css' %}"/>#}
 </head>
 <body>
+{# Add selector for theme #}
+<div id="theme-selector" style="position: absolute; top: 0; right: 0; z-index: 1000; padding: 1rem; font-family: sans-serif">
+    <label for="theme-selector-select">Select theme:</label>
+    <select id="theme-selector-select" onInput='selectTheme()' style="min-width: 70px; font-size: 16px">
+        <option value="light">Light</option>
+        <option value="dark">Dark</option>
+    </select>
+</div>
+
 <div id="swagger-ui"></div>
-<script src="{% static 'js/swagger-ui-bundle.js'%}"></script>
+
+<script>
+    function selectTheme() {
+        let theme = document.getElementById("theme-selector-select").value;
+        // if the theme is dark add the dark css
+        if (theme === "dark") {
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.type = 'text/css';
+            link.href = "{% static 'css/swagger-ui-dark.css' %}";
+            document.getElementsByTagName('head')[0].appendChild(link);
+        } else {
+            // remove the dark css
+            const darkCss = document.querySelector('link[href="{% static 'css/swagger-ui-dark.css' %}"]');
+            if (darkCss) {
+                darkCss.remove();
+            }
+        }
+    }
+</script>
+
+<script src="{% static 'js/swagger-ui-bundle.js' %}"></script>
+
 <script>
     const ui = SwaggerUIBundle({
         oauth2RedirectUrl: window.location.origin + "/",
@@ -47,5 +78,6 @@
         scopes: "openid",
     })
 </script>
+
 </body>
 </html>
