feat: dark mode for webinterface

fkie-cad · Oct 29, 2024 · da13d5c · da13d5c
1 parent bde744c
commit da13d5c
Show file tree

Hide file tree

Showing 9 changed files with 509 additions and 36 deletions.
diff --git a/src/web_interface/static/css/line_numbering.css b/src/web_interface/static/css/line_numbering.css
@@ -1,7 +1,3 @@
-#preview-div pre{
-  border: 1px solid white;
-}
-
 #preview-div pre .line-number {
   color:black;
   display:block;;

diff --git a/src/web_interface/static/fact_logo_invertible.svg b/src/web_interface/static/fact_logo_invertible.svg
diff --git a/src/web_interface/static/js/system_health.js b/src/web_interface/static/js/system_health.js
@@ -1,6 +1,3 @@
-const BOOTSTRAP_DANGER_COLOR = "#dc3545";
-const BOOTSTRAP_PRIMARY_COLOR = "#007bff";
-
 function change_button(button_id) {
     element = document.getElementById(button_id);
     ["fa-caret-down", "fa-caret-up"].forEach(class_name => element.classList.toggle(class_name));
@@ -86,23 +83,33 @@ function updatePluginCard(pluginName, pluginData) {
     const statsElement = document.getElementById(`${pluginName}-stats`);
     if (pluginData.active > 0) {
         activeIndicatorElement.classList.add("fa-spin");
-        activeIndicatorElement.style.color = BOOTSTRAP_PRIMARY_COLOR;
-        activeElement.style.color = BOOTSTRAP_PRIMARY_COLOR;
+        activeIndicatorElement.classList.remove("text-muted");
+        activeIndicatorElement.classList.add("text-primary");
+        activeElement.classList.remove("text-muted");
+        activeElement.classList.add("text-primary");
     } else {
         activeIndicatorElement.classList.remove("fa-spin");
-        activeIndicatorElement.style.color = "darkgrey";
-        activeElement.style.color = "darkgrey";
+        activeIndicatorElement.classList.remove("text-primary");
+        activeIndicatorElement.classList.add("text-muted");
+        activeElement.classList.remove("text-primary");
+        activeElement.classList.add("text-muted");
     }
     activeElement.innerText = pluginData.active.toString();
     if (pluginData.queue > 100) {
-        queueIndicatorElement.style.color = BOOTSTRAP_DANGER_COLOR;
-        queueElement.style.color = BOOTSTRAP_DANGER_COLOR;
+        queueIndicatorElement.classList.remove("text-muted");
+        queueIndicatorElement.classList.add("text-danger");
+        queueElement.classList.remove("text-muted");
+        queueElement.classList.add("text-danger");
     } else if (pluginData.queue > 0) {
-        queueIndicatorElement.style.color = "black";
-        queueElement.style.color = "black";
+        queueIndicatorElement.classList.remove("text-muted");
+        queueIndicatorElement.classList.remove("text-danger");
+        queueElement.classList.remove("text-muted");
+        queueElement.classList.remove("text-danger");
     } else {
-        queueIndicatorElement.style.color = "darkgrey";
-        queueElement.style.color = "darkgrey";
+        queueIndicatorElement.classList.remove("text-danger");
+        queueIndicatorElement.classList.add("text-muted");
+        queueElement.classList.remove("text-danger");
+        queueElement.classList.add("text-muted");
     }
     queueElement.innerText = pluginData.queue.toString();
     outQueueElement.innerText = pluginData.out_queue.toString();

diff --git a/src/web_interface/templates/base.html b/src/web_interface/templates/base.html
@@ -43,15 +43,30 @@
 
             initQuickSearch();
         });
