From 0f288f738484ef1cc43f13c7dbaca50e89fb5413 Mon Sep 17 00:00:00 2001
From: Sergey Efimov <efimov90@gmail.com>
Date: Thu, 13 Mar 2025 19:16:46 +0300
Subject: [PATCH 01/10] Initial-theme-fix

Added light.css
Added dark.css
Added link for light.css and dark.css with media attribute
Added switcher
---
 .../rabbitmq_management/priv/www/css/dark.css |  17 +++
 .../priv/www/css/light.css                    |  17 +++
 .../rabbitmq_management/priv/www/css/main.css |  91 ++++++++++++
 .../rabbitmq_management/priv/www/img/auto.svg |  67 +++++++++
 .../rabbitmq_management/priv/www/img/dark.svg |  63 +++++++++
 .../priv/www/img/light.svg                    | 130 ++++++++++++++++++
 .../priv/www/img/status.svg                   |  64 +++++++++
 deps/rabbitmq_management/priv/www/index.html  |   7 +-
 .../priv/www/js/theme-switcher.js             |  84 +++++++++++
 .../priv/www/js/tmpl/layout.ejs               |   9 ++
 10 files changed, 548 insertions(+), 1 deletion(-)
 create mode 100644 deps/rabbitmq_management/priv/www/css/dark.css
 create mode 100644 deps/rabbitmq_management/priv/www/css/light.css
 create mode 100644 deps/rabbitmq_management/priv/www/img/auto.svg
 create mode 100644 deps/rabbitmq_management/priv/www/img/dark.svg
 create mode 100644 deps/rabbitmq_management/priv/www/img/light.svg
 create mode 100644 deps/rabbitmq_management/priv/www/img/status.svg
 create mode 100644 deps/rabbitmq_management/priv/www/js/theme-switcher.js

diff --git a/deps/rabbitmq_management/priv/www/css/dark.css b/deps/rabbitmq_management/priv/www/css/dark.css
new file mode 100644
index 000000000000..eb25ef9eb351
--- /dev/null
+++ b/deps/rabbitmq_management/priv/www/css/dark.css
@@ -0,0 +1,17 @@
+:root {
+ 
+}
+
+/* Theme switcher */
+
+.switcher__radio {
+    filter: invert(1);
+}
+
+.switcher__radio:checked {
+    filter: invert(0);
+}
+
+.switcher__status {
+    filter: invert(1);
+}
diff --git a/deps/rabbitmq_management/priv/www/css/light.css b/deps/rabbitmq_management/priv/www/css/light.css
new file mode 100644
index 000000000000..a5d49b27858e
--- /dev/null
+++ b/deps/rabbitmq_management/priv/www/css/light.css
@@ -0,0 +1,17 @@
+:root {
+
+}
+
+/* Theme switcher */
+
+.switcher__radio {
+    filter: invert(0);
+}
+
+.switcher__radio:checked {
+    filter: invert(1);
+}
+
+.switcher__status {
+    filter: invert(0);
+}
diff --git a/deps/rabbitmq_management/priv/www/css/main.css b/deps/rabbitmq_management/priv/www/css/main.css
index d03933845bdb..7a881847bddd 100644
--- a/deps/rabbitmq_management/priv/www/css/main.css
+++ b/deps/rabbitmq_management/priv/www/css/main.css
@@ -1,3 +1,7 @@
+:root {
+  color-scheme: light dark;
+}
+
 body { font: 12px Verdana, sans-serif; color: #484848; padding: 0; margin: 0; }
 input, button, a.button { font: 12px Verdana, sans-serif; }
 
@@ -428,3 +432,90 @@ input.toggle:checked + label.toggle:after {
 .yellow-background {
   background-color: #ffff7b;
 }
+
+/* Theme switcher */
+
+.switcher {
+  height: 32px;
+  width: 96px;
+  position: relative;
+  margin: 2px;
+  margin-left: -50px;
+  padding: 2px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  border: none;
+}
+
+/* Theme switcher legend */
+
+.switcher__legend {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Theme switcher radio */
+
+.switcher__radio {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+  width: 32px;
+  height: 32px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 24px;
+  transition: filter 0.1s ease-in;
+}
+
+.switcher__radio:focus {
+  outline: none;
+}
+
+.switcher__radio--light {
+  background-image: url('../ing/light.svg');
+}
+
+.switcher__radio--auto {
+  background-image: url('../ing/auto.svg');
+}
+
+.switcher__radio--dark {
+  background-image: url('../img/dark.svg');
+}
+
+/* Switcher status */
+
+.switcher__status {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  box-shadow: 0 0 0 2px rgb(0 0 0 /0.2);
+  border-radius: 18px;
+  background-color: rgb(255 255 255 / 0.5);
+  background-repeat: no-repeat;
+  background-image: url('../ing/status.svg');
+  background-size: 32px;
+  background-position: center;
+  transition: background-position 0.1s ease-in;
+}
+
+.switcher__radio:focus-visible ~ .switcher__status {
+  box-shadow: 0 0 0 2px black;
+}
+
+.switcher__radio--light:checked ~ .switcher__status {
+  background-position: left 2px center;
+}
+
+.switcher__radio--auto:checked ~ .switcher__status {
+  background-position: center center;
+}
+
+.switcher__radio--dark:checked ~ .switcher__status {
+  background-position: right 2px center;
+}
diff --git a/deps/rabbitmq_management/priv/www/img/auto.svg b/deps/rabbitmq_management/priv/www/img/auto.svg
new file mode 100644
index 000000000000..2bb2cb95778d
--- /dev/null
+++ b/deps/rabbitmq_management/priv/www/img/auto.svg
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg8"
+   version="1.1"
+   viewBox="0 0 8.4666665 8.4666669"
+   height="32"
+   width="32"
+   sodipodi:docname="auto.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     id="namedview8"
+     showgrid="false"
+     units="px"
+     inkscape:zoom="13.455443"
+     inkscape:cx="-0.96818981"
+     inkscape:cy="9.1969465"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     transform="matrix(0.48587407,0,0,0.48587407,-29.9988,-55.881719)">
+    <path
+       style="stroke-width:1.01683795"
+       d="M 16.054688 0.021484375 A 15.978883 15.978883 0 0 0 0.076171875 16 A 15.978883 15.978883 0 0 0 16.054688 31.978516 A 15.978883 15.978883 0 0 0 32.035156 16 A 15.978883 15.978883 0 0 0 16.054688 0.021484375 z M 16.054688 1.1582031 A 14.843054 14.843054 0 0 1 30.898438 16 A 14.843054 14.843054 0 0 1 16.054688 30.84375 A 14.843054 14.843054 0 0 1 1.2128906 16 A 14.843054 14.843054 0 0 1 16.054688 1.1582031 z "
+       transform="matrix(0.54455125,0,0,0.54455125,61.741924,115.01276)"
+       id="path3713" />
+    <circle
+       style="fill:#000000;stroke-width:0.54455125"
+       id="path9"
+       cx="70.485031"
+       cy="123.72583"
+       r="1.6592989" />
+  </g>
+</svg>
diff --git a/deps/rabbitmq_management/priv/www/img/dark.svg b/deps/rabbitmq_management/priv/www/img/dark.svg
new file mode 100644
index 000000000000..1fe16a44392b
--- /dev/null
+++ b/deps/rabbitmq_management/priv/www/img/dark.svg
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="32"
+   height="32"
+   viewBox="0 0 8.4666659 8.4666659"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="dark.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="7.9195959"
+     inkscape:cx="-15.828789"
+     inkscape:cy="30.730537"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     units="px" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-288.53334)">
+    <path
+       style="fill:#000000;stroke-width:0.99999994"
+       d="M 16.037109 0.1796875 A 15.909903 15.909903 0 0 0 0.12695312 16.089844 A 15.909903 15.909903 0 0 0 16.037109 32 A 15.909903 15.909903 0 0 0 31.945312 16.089844 A 15.909903 15.909903 0 0 0 31.566406 12.720703 A 9.1545075 9.1545075 0 0 1 23.169922 18.236328 A 9.1545075 9.1545075 0 0 1 14.015625 9.0820312 A 9.1545075 9.1545075 0 0 1 19.689453 0.62304688 A 15.909903 15.909903 0 0 0 16.037109 0.1796875 z "
+       transform="matrix(0.26458333,0,0,0.26458333,0,288.53334)"
+       id="path8" />
+  </g>
+</svg>
diff --git a/deps/rabbitmq_management/priv/www/img/light.svg b/deps/rabbitmq_management/priv/www/img/light.svg
new file mode 100644
index 000000000000..a7ccfa51db12
--- /dev/null
+++ b/deps/rabbitmq_management/priv/www/img/light.svg
@@ -0,0 +1,130 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="32"
+   height="32"
+   viewBox="0 0 8.4666663 8.4666668"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="light.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="15.839192"
+     inkscape:cx="8.8198316"
+     inkscape:cy="14.735164"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     units="px"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-59.680961,-124.06236)">
+    <circle
+       id="path3713"
+       cx="63.913765"
+       cy="128.29445"
+       r="2.015275"
+       style="stroke-width:0.12824476" />
+    <rect
+       id="rect3715"
+       width="0.48580039"
+       height="1.2630811"
+       x="63.67263"
+       y="124.05988"
+       style="stroke-width:0.12824476" />
+    <rect
+       id="rect3715-75"
+       width="0.48580039"
+       height="1.2630811"
+       x="63.67263"
+       y="131.26593"
+       style="stroke-width:0.12824476" />
+    <rect
+       style="stroke-width:0.12824476"
+       y="41.2882"
+       x="135.67009"
+       height="1.2630811"
+       width="0.48580039"
+       id="rect3792"
+       transform="rotate(45)" />
+    <rect
+       style="stroke-width:0.12824476"
+       y="48.494255"
+       x="135.67009"
+       height="1.2630811"
+       width="0.48580039"
+       id="rect3794"
+       transform="rotate(45)" />
+    <rect
+       style="stroke-width:0.12824476"
+       y="-68.150093"
+       x="128.05156"
+       height="1.2630811"
+       width="0.48580039"
+       id="rect3796"
+       transform="rotate(90)" />
+    <rect
+       style="stroke-width:0.12824476"
+       y="-60.944042"
+       x="128.05156"
+       height="1.2630811"
+       width="0.48580039"
+       id="rect3798"
+       transform="rotate(90)" />
+    <rect
+       transform="rotate(135)"
+       id="rect3800"
+       width="0.48580039"
+       height="1.2630811"
+       x="45.279869"
+       y="-140.14755"
+       style="stroke-width:0.12824476" />
+    <rect
+       transform="rotate(135)"
+       id="rect3802"
+       width="0.48580039"
+       height="1.2630811"
+       x="45.279869"
+       y="-132.9415"
+       style="stroke-width:0.12824476" />
+  </g>
+</svg>
diff --git a/deps/rabbitmq_management/priv/www/img/status.svg b/deps/rabbitmq_management/priv/www/img/status.svg
new file mode 100644
index 000000000000..7b7f11125b5d
--- /dev/null
+++ b/deps/rabbitmq_management/priv/www/img/status.svg
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="32"
+   height="32"
+   viewBox="0 0 8.4666665 8.4666669"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="status.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="7.9195959"
+     inkscape:cx="18.136228"
+     inkscape:cy="27.67767"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-288.53332)">
+    <circle
+       style="fill:#000000;stroke-width:0.26458332"
+       id="path12"
+       cx="4.192791"
+       cy="292.77377"
+       r="4.2261992" />
+  </g>
+</svg>
diff --git a/deps/rabbitmq_management/priv/www/index.html b/deps/rabbitmq_management/priv/www/index.html
index 56b51206b436..3d22d816f8db 100644
--- a/deps/rabbitmq_management/priv/www/index.html
+++ b/deps/rabbitmq_management/priv/www/index.html
@@ -17,7 +17,10 @@
     <script src="js/formatters.js" type="text/javascript"></script>
     <script src="js/charts.js" type="text/javascript"></script>
     <script src="js/oidc-oauth/bootstrap.js" type="module"></script>
-    
+
+    <meta name="color-scheme" content="light dark"/>
+    <link href="css/light.css" rel="stylesheet" type="text/css" media="(prefers-color-scheme: light)"/>
+    <link href="css/dark.css" rel="stylesheet" type="text/css" media="(prefers-color-scheme: dark)"/>
     <link href="css/main.css" rel="stylesheet" type="text/css"/>
     <link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>    
     
@@ -37,5 +40,7 @@
     <div id="outer"></div>
     <div id="debug"></div>
     <div id="scratch"></div>
