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..5ef094168cd6
--- /dev/null
+++ b/deps/rabbitmq_management/priv/www/css/dark.css
@@ -0,0 +1,282 @@
+:root {
+    color-scheme: dark;
+
+    --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 */
+
+.theme-switcher[x-scheme="auto"]:after {
+    filter: invert(1);
+}
+  
+.theme-switcher[x-scheme="dark"]:after {
+    filter: invert(1);
+}
+  
+.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
new file mode 100644
index 000000000000..baf838cffa09
--- /dev/null
+++ b/deps/rabbitmq_management/priv/www/css/light.css
@@ -0,0 +1,282 @@
+:root {
+    color-scheme: light;
+
+    --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 */
+
+.theme-switcher[x-scheme="auto"]:after {
+    filter: invert(0);
+}
+  
+.theme-switcher[x-scheme="dark"]:after {
+    filter: invert(0);
+}
+  
+.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 d03933845bdb..754a843ae3ae 100644
--- a/deps/rabbitmq_management/priv/www/css/main.css
+++ b/deps/rabbitmq_management/priv/www/css/main.css
@@ -1,8 +1,8 @@
-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; }
 
@@ -12,16 +12,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; }
@@ -33,23 +33,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%; }
 
@@ -61,53 +61,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; }
 
@@ -115,46 +118,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; }
 
@@ -167,14 +170,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,
@@ -188,18 +191,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; }
@@ -211,9 +214,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;
@@ -232,7 +235,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%; }
 
@@ -240,8 +243,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;
@@ -251,7 +254,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;
 }
 
@@ -264,8 +267,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; }
@@ -280,17 +283,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; }
@@ -310,9 +313,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; }
@@ -322,45 +325,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; }
@@ -368,9 +371,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}
@@ -384,7 +387,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;
@@ -398,17 +401,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 {
@@ -422,9 +425,44 @@ 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 */
+
+.theme-switcher {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  border-radius: 45%;
+  border: 2px solid var(--input-border-color);
+  background-color: var(--dafault-background-color);
+}
+
+.theme-switcher:after {
+  content: "";
+  background-size: 24px;
+  background-repeat: no-repeat;
+  background-position: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+.theme-switcher[x-scheme="auto"]:after {
+  background-image: url(../img/auto.svg);
+}
+
+.theme-switcher[x-scheme="dark"]:after {
+  background-image: url(../img/dark.svg);
+}
+
+.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/auto.svg b/deps/rabbitmq_management/priv/www/img/auto.svg
new file mode 100644
index 000000000000..8f12e3b860c4
--- /dev/null
+++ b/deps/rabbitmq_management/priv/www/img/auto.svg
@@ -0,0 +1,63 @@
+<?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="-11.595859"
+     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.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"
+       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
new file mode 100644
index 000000000000..4fd733f453a4
--- /dev/null
+++ b/deps/rabbitmq_management/priv/www/img/dark.svg
@@ -0,0 +1,65 @@
+<?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="15.839192"
+     inkscape:cx="-3.3461737"
+     inkscape:cy="20.637052"
+     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.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"
+       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
new file mode 100644
index 000000000000..beb3479e47f7
--- /dev/null
+++ b/deps/rabbitmq_management/priv/www/img/light.svg
@@ -0,0 +1,129 @@
+<?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="-0.20840671"
+     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 />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-59.680961,-124.06236)">
+    <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"
+       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/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..b49a545194a7
--- /dev/null
+++ b/deps/rabbitmq_management/priv/www/js/theme-switcher.js
@@ -0,0 +1,134 @@
+var lightStyles;
+var darkStyles;
+var darkSdhemeMedia;
+
+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)');
+
+    let savedScheme = getSavedScheme();
+    let switcherButtons = document.getElementsByClassName('theme-switcher');
+
+    if(switcherButtons.length === 0) return;
+    
+    if(savedScheme !== null)
+    {
+        switcherButtons[0].setAttribute("x-scheme", savedScheme);
+    }
+
+    [...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);
+            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)`);
+        });
+    });
+}
+
+var initializeScheme = function initializeScheme() {
+    let savedScheme = getSavedScheme();
+    let 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() {
+    let 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');
+}
+
+$(window).on('popstate', function() {
+    initializeSwitcher();
+    initializeScheme();
+});
+
+$(document).ready(function() {
+    initializeSwitcher();
+    initializeScheme();
+});
diff --git a/deps/rabbitmq_management/priv/www/js/tmpl/layout.ejs b/deps/rabbitmq_management/priv/www/js/tmpl/layout.ejs
index ac31dbbb72c3..6ebe811522ee 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>
+  <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>