+
+        function toggleDarkMode() {
+            let isDark = document.body.classList.toggle('dark-mode');
+            localStorage.setItem('darkMode', isDark ? 'enabled' : 'disabled');
+        }
+        document.addEventListener('DOMContentLoaded', (event) => {
+            let isDark = (localStorage.getItem('darkMode') || 'disabled') === 'enabled';
+            document.getElementById("darkModeSwitch").checked = isDark;
+            if (isDark) {
+                toggleDarkMode();
+            }
+        });
     </script>
 
     {% block head %}
     {% endblock %}
 
     <style>
-        a:link{
-            color:#2b669a;
-            text-decoration:none;
+        a {
+            color: inherit;
+        }
+        a:link {
+            color: #2b669a;
+            text-decoration: none;
         }
         .clickable {
             cursor:pointer;
@@ -116,9 +131,90 @@
             width: 100%;
             height: 100%;
             font-size: 14px;
-            color: #515151;
             overflow-wrap: anywhere;
         }
+        :root {
+          --background-color-light: #fff;
+          --text-color-light: #212529;
+          --background-color-dark: #2e3339;
+          --border-color-dark: #454d55;
+          --background-color-dark-element: #343a40;
+          --text-color-dark: #ccc;
+        }
+        body {
+            background-color: var(--background-color-light);
+            color: var(--text-color-light);
+        }
+        .dark-mode {
+            background-color: var(--background-color-dark);
+            color: var(--text-color-dark);
+        }
+        body.dark-mode :is(.list-group-item, .dropdown-item) {
+            color: var(--text-color-dark) !important;
+            border-color: var(--border-color-dark) !important;
+            background-color: inherit !important;
+        }
+        body.dark-mode a.nav-link.active {
+            color: inherit !important;
+            background-color: inherit !important;
+            border-color: var(--border-color-dark) var(--border-color-dark) var(--background-color-dark) !important;
+        }
+        body.dark-mode :is(pre, a, a:link, .pagination-page-info b) {
+            color: var(--text-color-dark) !important;
+        }
+        body.dark-mode :is(div.card, .dropdown-menu, select, input, .list-group-item-action, .modal-content,
+                .table:not(.table-borderless), a.page-link, span.page-link, .btn-light, textarea) {
+            color: var(--text-color-dark) !important;
+            background-color: var(--background-color-dark-element) !important;
+            border: 1px solid var(--border-color-dark) !important;
+        }
+        body.dark-mode :is(.list-group-flush, .table.table-borderless, .bg-light) {
+            color: var(--text-color-dark) !important;
+            background-color: var(--background-color-dark-element) !important;
+        }
+        body.dark-mode :is(th) {
+            color: inherit !important;
+            background-color: inherit !important;
+        }
+        body.dark-mode :is(.input-group-text, .thead-light, .table-head-light) {
+            background-color: var(--secondary) !important;
+            color: var(--text-color-dark) !important;
+            border-color: var(--border-color-dark) !important;
+        }
+        body.dark-mode :is(.table-primary, .list-group-item-primary) {
+            background-color: #385779 !important;
+            color: #7ebcff !important;
+        }
+        body.dark-mode :is(.alert-success, .table-success, .table-success > td) {
+            background-color: #405945 !important;
+            color: #d4edda !important;
+        }
+        body.dark-mode :is(.alert-warning, .table-warning, .table-warning > td) {
+            background-color: #938457 !important;
+            color: #ffe8a4 !important;
+        }
+        body.dark-mode :is(.alert-danger, .table-danger, .table-danger > td) {
+            background-color: #774c4e !important;
+            color: #f5c6cb !important;
+        }
+        body.dark-mode :is(.table-bordered td, .table-bordered th, .border-light, .table td, .table th, .border,
+                .form-control) {
+            border-color: var(--border-color-dark) !important;
+        }
+        body.dark-mode .nav-tabs {
+            border-bottom: 1px solid var(--border-color-dark) !important;
+        }
+        body.dark-mode .hljs {
+            background: inherit;
+            color: var(--text-color-dark);
+        }
+        body.dark-mode .hljs-string {
+            color: #58c5b2;
+        }
+        body.dark-mode :is(.table-hover td:hover, .list-group-item-action:hover, .dropdown-item:hover) {
+            background-color: var(--secondary) !important;
+            color: var(--text-color-dark) !important;
+        }
     </style>
     {% block styles %}{% endblock %}
 </head>
@@ -221,6 +317,15 @@
             {% endfor %}
         </ul>
 
+        {# dark mode switch #}
+        <div class="custom-control custom-switch">
+            <i class="far fa-sun" style="color: #fff; margin-left: -38px; margin-right: 38px;"></i>
+            <input type="checkbox" class="custom-control-input" id="darkModeSwitch" onchange="toggleDarkMode()">
+            <label class="custom-control-label" for="darkModeSwitch">
+                <i class="fas fa-moon" style="color: #fff;"></i>
+            </label>
+        </div>
+
         <!-- Navbar Quick Search Input -->
         <div id="quick_search_div" class="nav navbar-nav ml-md-auto d-block">
             <div class="input-group mr-sm-2" style="z-index: 100;" >

diff --git a/src/web_interface/templates/generic_view/nice_fo_list.html b/src/web_interface/templates/generic_view/nice_fo_list.html
@@ -20,7 +20,7 @@ <h6>{{ number_of_unanalyzed_files }} files not analyzed yet</h6>
         </a>
     {% endif %}
     {% for fo in fo_list %}
-        <div class="list-group-item list-group-item-action border-top">
+        <div class="list-group-item list-group-item-action">
             {{ file_information_span(fo, root_uid, selected_analysis, filename_only) }}
         </div>
     {% endfor %}

diff --git a/src/web_interface/templates/home.html b/src/web_interface/templates/home.html
@@ -18,7 +18,7 @@
 
         <div class="p-0 m-2">
             <center>
-                <img width="100%" height="auto" src="{{ url_for('static', filename='fact_logo.png') }}" style="max-width: 445px;">
+                <img width="100%" height="auto" src="{{ url_for('static', filename='fact_logo_invertible.svg') }}" style="max-width: 445px;">
 
                 <br /><br />
 
@@ -124,7 +124,7 @@ <h4 class="card-title mb-3">Latest Comments</h4>
                                             {{ comment.comment }}
                                         </div>
                                         <div class="footnote">
-                                            <span style="color: #000;">{{ comment.author }}</span> ‒ <span class="text-muted">{{ comment.time | int | nice_unix_time }}</span>
+                                            {{ comment.author }} ‒ <span class="text-muted">{{ comment.time | int | nice_unix_time }}</span>
                                         </div>
                                     </div>
                                 </a>
@@ -143,7 +143,7 @@ <h4 class="card-title mb-3">Latest Comparisons</h4>
                     <ul class="list-group list-group-flush px-0">
                         {% for id, hids, submission_date in latest_comparison_results %}
                             <li class="list-group-item bg-light p-2 clickable li-hover" onclick="location.href='/compare/{{ id }}'">
-                                <a href="/compare/{{ id }}" style="color: #515151;">
+                                <a href="/compare/{{ id }}">
                                     <div class="p-1" style="width: 100%; height: 100%; font-size: 14px;">
                                         {% for uid in hids %}
                                             {{ hids[uid] }}

diff --git a/src/web_interface/templates/show_analysis.html b/src/web_interface/templates/show_analysis.html
@@ -311,7 +311,7 @@ <h5 class="modal-title">Add analysis to file</h5>
                     </button>
 
                     <div id="summary-div">
-                        <div class="mb-3" id="loading-summary-gif" style="display: none; border: 1px solid #dddddd; padding: 5px; text-align: center">
+                        <div class="mb-3 border" id="loading-summary-gif" style="display: none; padding: 5px; text-align: center">
                             <img src="{{ url_for("static", filename = "Pacman.gif") }}" alt="loading gif">
                             <p>Loading summary for included files ..</p>
                         </div>
@@ -354,7 +354,7 @@ <h5 class="modal-title">Add analysis to file</h5>
                                 <button type="button" class="btn btn-primary btn-sm" onclick="load_preview();">Update</button>
                             </div>
                         </div>
-                        <div id="preview-loading-gif" style="display: block; border: 1px solid #dddddd; padding: 5px; text-align: center">
+                        <div id="preview-loading-gif" class="border" style="display: block; padding: 5px; text-align: center">
                             <img src="{{ url_for('static', filename = 'Pacman.gif') }}" alt="loading...">
                         </div>
                         <div id="preview-content" class="m-0 mt-2 p-0"></div>
@@ -411,7 +411,7 @@ <h5 class="modal-title">Add analysis to file</h5>
                                 <div>{{ comment.time|int|nice_unix_time }}</div>
                             </td>
                             <td width="80%">
-                                <span style="font-family: monospace; color: #000; font-size: 14px">
+                                <span style="font-family: monospace; font-size: 14px">
                                     {{ comment.comment | urlize }}
                                 </span>
                             </td>

diff --git a/src/web_interface/templates/system_health.html b/src/web_interface/templates/system_health.html
@@ -84,19 +84,19 @@ <h6 class="card-subtitle mb-2 text-muted">{{ version }}</h6>
                     <td style="width: 46px;">{{ threads }}</td>
 
                     <td style="width: 30px;" data-toggle="tooltip" data-placement="bottom" title="Currently processing">
-                        <i class="fas fa-cog" style="color: darkgrey" id="{{ plugin_name }}-active-indicator"></i>
+                        <i class="fas fa-cog text-muted" id="{{ plugin_name }}-active-indicator"></i>
                     </td>
-                    <td style="width: 46px;" id="{{ plugin_name }}-active"></td>
+                    <td class="text-muted" style="width: 46px;" id="{{ plugin_name }}-active"></td>
 
                     <td style="width: 20px;" data-toggle="tooltip" data-placement="bottom" title="Pending tasks">
-                        <i class="fas fa-sign-in-alt" style="color: darkgrey" id="{{ plugin_name }}-queue-indicator"></i>
+                        <i class="fas fa-sign-in-alt text-muted" id="{{ plugin_name }}-queue-indicator"></i>
                     </td>
-                    <td id="{{ plugin_name }}-queue"></td>
+                    <td class="text-muted" id="{{ plugin_name }}-queue"></td>
 
                     <td style="width: 20px;" data-toggle="tooltip" data-placement="bottom" title="Finished tasks ready for collection">
-                        <i class="fas fa-sign-out-alt" style="color: darkgrey" id="{{ plugin_name }}-out-queue-indicator"></i>
+                        <i class="fas fa-sign-out-alt text-muted" id="{{ plugin_name }}-out-queue-indicator"></i>
                     </td>
-                    <td id="{{ plugin_name }}-out-queue"></td>
+                    <td class="text-muted" id="{{ plugin_name }}-out-queue"></td>
                 </tr>
             </table>
 

diff --git a/src/web_interface/templates/upload/upload_successful.html b/src/web_interface/templates/upload/upload_successful.html
@@ -6,7 +6,7 @@
     <div class="alert alert-success mt-4">
         <h3 class="alert-heading">Upload Successful</h3>
         <hr />
-        The analysis results will be available <a href="/analysis/{{ uid | safe }}">here</a> when ready.
-        You can monitor the analysis and unpacking progress <a href="/system_health">here</a>.
+        The analysis results will be available <a href="/analysis/{{ uid | safe }}"><i class="fas fa-arrow-up-right-from-square"></i> here</a> when ready.
+        You can monitor the analysis and unpacking progress <a href="/system_health"><i class="fas fa-arrow-up-right-from-square"></i> here</a>.
     </div>
 {% endblock %}