+
+    <script src="js/theme-switcher.js"></script>
   </body>
 </html>
diff --git a/deps/rabbitmq_management/priv/www/js/theme-switcher.js b/deps/rabbitmq_management/priv/www/js/theme-switcher.js
new file mode 100644
index 000000000000..b6711c6db7a9
--- /dev/null
+++ b/deps/rabbitmq_management/priv/www/js/theme-switcher.js
@@ -0,0 +1,84 @@
+$(document).ready(function() {
+    const lightStyles = document.querySelectorAll('link[rel=stylesheet][media*=prefers-color-scheme][media*=light]');
+    const darkStyles = document.querySelectorAll('link[rel=stylesheet][media*=prefers-color-scheme][media*=dark]');
+    const darkSdhemeMedia = matchMedia('(prefers-color-scheme: dark)');
+    const switcherRadios = document.getElementsByClassName('switcher__radio');
+
+    function initializeSwitcher() {
+        const savedScheme = getSavedScheme();
+
+        if (savedScheme !== null) {
+            const currentRadio = document.querySelector(`.switcher__radio[value=${savedScheme}]`);
+            currentRadio.checked = true;
+        }
+
+        [...switcherRadios].forEach((radio) => {
+            radio.addEventListener('change', (event) => {
+                setScheme(event.target.value);
+            });
+        });
+    }
+
+    function initializeScheme() {
+        const savedScheme = getSavedScheme();
+        const systemScheme = getSystemScheme();
+
+        if (savedScheme == null) return;
+
+        if(savedScheme !== systemScheme) {
+            setScheme(savedScheme);
+        }
+    }
+
+    function setScheme(scheme) {
+        switchMediaScheme(scheme);
+
+        if (scheme === 'auto') {
+            clearScheme();
+        } else {
+            saveScheme(scheme);
+        }
+    }
+
+    function switchMediaScheme(scheme) {
+        let lightMedia;
+        let darkMedia;
+
+        if (scheme === 'auto') {
+            lightMedia = '(prefers-color-scheme: light)';
+            darkMedia = '(prefers-color-scheme: dark)';
+        } else {
+            lightMedia = (scheme === 'light') ? 'all' : 'bot all';
+            darkMedia = (scheme === 'dark') ? 'all' : 'bot all';
+        }
+
+        [...lightStyles].forEach((link) => {
+            link.media = lightMedia;
+        });
+
+        [...darkStyles].forEach((link) => {
+            link.media = darkMedia;
+        });
+    }
+
+    function getSystemScheme() {
+        const darkScheme = darkSdhemeMedia.matches;
+
+        return darkScheme ? 'dark' : 'light';
+    }
+
+    function getSavedScheme() {
+        return localStorage.getItem('color-scheme');
+    }
+
+    function saveScheme(scheme) {
+        localStorage.setItem('color-scheme', scheme);
+    }
+
+    function clearScheme() {
+        localStorage.removeItem('color-scheme');
+    }
+
+    initializeSwitcher();
+    initializeScheme();
+});
\ No newline at end of file
diff --git a/deps/rabbitmq_management/priv/www/js/tmpl/layout.ejs b/deps/rabbitmq_management/priv/www/js/tmpl/layout.ejs
index ac31dbbb72c3..4d36f2ec0fc0 100644
--- a/deps/rabbitmq_management/priv/www/js/tmpl/layout.ejs
+++ b/deps/rabbitmq_management/priv/www/js/tmpl/layout.ejs
@@ -54,4 +54,13 @@
     <li><a rel="noopener noreferrer" href="https://www.rabbitmq.com/docs/plugins" target="_blank">Plugins</a></li>
     <li><a rel="noopener noreferrer" href="https://www.rabbitmq.com/github" target="_blank">GitHub</a></li>
   </ul>
+  <div id="theme-switcher">
+    <fieldset class="switcher">
+      <legend class="switcher__legend">Scheme</legend>
+      <input class="switcher__radio switcher__radio--light" type="radio" name="color-scheme" value="light" aria-label="Light">
+      <input class="switcher__radio switcher__radio--auto" type="radio" name="color-scheme" value="auto" aria-label="System" checked>
+      <input class="switcher__radio switcher__radio--dark" type="radio" name="color-scheme" value="dark" aria-label="Dark">
+      <div class="switcher__status"></div>
+    </fieldset>
+  </div>
 </div>

From 1acccff078ce0fc20563463ef0f39946628cdd33 Mon Sep 17 00:00:00 2001
From: Sergey Efimov <efimov90@gmail.com>
Date: Thu, 13 Mar 2025 21:31:52 +0300
Subject: [PATCH 02/10] Rework-light-style

---
 .../priv/www/css/light.css                    | 263 ++++++++++++++++++
 .../rabbitmq_management/priv/www/css/main.css | 241 ++++++++--------
 2 files changed, 385 insertions(+), 119 deletions(-)

diff --git a/deps/rabbitmq_management/priv/www/css/light.css b/deps/rabbitmq_management/priv/www/css/light.css
index a5d49b27858e..c07fba2759e4 100644
--- a/deps/rabbitmq_management/priv/www/css/light.css
+++ b/deps/rabbitmq_management/priv/www/css/light.css
@@ -1,5 +1,268 @@
 :root {
+    --color-black-100: #000;
+    
+    --color-grey-300: #999;
+    --color-grey-400: #ddd;
+    --color-grey-450: #bbb;
+    --color-grey-500: #aaa;
+    --color-grey-600: #888;
+    --color-grey-700: #666;
+    --color-grey-800: #444;
+    --color-grey-900: #484848;
 
+    --color-white-100: #fff;
+    --color-white-200: #f8f8f8;
+    --color-white-300: #e0e0e0;
+    --color-white-400: #fafafa;
+    --color-white-500: #f0f0f0;
+    --color-white-600: #e4e4e4;
+    --color-white-700: #ccc;
+    --color-white-800: #eee;
+
+    --color-orange-400: #ff5630;
+    --color-orange-500: #f60;
+
+    --color-red-300: #ff7a7a;
+    --color-red-400: #f88;
+    --color-red-500: #f00;
+    --color-red-600: #e24545;
+    --color-red-700: #955;
+
+    --color-green-300: #98f898;
+    --color-green-400: #36b37e;
+    --color-green-450: #79da66;
+    --color-green-500: #6abf59;
+
+    --color-aqua-300: #99ebff;
+
+    --color-blue-300: #ddf;
+
+    --color-magenta-300: #bbf;
+    --color-magenta-500: #88d;
+    --color-magenta-600: #9B59B6;
+
+    --color-pink-300: #D7BDE2;
+    --color-pink-500: #eb50a6;
+
+    --color-yellow-200: #ff9;
+    --color-yellow-300: #ffff7b;
+    --color-yellow-350: #ff8;
+    --color-yellow-400: #dada66;
+    --color-yellow-450: #ebeb8d;
+    --color-yellow-500: #ffab00;
+
+    --color-purple-300: #8d9ceb;
+    --color-purple-400: #6679da;
+    --color-purple-700: #512E5F;
+
+    --default-text-color: var(--color-grey-900);
+    --dafault-background-color: var(--color-white-100);
+
+    --a-default-text-color: var(--color-grey-800);
+    --a-default-hover-text-color: var(--color-orange-500);
+
+    --versions-abbr-background-color: var(--color-white-500);
+
+    --status-error-text-color: var(--color-red-500);
+    --status-timeout-text-color: var(--color-aqua-300);
+
+    --debug-p-text-color: var(--color-white-100);
+    --debug-p-background-color: var(--color-orange-500);
+
+    --header-background-color: var(--color-white-100);
+    --header-bottom-separator-color: var(--color-grey-700);
+
+    --menu-a-hover-text-color: var(--color-white-100);
+    --menu-a-hover-background-color: var(--color-orange-500);
+
+    --menu-a-selected-text-color: var(--color-white-100);
+    --menu-a-selected-background-color: var(--color-grey-700);
+
+    --rhs-background-color: var(--color-white-100);
+
+    --rhs-a-hover-text-color: var(--color-white-100);
+    --rhs-a-hover-background-color: var(--color-orange-500);
+    --rhs-a-selected-text-color: var(--color-white-100);
+    --rhs-a-selected-background-color: var(--color-grey-700);
+
+    --bold-text-color: var(--color-black-100);
+
+    --popup-options-link-background-color: var(--color-white-600);
+
+    --popup-owner-text-color: var(--color-white-100);
+    --popup-owner-background-color: var(--color-orange-500);
+
+    --rate-visibility-option-background-color: var(--color-white-400);
+    --rate-visibility-option-border-color: var(--color-white-500);
+
+    --rate-visibility-option-hover-background-color: var(--color-blue-300);
+    --rate-visibility-option-hover-background-gradient-first-color: var(--color-blue-300);
+    --rate-visibility-option-hover-background-gradient-second-color: var(--color-magenta-300);
+    --rate-visibility-option-hover-border-color: var(--color-magenta-500);
+
+    --rate-visibility-option-hidden--text-color: var(--color-grey-600);
+
+    --tag-link-text-color: var(--color-grey-800); 
+    --tag-link-hover-text-color: var(--color-orange-500); 
+    --argument-link-text-color: var(--color-grey-800);
+    --argument-link-hover-text-color: var(--color-orange-500);
+
+    --filter-p-warning-background-color: var(--color-yellow-350);
+    --filter-active-background-color: var(--color-aqua-300);
+    --filter-highlight-background-color: var(--color-aqua-300);
+
+    --table-th-text-color: var(--color-black-100);
+
+    --table-list-th-border-color: var(--color-white-700);
+    --table-list-td-border-color: var(--color-white-700);
+
+    --table-list-td-a-text-color: var(--color-black-100);
+    --table-list-td-a-hover-text-color: var(--color-orange-500);
+
+    --table-list-th-a-sort-text-color: var(--color-black-100);
+    --table-list-th-a-sort-text-color-arrow: var(--color-orange-500);
+
+    --table-argument-links-default-color: var(--color-grey-600);
+
+    --table-facts-and-legend-header-text-color: var(--color-black-100);
+    --table-facts-and-legend-header-border-color: var(--color-white-700);
+
+    --table-row-alt1-background-color: var(--color-white-800);
+    --table-row-alt1-background-gradient-first-color: var(--color-white-500);
+    --table-row-alt1-background-gradient-second-color: var(--color-white-300);
+
+    --table-row-alt2-background-color: var(--color-white-100);
+    --table-row-alt2-background-gradient-first-color: var(--color-white-200);
+    --table-row-alt2-background-gradient-second-color: var(--color-white-100);
+
+    --main-internal-purpose-default-text-color: var(--color-grey-500);
+
+    --div-memory-bar-border-color: var(--color-grey-400);
+
+    --sub-text-color: var(--color-grey-600);
+    --small-text-color: var(--color-grey-600);
+
+    --main-sub-a-text-color: var(--color-grey-600);
+    --main-sub-a-hover-text-color: var(--color-grey-800);
+    
+    --unknown-text-color: var(--color-grey-600);
+
+    --form-popup-options-background-color: var(--color-white-800);
+    --form-popup-options-border-color: var(--color-white-700);
+
+    --form-popup-warning-background-color: var(--color-yellow-200);
+
+    --form-popup-options-span-text-color: var(--color-white-100);
+    --form-popup-options-span-background-color: var(--color-grey-700);
+    --form-popup-options-span-hover-background-color: var(--color-orange-500);
+
+    --highlight-text-color: var(--color-grey-600);
+    --highlight-background-color: var(--color-grey-400);
+    
+    --highlight-strong-text-color: var(--color-grey-800);
+
+    --highlight-background-gradient-first-color: var(--color-white-500);
+    --highlight-background-gradient-second-color: var(--color-white-300);
+
+    --highlight-border-color: var(--color-white-300);
+
+    --section-h2-hover-text-color: var(--color-black-100);
+    --section-invisible-h2-background-color: var(--color-white-100);
+    --section-visible-h2-background-color: var(--color-white-200);
+
+    --input-border-color: var(--color-white-700);
+    --textarea-border-color: var(--color-white-700);
+
+    --man-d-text-color: var(--color-red-400);
+
+    --multifield-sub-border-color: var(--color-grey-400);
+    --multifield-sub-background-color: var(--color-white-200);
+
+    --label-radio-and-chackbox-border-color: var(--color-white-700);
+
+    --label-toggle-background-color: var(--color-orange-400);
+    --label-toggle-after-background-color: var(--color-white-100);
+
+    --input-toggle-intermediate-background-color: var(--color-yellow-500);
+
+    --input-toggle-checked-background-color: var(--color-green-400);
+
+    --grey-background-color: var(--color-white-500);
+    --yellow-background-color: var(--color-yellow-300);
+
+    --input-submit-text-color: var(--color-white-100);
+    --input-submit-background-color: var(--color-grey-700);
+
+    --input-submit-hover-background-color: var(--color-orange-500);
+
+    --button-disabled-background-color: var(--color-grey-500);
+    --button-disabled-hover-background-color: var(--color-grey-500);
+
+    --h3-bottom-border-color: var(--color-white-600);
+
+    --abbr-background-color: var(--color-aqua-300);
+    --abbr-warning-background-color: var(--color-red-500);
+
+    --abbr-status-grey-background-color: var(--color-grey-400);
+    --abbr-status-green-background-color: var(--color-green-300);
+    --abbr-status-yellow-background-color: var(--color-yellow-300);
+    --abbr-status-red-text-color: var(--color-white-100);
+    --abbr-status-red-background-color: var(--color-red-300);
+
+    --abbr-type-bottom-border-color: var(--color-grey-400);
+
+    --footer-border-color: var(--color-grey-700);
+
+    /* Bindings wrapper colors */
+
+    --bindings-wrapper-span-exchange-border-color: var(--color-grey-450);
+    --bindings-wrapper-span-queue-border-color: var(--color-grey-700);
+    --bindings-wrapper-td-span-queue-and-exchange-background-color: var(--color-white-100);
+
+    /* Status colors */
+
+    --status-grey-background-color: var(--color-grey-400);
+
+    --status-red-text-color: var(--color-white-100);
+    --status-red-background-color: var(--color-red-300);
+
+    --status-yellow-background-color: var(--color-yellow-300);
+
+    --status-green-background-color: var(--color-green-300);
+
+    --status-red-dark-text-color: var(--color-white-100);
+    --status-red-dark-background-color: var(--color-red-600);
+
+    --status-red-and-dark-red-childs-text-color: var(--color-white-100);
+    
+    /* Memory colors */
+
+    --memory-classic-background-color: var(--color-purple-700);
+    --memory-classic-right-border-color: var(--color-grey-450);
+
+    --memory-quorum-background-color: var(--color-magenta-600);
+    --memory-quorum-right-border-color: var(--color-grey-450);
+
+    --memory-stream-background-color: var(--color-pink-300);
+    --memory-stream-right-border-color: var(--color-grey-450);
+
+    --memory-binary-background-image: url(../img/bg-binary.png);
+    --memory-binary-right-border-color: var(--color-pink-500);
+
+    --memory-conn-background-color: var(--color-yellow-400);
+    --memory-conn-right-border-color: var(--color-yellow-450);
+
+    --memory-proc-background-color: var(--color-green-500);
+    --memory-proc-right-border-color: var(--color-green-450);
+
+    --memory-table-background-color: var(--color-purple-400);
+    --memory-table-right-border-color: var(--color-purple-300);
+
+    --memory-system-background-color: var(--color-grey-300);
+    --memory-system-right-border-color: var(--color-grey-450);
+
+    --memory-unused-background-color: var(--color-red-700);
+    --memory-unused-right-border-color: var(--color-grey-450);
 }
 
 /* Theme switcher */
diff --git a/deps/rabbitmq_management/priv/www/css/main.css b/deps/rabbitmq_management/priv/www/css/main.css
index 7a881847bddd..21226d277817 100644
--- a/deps/rabbitmq_management/priv/www/css/main.css
+++ b/deps/rabbitmq_management/priv/www/css/main.css
@@ -2,11 +2,11 @@
   color-scheme: light dark;
 }
 
-body { font: 12px Verdana, sans-serif; color: #484848; padding: 0; margin: 0; }
+body { font: 12px Verdana, sans-serif; color: var(--default-text-color); background-color: var(--dafault-background-color); padding: 0; margin: 0; }
 input, button, a.button { font: 12px Verdana, sans-serif; }
 
-a { font-weight: bold; color: #444; text-decoration: none; }
-a:hover { color: #F60; }
+a { font-weight: bold; color: var(--a-default-text-color); text-decoration: none; }
+a:hover { color: var(--a-default-hover-text-color); }
 
 #outer { padding: 0 0 1em 0; width: 95%; margin: auto; }
 
@@ -16,16 +16,16 @@ a:hover { color: #F60; }
 #logo { padding: 0 0 2em 0; }
 #logo img { margin: 1em 0 -0.3em 1em; border: none; }
 
-#versions abbr { background: #f0f0f0; margin: 0 0 0 1em; }
+#versions abbr { background: var(--versions-abbr-background-color); margin: 0 0 0 1em; }
 
 .status-ok { }
-.status-error { color: #F00; }
-.status-timeout { color: #99EBFF; }
+.status-error { color: var(--status-error-text-color); }
+.status-timeout { color: var(--status-timeout-text-color); }
 
 #debug { position: fixed; bottom: 0; z-index: 9; width: 100%; text-align: center; padding: 0; margin: 0; }
-#debug p { background: #F60; color: white; margin: 0; padding: 1em; font-size: 2em; }
+#debug p { background: var(--debug-p-background-color); color: var(--debug-p-text-color); margin: 0; padding: 1em; font-size: 2em; }
 
-#header { background: white; position: fixed; z-index: 1; width: 95%; margin: auto; padding: 1em 0 0 0; border-bottom: 1px solid #666; }
+#header { background: var(--header-background-color); position: fixed; z-index: 1; width: 95%; margin: auto; padding: 1em 0 0 0; border-bottom: 1px solid var(--header-bottom-separator-color); }
 
 #topnav { float: right; padding: 0; margin: 0; list-style-type: none; }
 #topnav form { display: inline; }
@@ -37,23 +37,23 @@ a:hover { color: #F60; }
 #menu ul { padding: 0; margin: 0; overflow: auto; }
 #menu li { float: left; list-style-type: none; padding: 0 0.1em 0 0; }
 #menu li a { display: block; padding: 0.7em 1.3em; margin-right: 5px; }
-#menu a:hover { background-color: #F60; color: white; -moz-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; }
-#menu a.selected { background-color: #666; color: white; -moz-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; }
+#menu a:hover { background-color: var(--menu-a-hover-background-color); color: var(--menu-a-hover-text-color); -moz-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; }
+#menu a.selected { background-color: var(--menu-a-selected-background-color); color: var(--menu-a-selected-text-color); -moz-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; }
 #vhost-form { float: right; padding: 0; margin: 0; }
 
 #main { padding-top: 10em; }
 #main.with-rhs { margin-right: 210px; }
 #main.with-warnings { padding-top: 18em; }
-#rhs { float: right; width: 200px; background-color: white; position: relative; padding-top: 10em; }
+#rhs { float: right; width: 200px; background-color: var(--rhs-background-color); position: relative; padding-top: 10em; }
 #rhs.with-warnings { padding-top: 18em; }
 #rhs ul { padding: 0; margin: 10px 0 0 0; }
 #rhs li { list-style-type: none; padding: 0; margin-bottom: 5px; }
 #rhs a { display: block; padding: 0.7em; font-weight: bold; text-decoration: none; }
-#rhs a:hover { background-color: #F60; color: white; -moz-border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px; }
-#rhs a.selected { background-color: #666; color: white; -moz-border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px; }
+#rhs a:hover { background-color: var(--rhs-a-hover-background-color); color: var(--rhs-a-hover-text-color); -moz-border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px; }
+#rhs a.selected { background-color: var(--rhs-a-selected-background-color); color: var(--rhs-a-selected-text-color); -moz-border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px; }
 
 h1 { font-size: 2em; font-weight: normal; padding: 0; margin-bottom: 0; }
-b, dt { color: black; font-weight: normal; }
+b, dt { color: var(--bold-text-color); font-weight: normal; }
 dd { margin-bottom: 5px; }
 div.box, div.section, div.section-hidden { overflow: auto; width: 100%; }
 
@@ -65,53 +65,56 @@ div.box, div.section, div.section-hidden { overflow: auto; width: 100%; }
 
 .help:after { content: '?'; }
 .help,
-.popup-options-link { background-color: #E4E4E4; padding: 2px 4px; cursor: pointer; }
+.popup-options-link { background-color: var(--popup-options-link-background-color); padding: 2px 4px; cursor: pointer; }
 table th .help,
 table th .popup-options-link { border: none; }
 .help:hover,
 .popup-options-link:hover,
-.popup-owner { background-color: #F60; color: white; }
+.popup-owner { background-color: var(--popup-owner-background-color); color: var(--popup-owner-text-color); }
 
-.rate-visibility-option { cursor: pointer; padding: 4px; background: #fafafa; border: 1px solid #f0f0f0; border-radius: 3px; display:block; }
-.rate-visibility-option:hover { background: #ddf;
-                                background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ddf),color-stop(1, #bbf));
-                                border: 1px solid #88d;
+.rate-visibility-option { cursor: pointer; padding: 4px; background: var(--rate-visibility-option-background-color); border: 1px solid var(--rate-visibility-option-border-color); border-radius: 3px; display:block; }
+.rate-visibility-option:hover { background: var(--rate-visibility-option-hover-background-color);
+                                background: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--rate-visibility-option-hover-background-gradient-first-color)),color-stop(1, var(--rate-visibility-option-hover-background-gradient-second-color)));
+                                border: 1px solid var(--rate-visibility-option-hover-border-color);
                                 border-radius: 3px; }
 
-.rate-visibility-option-hidden { text-decoration: line-through; color: #888; }
+.rate-visibility-option-hidden { text-decoration: line-through; color: var(--rate-visibility-option-hidden--text-color); }
 
 
 table.legend { float: left; }
 table.legend th { padding: 4px 10px 4px 0; width: 80px; }
 table.legend td { padding: 4px 0 4px 10px; width: 130px; }
 
-.tag-link, .argument-link { color: #444; cursor: pointer; font-weight: bold; }
-.tag-link:hover, .argument-link:hover { color: #F60; }
+.tag-link { color: var(--tag-link-text-color); cursor: pointer; font-weight: bold; }
+.tag-link:hover { color: var(--tag-link-hover-text-color); }
+.argument-link { color: var(--argument-link-text-color); cursor: pointer; font-weight: bold; }
+.argument-link:hover { color: var(--argument-link-hover-text-color); }
 
 .filter { overflow: auto; width: 100%; margin-bottom: 10px; }
 .filter table { float: left; }
 .filter label { margin-top: 4px;}
 .filter input#filter-regex-mode { vertical-align: middle; }
 .filter p#filter-truncate { float: right; padding: 4px; margin: 0; }
-.filter p.filter-warning { border-radius: 5px; background: #ff8; }
-.filter-active { background: #99EBFF; border-radius: 5px; }
-.filter-highlight { background: #99EBFF; }
+.filter p.filter-warning { border-radius: 5px; background: var(--filter-p-warning-background-color); }
+.filter-active { background: var(--filter-active-background-color); border-radius: 5px; }
+.filter-highlight { background: var(--filter-highlight-background-color); }
 
 input#truncate { width: 50px; text-align: right; }
 
 table { border-collapse: collapse; }
-table th { font-weight: normal; color: black; padding: 6px 5px 5px 5px; line-height: 1em; }
+table th { font-weight: normal; color: var(--table-th-text-color); padding: 6px 5px 5px 5px; line-height: 1em; }
 table td { padding: 2px 5px; }
 table.list th, table.list td { vertical-align: top; min-width: 5em; width: auto; }
 
 table.list { border-width: 1px; margin-bottom: 1em; }
-table.list th, table.list td { border: 1px solid #ccc; }
+table.list th { border: 1px solid var(--table-list-th-border-color); }
+table.list td { border: 1px solid var(--table-list-td-border-color); }
 table.list th { text-align: left; }
 table.list th.plus-minus { border: none; min-width: 2em; }
-table.list td a { display: block; color: black; text-decoration: none; font-weight: bold; }
-table.list td a:hover { color: #F60; }
-table.list th a.sort { display: block; width: 100%; cursor: pointer; color: black; font-weight: bold; }
-table.list th a.sort .arrow { color: #F60; }
+table.list td a { display: block; color: var(--table-list-td-a-text-color); text-decoration: none; font-weight: bold; }
+table.list td a:hover { color: var(--table-list-td-a-hover-text-color); }
+table.list th a.sort { display: block; width: 100%; cursor: pointer; color: var(--table-list-th-a-sort-text-color); font-weight: bold; }
+table.list th a.sort .arrow { color: var(--table-list-th-a-sort-text-color-arrow); }
 table.list td p { margin: 0; padding: 1px 0 0 0; }
 table.list td p.warning { margin: 0; padding: 5px; }
 
@@ -119,46 +122,46 @@ table.list td.plain, table.list td.plain td, table.list td.plain th { border: no
 table.list th.plain { border-left: none; border-top: none; border-right: none; background: none; }
 table.list th.plain h3 { margin: 0; border: 0; }
 
-#main .internal-purpose, #main .internal-purpose * { color: #aaa; }
+#main .internal-purpose, #main .internal-purpose * { color: var(--main-internal-purpose-default-text-color); }
 
 div.section table.list, div.section-hidden table.list { margin-bottom: 0; }
 
-div.memory-bar { margin: 10px 0 5px 0; border-radius: 5px; border: 1px solid #ddd; float: left; }
+div.memory-bar { margin: 10px 0 5px 0; border-radius: 5px; border: 1px solid var(--div-memory-bar-border-color); float: left; }
 div.memory-section { float: left; height: 30px; }
 div.colour-key { float: left; width: 10px; height: 10px; margin: 3px 5px 0 0;}
 div.memory-info { float: left; padding: 10px 10px 0 0; }
 button.memory-button { margin-top: 10px; }
 
-div.memory_classic  { background: #512E5F; }
-div.memory_quorum  { background: #9B59B6; }
-div.memory_stream  { background: #D7BDE2; }
-div.memory_binary { background: url(../img/bg-binary.png); }
-div.memory_conn   { background: #dada66; }
-div.memory_proc   { background: #6abf59; }
-div.memory_table  { background: #6679da; }
-div.memory_system { background: #999; }
-div.memory_unused { background: #955; }
-
-div.memory-bar div.memory_classic  { border-right: solid 1px #bbb; }
-div.memory-bar div.memory_quorum  { border-right: solid 1px #bbb; }
-div.memory-bar div.memory_stream  { border-right: solid 1px #bbb; }
-div.memory-bar div.memory_binary { border-right: solid 1px #eb50a6; }
-div.memory-bar div.memory_conn   { border-right: solid 1px #ebeb8d; }
-div.memory-bar div.memory_proc   { border-right: solid 1px #79da66; }
-div.memory-bar div.memory_table  { border-right: solid 1px #8d9ceb; }
-div.memory-bar div.memory_system { border-right: solid 1px #bbb; }
-div.memory-bar div.memory_unused { border-right: solid 1px #bbb; }
-
-sub { display: block; font-size: 0.8em; color: #888; }
-small { font-size: 0.8em; color: #888; }
-#main sub a { color: #888; }
-#main sub a:hover { color: #444; }
-table.argument-links { color: #888; }
+div.memory_classic  { background: var(--memory-classic-background-color); }
+div.memory_quorum  { background: var(--memory-quorum-background-color); }
+div.memory_stream  { background: var(--memory-stream-background-color); }
+div.memory_binary { background: var(--memory-binary-background-image); }
+div.memory_conn   { background: var(--memory-conn-background-color); }
+div.memory_proc   { background: var(--memory-proc-background-color); }
+div.memory_table  { background: var(--memory-table-background-color); }
+div.memory_system { background: var(--memory-system-background-color); }
+div.memory_unused { background: var(--memory-unused-background-color); }
+
+div.memory-bar div.memory_classic  { border-right: solid 1px var(--memory-classic-right-border-color); }
+div.memory-bar div.memory_quorum  { border-right: solid 1px var(--memory-quorum-right-border-color); }
+div.memory-bar div.memory_stream  { border-right: solid 1px var(--memory-stream-right-border-color); }
+div.memory-bar div.memory_binary { border-right: solid 1px var(--memory-binary-right-border-color); }
+div.memory-bar div.memory_conn   { border-right: solid 1px var(--memory-conn-right-border-color); }
+div.memory-bar div.memory_proc   { border-right: solid 1px var(--memory-proc-right-border-color); }
+div.memory-bar div.memory_table  { border-right: solid 1px var(--memory-table-right-border-color); }
+div.memory-bar div.memory_system { border-right: solid 1px var(--memory-system-right-border-color); }
+div.memory-bar div.memory_unused { border-right: solid 1px var(--memory-unused-right-border-color); }
+
+sub { display: block; font-size: 0.8em; color: var(--sub-text-color); }
+small { font-size: 0.8em; color: var(--small-text-color); }
+#main sub a { color: var(--main-sub-a-text-color); }
+#main sub a:hover { color: var(--main-sub-a-hover-text-color); }
+table.argument-links { color: var(--table-argument-links-default-color); }
 table.argument-links td { vertical-align: top; }
-.unknown { color: #888; }
+.unknown { color: var(--unknown-text-color); }
 
 table.facts { float: left; }
-table.facts th, table.legend th { color: black; text-align: right; border-right: 1px solid #ccc; }
+table.facts th, table.legend th { color: var(--table-facts-and-legend-header-text-color); text-align: right; border-right: 1px solid var(--table-facts-and-legend-header-border-color); }
 table.facts th, table.facts td { vertical-align: top; padding: 0 10px 10px 10px; }
 table.facts th.horizontal { border-right: none; padding: 0 10px 5px 10px; }
 
@@ -171,14 +174,14 @@ table.mini th { border: none; padding: 0 2px 2px 2px; text-align: right; }
 table.mini td { border: none; padding: 0 2px 2px 2px; }
 
 tr.alt1>td {
-  background: #eee;
-  background: -moz-linear-gradient(center top, #f0f0f0 0%,#e0e0e0 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0f0f0),color-stop(1, #e0e0e0));
+  background: var(--table-row-alt1-background-color);
+  background: -moz-linear-gradient(center top, var(--table-row-alt1-background-gradient-first-color) 0%, var(--table-row-alt1-background-gradient-second-color) 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--table-row-alt1-background-gradient-first-color)),color-stop(1, var(--table-row-alt1-background-gradient-second-color)));
 }
 tr.alt2>td {
-  background: #fff;
-  background: -moz-linear-gradient(center top, #F8F8F8 0%,#ffffff 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F8F8F8),color-stop(1, #ffffff));
+  background: var(--table-row-alt2-background-color);
+  background: -moz-linear-gradient(center top, var(--table-row-alt2-background-gradient-first-color) 0%, var(--table-row-alt2-background-gradient-second-color) 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--table-row-alt2-background-gradient-first-color)),color-stop(1, var(--table-row-alt2-background-gradient-second-color)));
 }
 
 td span,
@@ -192,18 +195,18 @@ div.status-bar, div.status-red, div.status-yellow, div.status-green, div.status-
 div.status-bar-main, div.status-red, div.status-yellow, div.status-green, div.status-grey { border-radius: 3px; -moz-border-radius: 3px; padding: 3px; }
 div.status-bar sub { white-space: nowrap; }
 
-div.status-bar .grey, div.status-grey { background: #ddd; }
-div.status-bar .red, div.status-red { background: #ff7a7a; color: white; }
-div.status-bar .yellow, div.status-yellow { background: #ffff7b; }
-div.status-bar .green, div.status-green { background: #98f898; }
-div.status-bar .red-dark { background: #e24545; color: white; }
+div.status-bar .grey, div.status-grey { background: var(--status-grey-background-color); }
+div.status-bar .red, div.status-red { background: var(--status-red-background-color); color: var(--status-red-text-color); }
+div.status-bar .yellow, div.status-yellow { background: var(--status-yellow-background-color); }
+div.status-bar .green, div.status-green { background: var(--status-green-background-color); }
+div.status-bar .red-dark { background: var(--status-red-dark-background-color); color: var(--status-red-dark-text-color); }
 /* yellow-dark and green-dark can never happen */
-div.status-bar .red *, div.status-bar .red-dark *, div.status-red * { color: white; }
+div.status-bar .red *, div.status-bar .red-dark *, div.status-red * { color: var(--status-red-and-dark-red-childs-text-color); }
 
-div.status-key-grey { background: #ddd; }
-div.status-key-red { background: #ff7a7a; color: white; }
-div.status-key-yellow { background: #ffff7b; }
-div.status-key-green { background: #98f898; }
+div.status-key-grey { background: var(--status-grey-background-color); }
+div.status-key-red { background: var(--status-red-background-color); color: var(--status-red-text-color); }
+div.status-key-yellow { background: var(--status-yellow-background-color); }
+div.status-key-green { background: var(--status-green-background-color); }
 
 .l { text-align: left !important; }
 .c { text-align: center !important; }
@@ -215,9 +218,9 @@ div.form-popup-info,
 div.form-popup-help,
 div.form-popup-options {
   -moz-border-radius: 5px 0 0 5px;
-  background: #EEE;
+  background: var(--form-popup-options-background-color);
   border-radius: 5px 0 0 5px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--form-popup-options-border-color);
   right: 0;
   margin: 10px 0 10px 0;
   padding: 15px;
@@ -236,7 +239,7 @@ div.form-popup-help {
   width: 500px;
   z-index: 2;
 }
-div.warning, p.warning, div.form-popup-warn { background: #FF9; }
+div.warning, p.warning, div.form-popup-warn { background: var(--form-popup-warning-background-color); }
 
 div.form-popup-options { z-index: 3; overflow:auto; max-height:95%; }
 
@@ -244,8 +247,8 @@ div.form-popup-warn span,
 div.form-popup-info span,
 div.form-popup-help span,
 div.form-popup-options span {
-  color: white;
-  background-color: #666;
+  color: var(--form-popup-options-span-text-color);
+  background-color: var(--form-popup-options-span-background-color);
   cursor: pointer;
   padding: 4px 8px;
   border-radius: 5px;
@@ -255,7 +258,7 @@ div.form-popup-warn span:hover,
 div.form-popup-info span:hover,
 div.form-popup-help span:hover,
 div.form-popup-options span:hover {
-  background-color: #F60;
+  background-color: var(--form-popup-options-span-hover-background-color);
   cursor: pointer;
 }
 
@@ -268,8 +271,8 @@ div.warning button {
   margin: auto;
 }
 
-.highlight { min-width: 120px; font-size: 120%; text-align:center; padding:10px; background-color: #ddd; margin: 0 20px 0 0; color: #888; border-radius: 5px; -moz-border-radius: 5px; }
-.highlight strong { font-size: 2em; display: block; color: #444; font-weight: normal; }
+.highlight { min-width: 120px; font-size: 120%; text-align:center; padding:10px; background-color: var(--highlight-background-color); margin: 0 20px 0 0; color: var(--highlight-text-color); border-radius: 5px; -moz-border-radius: 5px; }
+.highlight strong { font-size: 2em; display: block; color: var(--highlight-strong-text-color); font-weight: normal; }
 .highlight { float: left; }
 
 .chart { margin: 0 20px 20px 0; float: left; }
@@ -284,17 +287,17 @@ div.section, div.section-hidden { margin: 0 0 1em 0; }
 div.section-invisible div.hider { display: none; }
 div.section div.hider, div.section-hidden div.hider { padding: 0.5em 0; }
 div.section h2, div.section-hidden h2 { font-size: 1em; padding: 5px 5px 5px 25px; cursor: pointer; margin: 0; }
-div.section h2:hover, div.section-hidden h2:hover { color: black; }
-div.section-invisible h2 { background: white; background-image: url(../img/collapse.png); background-repeat:no-repeat; background-position:4px 4px; }
-div.section-visible h2 { background: #F8F8F8; background-image: url(../img/expand.png); background-repeat:no-repeat; background-position:4px 4px; }
+div.section h2:hover, div.section-hidden h2:hover { color: var(--section-h2-hover-text-color); }
+div.section-invisible h2 { background: var(--section-invisible-h2-background-color); background-image: url(../img/collapse.png); background-repeat:no-repeat; background-position:4px 4px; }
+div.section-visible h2 { background: var(--section-visible-h2-background-color); background-image: url(../img/expand.png); background-repeat:no-repeat; background-position:4px 4px; }
 
 form { margin: 0; }
 form.inline-form { float: left; }
 form.inline-form-right { float: right; padding-left: 5px; }
 input, select { padding: 0.2em; }
-input[type=text], input[type=password] { font: 1.1em Andale Mono, Lucidatypewriter, Courier New, Courier, monospace; border: 1px solid #ccc; }
-textarea { width: 600px; height: 200px; border: 1px solid #ccc; }
-.mand { color: #f88; padding: 0 5px;}
+input[type=text], input[type=password] { font: 1.1em Andale Mono, Lucidatypewriter, Courier New, Courier, monospace; border: 1px solid var(--input-border-color); }
+textarea { width: 600px; height: 200px; border: 1px solid var(--textarea-border-color); }
+.mand { color: var(--man-d-text-color); padding: 0 5px;}
 input[type=submit].wait { cursor: wait; }
 
 table.form { margin-bottom: 0.5em; }
@@ -314,9 +317,9 @@ table.form table.subform { margin-bottom: 5px; }
 table.form table.subform th { text-align: left; }
 table.form table.subform th, table.form table.subform td { padding: 0; }
 
-.multifield-sub { border: 1px solid #ddd; background: #F8F8F8; padding: 10px; border-radius: 5px; -moz-border-radius: 5px; float: left; margin-bottom: 10px; }
+.multifield-sub { border: 1px solid var(--multifield-sub-border-color); background: var(--multifield-sub-background-color); padding: 10px; border-radius: 5px; -moz-border-radius: 5px; float: left; margin-bottom: 10px; }
 
-label.radio, label.checkbox { padding: 5px; cursor: pointer; border-radius: 5px; -moz-border-radius: 5px; border: 1px solid #ccc; }
+label.radio, label.checkbox { padding: 5px; cursor: pointer; border-radius: 5px; -moz-border-radius: 5px; border: 1px solid var(--label-radio-and-chackbox-border-color); }
 
 table.two-col-layout { width: 100%; }
 table.two-col-layout > tbody > tr > td { width: 50%; vertical-align: top; }
@@ -326,45 +329,45 @@ table.list input[type=submit], table.list button { padding: 3px 7px; margin: 0 0
 table.list input[type=submit], table.list button, table.list a.button { padding: 3px 7px; margin: 0 0 3px 0; }
 
 input[type=submit], button, a.button {
-    background: #666;
-    color: #FFF !important;
+    background: var(--input-submit-background-color);
+    color: var(--input-submit-text-color) !important;
     border: 0;
 }
 input[type=submit]:hover, button:hover, a.button:hover {
-    background: #F60;
+    background: var(--input-submit-hover-background-color);
     text-decoration: none !important;
 }
 
-input[type=submit][disabled], button[disabled], a.button.disabled { pointer-events: none; background: #aaa; }
-input[type=submit][disabled]:hover, button[disabled]:hover, a.button.disabled { background: #aaa; }
+input[type=submit][disabled], button[disabled], a.button.disabled { pointer-events: none; background: var(--button-disabled-background-color); }
+input[type=submit][disabled]:hover, button[disabled]:hover, a.button.disabled { background: var(--button-disabled-hover-background-color); }
 
-h3 { padding: 0 0 2px 0; margin: 1em 0 1em 0; font-size: 1em; border-bottom: 1px solid #E4E4E4; font-weight: normal; }
+h3 { padding: 0 0 2px 0; margin: 1em 0 1em 0; font-size: 1em; border-bottom: 1px solid var(--h3-bottom-border-color); font-weight: normal; }
 
-abbr { background: #99EBFF; padding: 2px 4px; border-radius: 5px; -moz-border-radius: 5px; border: none; cursor: default; text-decoration: none; }
+abbr { background: var(--abbr-background-color); padding: 2px 4px; border-radius: 5px; -moz-border-radius: 5px; border: none; cursor: default; text-decoration: none; }
 
 table.list td abbr a { display: inline; width: auto; }
 
-abbr.warning { background: red; }
+abbr.warning { background: var(--abbr-warning-background-color); }
 
 .status-red abbr, .status-yellow abbr, .status-green abbr, .status-grey abbr, small abbr, abbr.normal { background: none; color: inherit; padding: 0; border-bottom: 1px dotted; cursor: default; }
 
-abbr.status-grey { background: #ddd; }
-abbr.status-green { background: #98f898; }
-abbr.status-yellow { background: #ffff7b; }
-abbr.status-red { background: #ff7a7a; color: white; }
+abbr.status-grey { background: var(--abbr-status-grey-background-color); }
+abbr.status-green { background: var(--abbr-status-green-background-color); }
+abbr.status-yellow { background: var(--abbr-status-yellow-background-color); }
+abbr.status-red { background: var(--abbr-status-red-background-color); color: var(--abbr-status-red-text-color); }
 
-abbr.type { background: none; color: inherit; padding: 0; border-bottom: 1px dotted #ddd; cursor: default; }
+abbr.type { background: none; color: inherit; padding: 0; border-bottom: 1px dotted var(--abbr-type-bottom-border-color); cursor: default; }
 
 div.bindings-wrapper { display: inline-block; }
 div.bindings-wrapper table { margin: auto; }
 div.bindings-wrapper p { margin: 10px; text-align: center; }
-div.bindings-wrapper span.exchange { border: 1px solid #bbb; padding: 10px; border-radius: 5px; -moz-border-radius: 5px; }
-div.bindings-wrapper span.queue { border: 1px solid #666; padding: 10px; }
-div.bindings-wrapper td span.exchange, div.bindings-wrapper td span.queue { background: white; display: block; }
+div.bindings-wrapper span.exchange { border: 1px solid var(--bindings-wrapper-span-exchange-border-color); padding: 10px; border-radius: 5px; -moz-border-radius: 5px; }
+div.bindings-wrapper span.queue { border: 1px solid var(--bindings-wrapper-span-queue-border-color); padding: 10px; }
+div.bindings-wrapper td span.exchange, div.bindings-wrapper td span.queue { background: var(--bindings-wrapper-td-span-queue-and-exchange-background-color); display: block; }
 div.bindings-wrapper span.exchange a, div.bindings-wrapper span.queue a { font-weight: normal !important; }
 div.bindings-wrapper p.arrow { font-size: 200%; }
 
-#footer { overflow: auto; width: 100%; border-top: 1px solid #666; }
+#footer { overflow: auto; width: 100%; border-top: 1px solid var(--footer-border-color); }
 #footer ul { list-style-type: none; padding: 0; margin: 0; }
 #footer ul li { float: left; }
 #footer ul li a { display: block; padding: 0.7em 1em; }
@@ -372,9 +375,9 @@ div.bindings-wrapper p.arrow { font-size: 200%; }
 #scratch { display: none; }
 
 .highlight, .mini-highlight, .micro-highlight {
-    background: -moz-linear-gradient(center top, #f0f0f0 0%,#e0e0e0 100%);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0f0f0),color-stop(1, #e0e0e0));
-    border: 1px solid #e0e0e0;
+    background: -moz-linear-gradient(center top, var(--highlight-background-gradient-first-color) 0%, var(--highlight-background-gradient-second-color) 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--highlight-background-gradient-first-color)),color-stop(1, var(--highlight-background-gradient-second-color)));
+    border: 1px solid var(--highlight-border-color);
 }
 
 table.dynamic-shovels td label {width: 200px; margin-right:10px;padding: 4px 0px 5px 0px}
@@ -388,7 +391,7 @@ label.toggle {
     text-indent: -9999px;
     width: 32px;
     height: 16px;
-    background: #ff5630;
+    background: var(--label-toggle-background-color);
     display: block;
     border-radius: 16px;
     position: relative;
@@ -402,17 +405,17 @@ label.toggle:after {
     left: 2px;
     width: 12px;
     height: 12px;
-    background: #fff;
+    background: var(--label-toggle-after-background-color);
     border-radius: 12px;
     transition: 0.3s;
 }
 
 input.toggle:indeterminate + label.toggle {
-    background: #ffab00;
+    background: var(--label-toggle-intermediate-background-color);
 }
 
 input.toggle:checked + label.toggle {
-    background: #36b37e;
+    background: var(--input-toggle-checked-background-color);
 }
 
 input.toggle:indeterminate + label.toggle:after {
@@ -426,11 +429,11 @@ input.toggle:checked + label.toggle:after {
 }
 
 .grey-background {
-  background-color: #f0f0f0;
+  background-color: var(--grey-background-color);
 }
 
 .yellow-background {
-  background-color: #ffff7b;
+  background-color: var(--yellow-background-color);
 }
 
 /* Theme switcher */

From 203d38768f5a9b72d879c42711b49aeeece722bf Mon Sep 17 00:00:00 2001
From: Sergey Efimov <efimov90@gmail.com>
Date: Fri, 14 Mar 2025 01:37:14 +0300
Subject: [PATCH 03/10] dark theme

---
 .../rabbitmq_management/priv/www/css/dark.css | 265 +++++++++++++++++-
 1 file changed, 264 insertions(+), 1 deletion(-)

diff --git a/deps/rabbitmq_management/priv/www/css/dark.css b/deps/rabbitmq_management/priv/www/css/dark.css
index eb25ef9eb351..3cad4a83636d 100644
--- a/deps/rabbitmq_management/priv/www/css/dark.css
+++ b/deps/rabbitmq_management/priv/www/css/dark.css
@@ -1,5 +1,268 @@
 :root {
- 
+    --color-black-100: #ddd;
+
+    --color-grey-300: #666;
+    --color-grey-400: #444;
+    --color-grey-450: #555;
+    --color-grey-500: #777;
+    --color-grey-600: #999;
+    --color-grey-700: #bbb;
+    --color-grey-800: #ddd;
+    --color-grey-900: #f0f0f0;
+    
+    --color-white-100: #141414;
+    --color-white-200: #111;
+    --color-white-300: #222;
+    --color-white-400: #333;
+    --color-white-500: #444;
+    --color-white-600: #555;
+    --color-white-700: #666;
+    --color-white-800: #777;
+    
+    --color-orange-400: #cc4520;
+    --color-orange-500: #c05000;
+    
+    --color-red-300: #cc6262;
+    --color-red-400: #cc6666;
+    --color-red-500: #cc0000;
+    --color-red-600: #b23737;
+    --color-red-700: #733333;
+    
+    --color-green-300: #328f32;
+    --color-green-400: #2a8f5e;
+    --color-green-450: #5faa4d;
+    --color-green-500: #4a8a3a;
+    
+    --color-aqua-300: #2b6a80;
+    
+    --color-blue-300: #aaccff;
+    
+    --color-magenta-300: #99aaff;
+    --color-magenta-500: #6688cc;
+    --color-magenta-600: #7a4a8a;
+    
+    --color-pink-300: #b38fcc;
+    --color-pink-500: #cc3a8a;
+    
+    --color-yellow-200: #cc9900;
+    --color-yellow-300: #cccc4a;
+    --color-yellow-350: #cc8800;
+    --color-yellow-400: #aa8a4a;
+    --color-yellow-450: #b2b266;
+    --color-yellow-500: #cc8800;
+    
+    --color-purple-300: #6a7aaa;
+    --color-purple-400: #4a5faa;
+    --color-purple-700: #3a1f4a;
+    
+    --default-text-color: var(--color-grey-900);
+    --dafault-background-color: var(--color-white-100);
+
+    --a-default-text-color: var(--color-grey-800);
+    --a-default-hover-text-color: var(--color-orange-500);
+
+    --versions-abbr-background-color: var(--color-white-500);
+
+    --status-error-text-color: var(--color-red-500);
+    --status-timeout-text-color: var(--color-aqua-300);
+
+    --debug-p-text-color: var(--color-white-100);
+    --debug-p-background-color: var(--color-orange-500);
+
+    --header-background-color: var(--color-white-100);
+    --header-bottom-separator-color: var(--color-grey-700);
+
+    --menu-a-hover-text-color: var(--color-white-100);
+    --menu-a-hover-background-color: var(--color-orange-500);
+
+    --menu-a-selected-text-color: var(--color-white-100);
+    --menu-a-selected-background-color: var(--color-grey-700);
+
+    --rhs-background-color: var(--color-white-100);
+
+    --rhs-a-hover-text-color: var(--color-white-100);
+    --rhs-a-hover-background-color: var(--color-orange-500);
+    --rhs-a-selected-text-color: var(--color-white-100);
+    --rhs-a-selected-background-color: var(--color-grey-700);
+
+    --bold-text-color: var(--color-black-100);
+
+    --popup-options-link-background-color: var(--color-white-600);
+
+    --popup-owner-text-color: var(--color-white-100);
+    --popup-owner-background-color: var(--color-orange-500);
+
+    --rate-visibility-option-background-color: var(--color-white-400);
+    --rate-visibility-option-border-color: var(--color-white-500);
+
+    --rate-visibility-option-hover-background-color: var(--color-blue-300);
+    --rate-visibility-option-hover-background-gradient-first-color: var(--color-blue-300);
+    --rate-visibility-option-hover-background-gradient-second-color: var(--color-magenta-300);
+    --rate-visibility-option-hover-border-color: var(--color-magenta-500);
+
+    --rate-visibility-option-hidden--text-color: var(--color-grey-600);
+
+    --tag-link-text-color: var(--color-grey-800); 
+    --tag-link-hover-text-color: var(--color-orange-500); 
+    --argument-link-text-color: var(--color-grey-800);
+    --argument-link-hover-text-color: var(--color-orange-500);
+
+    --filter-p-warning-background-color: var(--color-yellow-350);
+    --filter-active-background-color: var(--color-aqua-300);
+    --filter-highlight-background-color: var(--color-aqua-300);
+
+    --table-th-text-color: var(--color-black-100);
+
+    --table-list-th-border-color: var(--color-white-700);
+    --table-list-td-border-color: var(--color-white-700);
+
+    --table-list-td-a-text-color: var(--color-black-100);
+    --table-list-td-a-hover-text-color: var(--color-orange-500);
+
+    --table-list-th-a-sort-text-color: var(--color-black-100);
+    --table-list-th-a-sort-text-color-arrow: var(--color-orange-500);
+
+    --table-argument-links-default-color: var(--color-grey-600);
+
+    --table-facts-and-legend-header-text-color: var(--color-black-100);
+    --table-facts-and-legend-header-border-color: var(--color-white-700);
+
+    --table-row-alt1-background-color: var(--color-white-800);
+    --table-row-alt1-background-gradient-first-color: var(--color-white-500);
+    --table-row-alt1-background-gradient-second-color: var(--color-white-300);
+
+    --table-row-alt2-background-color: var(--color-white-100);
+    --table-row-alt2-background-gradient-first-color: var(--color-white-200);
+    --table-row-alt2-background-gradient-second-color: var(--color-white-100);
+
+    --main-internal-purpose-default-text-color: var(--color-grey-500);
+
+    --div-memory-bar-border-color: var(--color-grey-400);
+
+    --sub-text-color: var(--color-grey-600);
+    --small-text-color: var(--color-grey-600);
+
+    --main-sub-a-text-color: var(--color-grey-600);
+    --main-sub-a-hover-text-color: var(--color-grey-800);
+    
+    --unknown-text-color: var(--color-grey-600);
+
+    --form-popup-options-background-color: var(--color-white-800);
+    --form-popup-options-border-color: var(--color-white-700);
+
+    --form-popup-warning-background-color: var(--color-yellow-200);
+
+    --form-popup-options-span-text-color: var(--color-white-100);
+    --form-popup-options-span-background-color: var(--color-grey-700);
+    --form-popup-options-span-hover-background-color: var(--color-orange-500);
+
+    --highlight-text-color: var(--color-grey-600);
+    --highlight-background-color: var(--color-grey-400);
+    
+    --highlight-strong-text-color: var(--color-grey-800);
+
+    --highlight-background-gradient-first-color: var(--color-white-500);
+    --highlight-background-gradient-second-color: var(--color-white-300);
+
+    --highlight-border-color: var(--color-white-300);
+
+    --section-h2-hover-text-color: var(--color-black-100);
+    --section-invisible-h2-background-color: var(--color-white-100);
+    --section-visible-h2-background-color: var(--color-white-200);
+
+    --input-border-color: var(--color-white-700);
+    --textarea-border-color: var(--color-white-700);
+
+    --man-d-text-color: var(--color-red-400);
+
+    --multifield-sub-border-color: var(--color-grey-400);
+    --multifield-sub-background-color: var(--color-white-200);
+
+    --label-radio-and-chackbox-border-color: var(--color-white-700);
+
+    --label-toggle-background-color: var(--color-orange-400);
+    --label-toggle-after-background-color: var(--color-white-100);
+
+    --input-toggle-intermediate-background-color: var(--color-yellow-500);
+
+    --input-toggle-checked-background-color: var(--color-green-400);
+
+    --grey-background-color: var(--color-white-500);
+    --yellow-background-color: var(--color-yellow-300);
+
+    --input-submit-text-color: var(--color-white-100);
+    --input-submit-background-color: var(--color-grey-700);
+
+    --input-submit-hover-background-color: var(--color-orange-500);
+
+    --button-disabled-background-color: var(--color-grey-500);
+    --button-disabled-hover-background-color: var(--color-grey-500);
+
+    --h3-bottom-border-color: var(--color-white-600);
+
+    --abbr-background-color: var(--color-aqua-300);
+    --abbr-warning-background-color: var(--color-red-500);
+
+    --abbr-status-grey-background-color: var(--color-grey-400);
+    --abbr-status-green-background-color: var(--color-green-300);
+    --abbr-status-yellow-background-color: var(--color-yellow-300);
+    --abbr-status-red-text-color: var(--color-white-100);
+    --abbr-status-red-background-color: var(--color-red-300);
+
+    --abbr-type-bottom-border-color: var(--color-grey-400);
+
+    --footer-border-color: var(--color-grey-700);
+
+    /* Bindings wrapper colors */
+
+    --bindings-wrapper-span-exchange-border-color: var(--color-grey-450);
+    --bindings-wrapper-span-queue-border-color: var(--color-grey-700);
+    --bindings-wrapper-td-span-queue-and-exchange-background-color: var(--color-white-100);
+
+    /* Status colors */
+
+    --status-grey-background-color: var(--color-grey-400);
+
+    --status-red-text-color: var(--color-white-100);
+    --status-red-background-color: var(--color-red-300);
+
+    --status-yellow-background-color: var(--color-yellow-300);
+
+    --status-green-background-color: var(--color-green-300);
+
+    --status-red-dark-text-color: var(--color-white-100);
+    --status-red-dark-background-color: var(--color-red-600);
+
+    --status-red-and-dark-red-childs-text-color: var(--color-white-100);
+    
+    /* Memory colors */
+
+    --memory-classic-background-color: var(--color-purple-700);
+    --memory-classic-right-border-color: var(--color-grey-450);
+
+    --memory-quorum-background-color: var(--color-magenta-600);
+    --memory-quorum-right-border-color: var(--color-grey-450);
+
+    --memory-stream-background-color: var(--color-pink-300);
+    --memory-stream-right-border-color: var(--color-grey-450);
+
+    --memory-binary-background-image: url(../img/bg-binary.png);
+    --memory-binary-right-border-color: var(--color-pink-500);
+
+    --memory-conn-background-color: var(--color-yellow-400);
+    --memory-conn-right-border-color: var(--color-yellow-450);
+
+    --memory-proc-background-color: var(--color-green-500);
+    --memory-proc-right-border-color: var(--color-green-450);
+
+    --memory-table-background-color: var(--color-purple-400);
+    --memory-table-right-border-color: var(--color-purple-300);
+
+    --memory-system-background-color: var(--color-grey-300);
+    --memory-system-right-border-color: var(--color-grey-450);
+
+    --memory-unused-background-color: var(--color-red-700);
+    --memory-unused-right-border-color: var(--color-grey-450);
 }
 
 /* Theme switcher */

From 80596f919d72c0d6268e4baf0d5917828fd5d979 Mon Sep 17 00:00:00 2001
From: Sergey Efimov <efimov90@gmail.com>
Date: Sun, 16 Mar 2025 19:41:22 +0300
Subject: [PATCH 04/10] Removed not needed div

---
 .../priv/www/js/tmpl/layout.ejs                  | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/deps/rabbitmq_management/priv/www/js/tmpl/layout.ejs b/deps/rabbitmq_management/priv/www/js/tmpl/layout.ejs
index 4d36f2ec0fc0..ffbf1123872c 100644
--- a/deps/rabbitmq_management/priv/www/js/tmpl/layout.ejs
+++ b/deps/rabbitmq_management/priv/www/js/tmpl/layout.ejs
@@ -54,13 +54,11 @@
     <li><a rel="noopener noreferrer" href="https://www.rabbitmq.com/docs/plugins" target="_blank">Plugins</a></li>
     <li><a rel="noopener noreferrer" href="https://www.rabbitmq.com/github" target="_blank">GitHub</a></li>
   </ul>
-  <div id="theme-switcher">
-    <fieldset class="switcher">
-      <legend class="switcher__legend">Scheme</legend>
-      <input class="switcher__radio switcher__radio--light" type="radio" name="color-scheme" value="light" aria-label="Light">
-      <input class="switcher__radio switcher__radio--auto" type="radio" name="color-scheme" value="auto" aria-label="System" checked>
-      <input class="switcher__radio switcher__radio--dark" type="radio" name="color-scheme" value="dark" aria-label="Dark">
-      <div class="switcher__status"></div>
-    </fieldset>
-  </div>
+  <fieldset class="switcher">
+    <legend class="switcher__legend">Scheme</legend>
+    <input class="switcher__radio switcher__radio--light" type="radio" name="color-scheme" value="light" aria-label="Light">
+    <input class="switcher__radio switcher__radio--auto" type="radio" name="color-scheme" value="auto" aria-label="System" checked>
+    <input class="switcher__radio switcher__radio--dark" type="radio" name="color-scheme" value="dark" aria-label="Dark">
+    <div class="switcher__status"></div>
+  </fieldset>
 </div>

From c555005b181612792a094060a16dd0588cd123c2 Mon Sep 17 00:00:00 2001
From: Sergey Efimov <efimov90@gmail.com>
Date: Sun, 16 Mar 2025 20:03:14 +0300
Subject: [PATCH 05/10] Fix folder name

---
 deps/rabbitmq_management/priv/www/css/main.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/deps/rabbitmq_management/priv/www/css/main.css b/deps/rabbitmq_management/priv/www/css/main.css
index 21226d277817..47986a665742 100644
--- a/deps/rabbitmq_management/priv/www/css/main.css
+++ b/deps/rabbitmq_management/priv/www/css/main.css
@@ -477,11 +477,11 @@ input.toggle:checked + label.toggle:after {
 }
 
 .switcher__radio--light {
-  background-image: url('../ing/light.svg');
+  background-image: url('../img/light.svg');
 }
 
 .switcher__radio--auto {
-  background-image: url('../ing/auto.svg');
+  background-image: url('../img/auto.svg');
 }
 
 .switcher__radio--dark {
@@ -501,7 +501,7 @@ input.toggle:checked + label.toggle:after {
   border-radius: 18px;
   background-color: rgb(255 255 255 / 0.5);
   background-repeat: no-repeat;
-  background-image: url('../ing/status.svg');
+  background-image: url('../img/status.svg');
   background-size: 32px;
   background-position: center;
   transition: background-position 0.1s ease-in;

From da7fbc56b33a5020419e5a656dc54bf6cc5857fc Mon Sep 17 00:00:00 2001
From: Sergey Efimov <efimov90@gmail.com>
Date: Tue, 18 Mar 2025 20:44:26 +0300
Subject: [PATCH 06/10] Color scheme fix

Removes color-scheme from main.css
Added color-scheme: dark to dark.css
Added color-scheme: light to light.css
---
 deps/rabbitmq_management/priv/www/css/dark.css  | 2 ++
 deps/rabbitmq_management/priv/www/css/light.css | 2 ++
 deps/rabbitmq_management/priv/www/css/main.css  | 4 ----
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/deps/rabbitmq_management/priv/www/css/dark.css b/deps/rabbitmq_management/priv/www/css/dark.css
index 3cad4a83636d..918892d957d7 100644
--- a/deps/rabbitmq_management/priv/www/css/dark.css
+++ b/deps/rabbitmq_management/priv/www/css/dark.css
@@ -1,4 +1,6 @@
 :root {
+    color-scheme: dark;
+
     --color-black-100: #ddd;
 
     --color-grey-300: #666;
diff --git a/deps/rabbitmq_management/priv/www/css/light.css b/deps/rabbitmq_management/priv/www/css/light.css
index c07fba2759e4..18087d025914 100644
--- a/deps/rabbitmq_management/priv/www/css/light.css
+++ b/deps/rabbitmq_management/priv/www/css/light.css
@@ -1,4 +1,6 @@
 :root {
+    color-scheme: light;
+
     --color-black-100: #000;
     
     --color-grey-300: #999;
diff --git a/deps/rabbitmq_management/priv/www/css/main.css b/deps/rabbitmq_management/priv/www/css/main.css
index 47986a665742..c805e19c2ac9 100644
--- a/deps/rabbitmq_management/priv/www/css/main.css
+++ b/deps/rabbitmq_management/priv/www/css/main.css
@@ -1,7 +1,3 @@
-:root {
-  color-scheme: light dark;
-}
-
 body { font: 12px Verdana, sans-serif; color: var(--default-text-color); background-color: var(--dafault-background-color); padding: 0; margin: 0; }
 input, button, a.button { font: 12px Verdana, sans-serif; }
 

From 9ee738c91d6f2e6c1f3513c1dfd184f462054d71 Mon Sep 17 00:00:00 2001
From: Sergey Efimov <efimov90@gmail.com>
Date: Tue, 18 Mar 2025 22:35:07 +0300
Subject: [PATCH 07/10] Fixed theme switch bug with sammy.js

Adapts code to works with sammy.js
---
 .../priv/www/js/theme-switcher.js             | 134 ++++++++++--------
 1 file changed, 73 insertions(+), 61 deletions(-)

diff --git a/deps/rabbitmq_management/priv/www/js/theme-switcher.js b/deps/rabbitmq_management/priv/www/js/theme-switcher.js
index b6711c6db7a9..bd25971d7b58 100644
--- a/deps/rabbitmq_management/priv/www/js/theme-switcher.js
+++ b/deps/rabbitmq_management/priv/www/js/theme-switcher.js
@@ -1,84 +1,96 @@
-$(document).ready(function() {
-    const lightStyles = document.querySelectorAll('link[rel=stylesheet][media*=prefers-color-scheme][media*=light]');
-    const darkStyles = document.querySelectorAll('link[rel=stylesheet][media*=prefers-color-scheme][media*=dark]');
-    const darkSdhemeMedia = matchMedia('(prefers-color-scheme: dark)');
-    const switcherRadios = document.getElementsByClassName('switcher__radio');
-
-    function initializeSwitcher() {
-        const savedScheme = getSavedScheme();
-
-        if (savedScheme !== null) {
-            const currentRadio = document.querySelector(`.switcher__radio[value=${savedScheme}]`);
+var lightStyles;
+var darkStyles;
+var darkSdhemeMedia;
+var switcherRadios;
+
+var initializeSwitcher = function initializeSwitcher() {
+    lightStyles = document.querySelectorAll('link[rel=stylesheet][media*=prefers-color-scheme][media*=light]');
+    darkStyles = document.querySelectorAll('link[rel=stylesheet][media*=prefers-color-scheme][media*=dark]');
+    darkSdhemeMedia = matchMedia('(prefers-color-scheme: dark)');
+    switcherRadios = document.getElementsByClassName('switcher__radio');
+
+    let savedScheme = getSavedScheme();
+
+    if (savedScheme !== null) {
+        let currentRadio = document.querySelector(`.switcher__radio[value=${savedScheme}]`);
+        if (currentRadio !== null) {
             currentRadio.checked = true;
         }
+    }
 
-        [...switcherRadios].forEach((radio) => {
-            radio.addEventListener('change', (event) => {
-                setScheme(event.target.value);
-            });
+    [...switcherRadios].forEach((radio) => {
+        radio.addEventListener('change', (event) => {
+            setScheme(event.target.value);
         });
-    }
+    });
+}
 
-    function initializeScheme() {
-        const savedScheme = getSavedScheme();
-        const systemScheme = getSystemScheme();
+var initializeScheme = function initializeScheme() {
+    let savedScheme = getSavedScheme();
+    let systemScheme = getSystemScheme();
 
-        if (savedScheme == null) return;
+    if (savedScheme == null) return;
 
-        if(savedScheme !== systemScheme) {
-            setScheme(savedScheme);
-        }
+    if(savedScheme !== systemScheme) {
+        setScheme(savedScheme);
     }
+}
 
-    function setScheme(scheme) {
-        switchMediaScheme(scheme);
+function setScheme(scheme) {
+    switchMediaScheme(scheme);
 
-        if (scheme === 'auto') {
-            clearScheme();
-        } else {
-            saveScheme(scheme);
-        }
+    if (scheme === 'auto') {
+        clearScheme();
+    } else {
+        saveScheme(scheme);
+    }
+}
+
+function switchMediaScheme(scheme) {
+    let lightMedia;
+    let darkMedia;
+
+    if (scheme === 'auto') {
+        lightMedia = '(prefers-color-scheme: light)';
+        darkMedia = '(prefers-color-scheme: dark)';
+    } else {
+        lightMedia = (scheme === 'light') ? 'all' : 'bot all';
+        darkMedia = (scheme === 'dark') ? 'all' : 'bot all';
     }
 
-    function switchMediaScheme(scheme) {
-        let lightMedia;
-        let darkMedia;
-
-        if (scheme === 'auto') {
-            lightMedia = '(prefers-color-scheme: light)';
-            darkMedia = '(prefers-color-scheme: dark)';
-        } else {
-            lightMedia = (scheme === 'light') ? 'all' : 'bot all';
-            darkMedia = (scheme === 'dark') ? 'all' : 'bot all';
-        }
+    [...lightStyles].forEach((link) => {
+        link.media = lightMedia;
+    });
 
-        [...lightStyles].forEach((link) => {
-            link.media = lightMedia;
-        });
+    [...darkStyles].forEach((link) => {
+        link.media = darkMedia;
+    });
+}
 
-        [...darkStyles].forEach((link) => {
-            link.media = darkMedia;
-        });
-    }
+function getSystemScheme() {
+    let darkScheme = darkSdhemeMedia.matches;
 
-    function getSystemScheme() {
-        const darkScheme = darkSdhemeMedia.matches;
+    return darkScheme ? 'dark' : 'light';
+}
 
-        return darkScheme ? 'dark' : 'light';
-    }
+function getSavedScheme() {
+    return localStorage.getItem('color-scheme');
+}
 
-    function getSavedScheme() {
-        return localStorage.getItem('color-scheme');
-    }
+function saveScheme(scheme) {
+    localStorage.setItem('color-scheme', scheme);
+}
 
-    function saveScheme(scheme) {
-        localStorage.setItem('color-scheme', scheme);
-    }
+function clearScheme() {
+    localStorage.removeItem('color-scheme');
+}
 
-    function clearScheme() {
-        localStorage.removeItem('color-scheme');
-    }
+$(window).on('popstate', function() {
+    initializeSwitcher();
+    initializeScheme();
+});
 
+$(document).ready(function() {
     initializeSwitcher();
     initializeScheme();
 });
\ No newline at end of file

From 49a48f9e2c5282c2ca25c8229977b97d00080d4e Mon Sep 17 00:00:00 2001
From: Sergey Efimov <efimov90@gmail.com>
Date: Tue, 18 Mar 2025 23:33:10 +0300
Subject: [PATCH 08/10] Icons update

---
 deps/rabbitmq_management/priv/www/img/auto.svg  | 14 +++++---------
 deps/rabbitmq_management/priv/www/img/dark.svg  | 12 +++++++-----
 deps/rabbitmq_management/priv/www/img/light.svg | 15 +++++++--------
 3 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/deps/rabbitmq_management/priv/www/img/auto.svg b/deps/rabbitmq_management/priv/www/img/auto.svg
index 2bb2cb95778d..8f12e3b860c4 100644
--- a/deps/rabbitmq_management/priv/www/img/auto.svg
+++ b/deps/rabbitmq_management/priv/www/img/auto.svg
@@ -29,7 +29,7 @@
      showgrid="false"
      units="px"
      inkscape:zoom="13.455443"
-     inkscape:cx="-0.96818981"
+     inkscape:cx="-11.595859"
      inkscape:cy="9.1969465"
      inkscape:window-x="-8"
      inkscape:window-y="-8"
@@ -54,14 +54,10 @@
      transform="matrix(0.48587407,0,0,0.48587407,-29.9988,-55.881719)">
     <path
        style="stroke-width:1.01683795"
-       d="M 16.054688 0.021484375 A 15.978883 15.978883 0 0 0 0.076171875 16 A 15.978883 15.978883 0 0 0 16.054688 31.978516 A 15.978883 15.978883 0 0 0 32.035156 16 A 15.978883 15.978883 0 0 0 16.054688 0.021484375 z M 16.054688 1.1582031 A 14.843054 14.843054 0 0 1 30.898438 16 A 14.843054 14.843054 0 0 1 16.054688 30.84375 A 14.843054 14.843054 0 0 1 1.2128906 16 A 14.843054 14.843054 0 0 1 16.054688 1.1582031 z "
+       d="M 16.054688,0.02148438 C 7.2300813,0.02168699 0.07637476,7.1753933 0.07617187,16 0.07637455,24.824607 7.2300812,31.978313 16.054688,31.978516 24.880057,31.979391 32.034953,24.825369 32.035156,16 32.034953,7.1746311 24.880057,0.02060895 16.054688,0.02148438 Z m 0,1.13671872 C 24.252061,1.1578187 30.897744,7.8026268 30.898438,16 c 3.84e-4,8.198136 -6.645614,14.844134 -14.84375,14.84375 -0.09656,-9.736531 -0.05263,-6.497738 -0.05224,-14.695111 6.94e-4,-8.196611 -0.117876,-2.058172 0.05224,-14.9904359 z"
        transform="matrix(0.54455125,0,0,0.54455125,61.741924,115.01276)"
-       id="path3713" />
-    <circle
-       style="fill:#000000;stroke-width:0.54455125"
-       id="path9"
-       cx="70.485031"
-       cy="123.72583"
-       r="1.6592989" />
+       id="path3713"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccccc" />
   </g>
 </svg>
diff --git a/deps/rabbitmq_management/priv/www/img/dark.svg b/deps/rabbitmq_management/priv/www/img/dark.svg
index 1fe16a44392b..4fd733f453a4 100644
--- a/deps/rabbitmq_management/priv/www/img/dark.svg
+++ b/deps/rabbitmq_management/priv/www/img/dark.svg
@@ -25,9 +25,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="7.9195959"
-     inkscape:cx="-15.828789"
-     inkscape:cy="30.730537"
+     inkscape:zoom="15.839192"
+     inkscape:cx="-3.3461737"
+     inkscape:cy="20.637052"
      inkscape:document-units="mm"
      inkscape:current-layer="layer1"
      showgrid="false"
@@ -56,8 +56,10 @@
      transform="translate(0,-288.53334)">
     <path
        style="fill:#000000;stroke-width:0.99999994"
-       d="M 16.037109 0.1796875 A 15.909903 15.909903 0 0 0 0.12695312 16.089844 A 15.909903 15.909903 0 0 0 16.037109 32 A 15.909903 15.909903 0 0 0 31.945312 16.089844 A 15.909903 15.909903 0 0 0 31.566406 12.720703 A 9.1545075 9.1545075 0 0 1 23.169922 18.236328 A 9.1545075 9.1545075 0 0 1 14.015625 9.0820312 A 9.1545075 9.1545075 0 0 1 19.689453 0.62304688 A 15.909903 15.909903 0 0 0 16.037109 0.1796875 z "
+       d="M 16.037109,0.1171875 C 7.2501181,0.11704775 0.12681765,7.2403525 0.12695312,16.027344 0.12681765,24.814335 7.2501181,31.93764 16.037109,31.9375 c 8.786229,-9.39e-4 15.908339,-7.123928 15.908203,-15.910156 -0.0059,-1.133339 -0.132962,-2.262794 -0.378906,-3.369141 -1.44996,3.347206 -4.748722,5.514135 -8.396484,5.515625 C 18.114183,18.173712 14.01573,14.07527 14.015625,9.0195312 14.018862,5.3108875 16.259333,1.9706274 19.689453,0.56054688 18.493246,0.272024 17.267605,0.12322918 16.037109,0.1171875 Z m 0.243804,1.1372542 c -2.925028,2.1045544 -3.398085,4.7509576 -3.653861,8.459619 1.05e-4,5.0557223 4.982591,9.7219083 10.038329,9.7220223 3.142687,-0.06463 5.999506,-0.905279 8.207081,-3.873682 C 30.623429,24.202224 23.929057,30.69704 16.037793,30.673927 6.8719951,30.800348 0.88463049,22.03652 1.3898419,15.585501 2.5584579,5.7526453 9.1797827,1.7102414 16.280913,1.2544417 Z"
        transform="matrix(0.26458333,0,0,0.26458333,0,288.53334)"
-       id="path8" />
+       id="path8"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccccccccccc" />
   </g>
 </svg>
diff --git a/deps/rabbitmq_management/priv/www/img/light.svg b/deps/rabbitmq_management/priv/www/img/light.svg
index a7ccfa51db12..beb3479e47f7 100644
--- a/deps/rabbitmq_management/priv/www/img/light.svg
+++ b/deps/rabbitmq_management/priv/www/img/light.svg
@@ -26,7 +26,7 @@
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="15.839192"
-     inkscape:cx="8.8198316"
+     inkscape:cx="-0.20840671"
      inkscape:cy="14.735164"
      inkscape:document-units="mm"
      inkscape:current-layer="layer1"
@@ -49,7 +49,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -58,12 +58,11 @@
      inkscape:groupmode="layer"
      id="layer1"
      transform="translate(-59.680961,-124.06236)">
-    <circle
-       id="path3713"
-       cx="63.913765"
-       cy="128.29445"
-       r="2.015275"
-       style="stroke-width:0.12824476" />
+    <path
+       style="stroke-width:0.48470458"
+       d="M 15.998047 8.3789062 A 7.6167874 7.6167874 0 0 0 8.3808594 15.996094 A 7.6167874 7.6167874 0 0 0 15.998047 23.611328 A 7.6167874 7.6167874 0 0 0 23.615234 15.996094 A 7.6167874 7.6167874 0 0 0 15.998047 8.3789062 z M 15.998047 10.494141 A 5.5017805 5.5017805 0 0 1 21.5 15.996094 A 5.5017805 5.5017805 0 0 1 15.998047 21.498047 A 5.5017805 5.5017805 0 0 1 10.496094 15.996094 A 5.5017805 5.5017805 0 0 1 15.998047 10.494141 z "
+       transform="matrix(0.26458333,0,0,0.26458333,59.680961,124.06236)"
+       id="path3713" />
     <rect
        id="rect3715"
        width="0.48580039"

From 2e457e8d8d29a9397c3bd1821dca605daf69cecf Mon Sep 17 00:00:00 2001
From: Sergey Efimov <efimov90@gmail.com>
Date: Wed, 19 Mar 2025 00:50:38 +0300
Subject: [PATCH 09/10] Reworked theme switcher

---
 .../rabbitmq_management/priv/www/css/dark.css | 12 +--
 .../priv/www/css/light.css                    | 12 +--
 .../rabbitmq_management/priv/www/css/main.css | 90 ++++---------------
 .../priv/www/img/status.svg                   | 64 -------------
 .../priv/www/js/theme-switcher.js             | 60 ++++++++++---
 .../priv/www/js/tmpl/layout.ejs               | 16 ++--
 6 files changed, 88 insertions(+), 166 deletions(-)
 delete mode 100644 deps/rabbitmq_management/priv/www/img/status.svg

diff --git a/deps/rabbitmq_management/priv/www/css/dark.css b/deps/rabbitmq_management/priv/www/css/dark.css
index 918892d957d7..5ef094168cd6 100644
--- a/deps/rabbitmq_management/priv/www/css/dark.css
+++ b/deps/rabbitmq_management/priv/www/css/dark.css
@@ -269,14 +269,14 @@
 
 /* Theme switcher */
 
-.switcher__radio {
+.theme-switcher[x-scheme="auto"]:after {
     filter: invert(1);
 }
-
-.switcher__radio:checked {
-    filter: invert(0);
+  
+.theme-switcher[x-scheme="dark"]:after {
+    filter: invert(1);
 }
-
-.switcher__status {
+  
+.theme-switcher[x-scheme="light"]:after {
     filter: invert(1);
 }
diff --git a/deps/rabbitmq_management/priv/www/css/light.css b/deps/rabbitmq_management/priv/www/css/light.css
index 18087d025914..baf838cffa09 100644
--- a/deps/rabbitmq_management/priv/www/css/light.css
+++ b/deps/rabbitmq_management/priv/www/css/light.css
@@ -269,14 +269,14 @@
 
 /* Theme switcher */
 
-.switcher__radio {
+.theme-switcher[x-scheme="auto"]:after {
     filter: invert(0);
 }
-
-.switcher__radio:checked {
-    filter: invert(1);
+  
+.theme-switcher[x-scheme="dark"]:after {
+    filter: invert(0);
 }
-
-.switcher__status {
+  
+.theme-switcher[x-scheme="light"]:after {
     filter: invert(0);
 }
diff --git a/deps/rabbitmq_management/priv/www/css/main.css b/deps/rabbitmq_management/priv/www/css/main.css
index c805e19c2ac9..754a843ae3ae 100644
--- a/deps/rabbitmq_management/priv/www/css/main.css
+++ b/deps/rabbitmq_management/priv/www/css/main.css
@@ -434,87 +434,35 @@ input.toggle:checked + label.toggle:after {
 
 /* Theme switcher */
 
-.switcher {
-  height: 32px;
-  width: 96px;
+.theme-switcher {
   position: relative;
-  margin: 2px;
-  margin-left: -50px;
-  padding: 2px;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  border: none;
-}
-
-/* Theme switcher legend */
-
-.switcher__legend {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-
-/* Theme switcher radio */
-
-.switcher__radio {
-  -webkit-appearance: none;
-  appearance: none;
-  margin: 0;
   width: 32px;
   height: 32px;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 24px;
-  transition: filter 0.1s ease-in;
-}
-
-.switcher__radio:focus {
-  outline: none;
-}
-
-.switcher__radio--light {
-  background-image: url('../img/light.svg');
+  border-radius: 45%;
+  border: 2px solid var(--input-border-color);
+  background-color: var(--dafault-background-color);
 }
 
-.switcher__radio--auto {
-  background-image: url('../img/auto.svg');
-}
-
-.switcher__radio--dark {
-  background-image: url('../img/dark.svg');
-}
-
-/* Switcher status */
-
-.switcher__status {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: -1;
-  box-shadow: 0 0 0 2px rgb(0 0 0 /0.2);
-  border-radius: 18px;
-  background-color: rgb(255 255 255 / 0.5);
+.theme-switcher:after {
+  content: "";
+  background-size: 24px;
   background-repeat: no-repeat;
-  background-image: url('../img/status.svg');
-  background-size: 32px;
   background-position: center;
-  transition: background-position 0.1s ease-in;
-}
-
-.switcher__radio:focus-visible ~ .switcher__status {
-  box-shadow: 0 0 0 2px black;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
 }
 
-.switcher__radio--light:checked ~ .switcher__status {
-  background-position: left 2px center;
+.theme-switcher[x-scheme="auto"]:after {
+  background-image: url(../img/auto.svg);
 }
 
-.switcher__radio--auto:checked ~ .switcher__status {
-  background-position: center center;
+.theme-switcher[x-scheme="dark"]:after {
+  background-image: url(../img/dark.svg);
 }
 
-.switcher__radio--dark:checked ~ .switcher__status {
-  background-position: right 2px center;
-}
+.theme-switcher[x-scheme="light"]:after {
+  background-image: url(../img/light.svg);
+}
\ No newline at end of file
diff --git a/deps/rabbitmq_management/priv/www/img/status.svg b/deps/rabbitmq_management/priv/www/img/status.svg
deleted file mode 100644
index 7b7f11125b5d..000000000000
--- a/deps/rabbitmq_management/priv/www/img/status.svg
+++ /dev/null
@@ -1,64 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="32"
-   height="32"
-   viewBox="0 0 8.4666665 8.4666669"
-   version="1.1"
-   id="svg8"
-   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
-   sodipodi:docname="status.svg">
-  <defs
-     id="defs2" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="7.9195959"
-     inkscape:cx="18.136228"
-     inkscape:cy="27.67767"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     units="px"
-     inkscape:window-width="1920"
-     inkscape:window-height="1009"
-     inkscape:window-x="-8"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1" />
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(0,-288.53332)">
-    <circle
-       style="fill:#000000;stroke-width:0.26458332"
-       id="path12"
-       cx="4.192791"
-       cy="292.77377"
-       r="4.2261992" />
-  </g>
-</svg>
diff --git a/deps/rabbitmq_management/priv/www/js/theme-switcher.js b/deps/rabbitmq_management/priv/www/js/theme-switcher.js
index bd25971d7b58..15bd70927400 100644
--- a/deps/rabbitmq_management/priv/www/js/theme-switcher.js
+++ b/deps/rabbitmq_management/priv/www/js/theme-switcher.js
@@ -1,26 +1,62 @@
 var lightStyles;
 var darkStyles;
 var darkSdhemeMedia;
-var switcherRadios;
 
-var initializeSwitcher = function initializeSwitcher() {
+function initializeSwitcher() {
     lightStyles = document.querySelectorAll('link[rel=stylesheet][media*=prefers-color-scheme][media*=light]');
     darkStyles = document.querySelectorAll('link[rel=stylesheet][media*=prefers-color-scheme][media*=dark]');
     darkSdhemeMedia = matchMedia('(prefers-color-scheme: dark)');
-    switcherRadios = document.getElementsByClassName('switcher__radio');
 
     let savedScheme = getSavedScheme();
+    let switcherButtons = document.getElementsByClassName('theme-switcher');
 
-    if (savedScheme !== null) {
-        let currentRadio = document.querySelector(`.switcher__radio[value=${savedScheme}]`);
-        if (currentRadio !== null) {
-            currentRadio.checked = true;
-        }
+    if(switcherButtons.length === 0) return;
+    
+    if(savedScheme !== null)
+    {
+        switcherButtons[0].setAttribute("x-scheme", savedScheme);
     }
 
-    [...switcherRadios].forEach((radio) => {
-        radio.addEventListener('change', (event) => {
-            setScheme(event.target.value);
+    [...switcherButtons].forEach((button) => {
+        button.addEventListener('click', function() {
+            let currentScheme = switcherButtons[0].getAttribute("x-scheme");
+            let systemScheme = getSystemScheme();
+            let newScheme;
+            switch (currentScheme) {
+                case "dark":
+                    if(systemScheme === "dark")
+                    {
+                        newScheme = "auto";
+                    }
+                    else
+                    {
+                        newScheme = "light";
+                    }
+                    break;
+                case "light":
+                    if(systemScheme === "light")
+                    {
+                        newScheme = "auto";
+                    }
+                    else
+                    {
+                        newScheme = "dark";
+                    }
+                    break;
+                default:
+                    if(systemScheme === "light")
+                    {
+                        newScheme = "dark";
+                    }
+                    else
+                    {
+                        newScheme = "light";
+                    }
+                    break;
+            }
+
+            setScheme(newScheme);
+            switcherButtons[0].setAttribute("x-scheme", newScheme);
         });
     });
 }
@@ -93,4 +129,4 @@ $(window).on('popstate', function() {
 $(document).ready(function() {
     initializeSwitcher();
     initializeScheme();
-});
\ No newline at end of file
+});
diff --git a/deps/rabbitmq_management/priv/www/js/tmpl/layout.ejs b/deps/rabbitmq_management/priv/www/js/tmpl/layout.ejs
index ffbf1123872c..6ebe811522ee 100644
--- a/deps/rabbitmq_management/priv/www/js/tmpl/layout.ejs
+++ b/deps/rabbitmq_management/priv/www/js/tmpl/layout.ejs
@@ -54,11 +54,13 @@
     <li><a rel="noopener noreferrer" href="https://www.rabbitmq.com/docs/plugins" target="_blank">Plugins</a></li>
     <li><a rel="noopener noreferrer" href="https://www.rabbitmq.com/github" target="_blank">GitHub</a></li>
   </ul>
-  <fieldset class="switcher">
-    <legend class="switcher__legend">Scheme</legend>
-    <input class="switcher__radio switcher__radio--light" type="radio" name="color-scheme" value="light" aria-label="Light">
-    <input class="switcher__radio switcher__radio--auto" type="radio" name="color-scheme" value="auto" aria-label="System" checked>
-    <input class="switcher__radio switcher__radio--dark" type="radio" name="color-scheme" value="dark" aria-label="Dark">
-    <div class="switcher__status"></div>
-  </fieldset>
+  <button
+    class="theme-switcher"
+    type="button"
+    title="Switch between dark and light mode (currently auto mode)"
+    aria-label="Switch between dark and light mode (currently auto mode)"
+    aria-live="polite"
+    aria-pressed="true"
+    x-scheme="auto">
+  </button>
 </div>

From cd10d7a84bda16b68c3e71c6cd4f777336254ff4 Mon Sep 17 00:00:00 2001
From: Sergey Efimov <efimov90@gmail.com>
Date: Wed, 19 Mar 2025 00:54:29 +0300
Subject: [PATCH 10/10] Fix updating attributes

---
 deps/rabbitmq_management/priv/www/js/theme-switcher.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/deps/rabbitmq_management/priv/www/js/theme-switcher.js b/deps/rabbitmq_management/priv/www/js/theme-switcher.js
index 15bd70927400..b49a545194a7 100644
--- a/deps/rabbitmq_management/priv/www/js/theme-switcher.js
+++ b/deps/rabbitmq_management/priv/www/js/theme-switcher.js
@@ -56,7 +56,9 @@ function initializeSwitcher() {
             }
 
             setScheme(newScheme);
-            switcherButtons[0].setAttribute("x-scheme", newScheme);
+            button.setAttribute("x-scheme", newScheme);
+            button.setAttribute("title", `Switch between dark and light mode (currently ${newScheme} mode)`);
+            button.setAttribute("aria-label", `Switch between dark and light mode (currently ${newScheme} mode)`);
         });
     });
 }