Merge pull request #939 from erwindon/darkmode2

erwindon · web-flow · commit ca007a890596 · 2026-08-08T22:40:14.000+02:00
implement dark mode
diff --git a/docs/README.md b/docs/README.md
@@ -57,6 +57,7 @@ But note that browsers that are older than that are not detected and failures ma
 - Choose between live info and cached info for grains/pillar
 - View details of orchestrations and allow to start them
 - Act on multiple minions/keys/nodegroups by first selecting them
+- Follows dark-mode selection from the browser
 
 
 ## Quick start using PAM as authentication method
diff --git a/saltgui/index.html b/saltgui/index.html
@@ -3,6 +3,7 @@
 
   <head>
     <title>SaltGUI</title>
+    <link rel='stylesheet' type='text/css' href='static/stylesheets/variables.css'/>
     <link rel='stylesheet' type='text/css' href='static/stylesheets/controls.css'/>
     <link rel='stylesheet' type='text/css' href='static/stylesheets/main.css'/>
     <link rel='stylesheet' type='text/css' href='static/stylesheets/login.css'/>
diff --git a/saltgui/static/scripts/Character.js b/saltgui/static/scripts/Character.js
@@ -61,6 +61,6 @@ export class Character {
   }
 
   static buttonInText (txt) {
-    return "<span style=\"background-color:#eee\">&nbsp;" + txt + "&nbsp;</span>";
+    return "<span style=\"background-color:#eee; color:black\">&nbsp;" + txt + "&nbsp;</span>";
   }
 }
diff --git a/saltgui/static/scripts/Router.js b/saltgui/static/scripts/Router.js
@@ -277,7 +277,11 @@ export class Router {
     // perform the hiding/showing
     for (let nr = 1; nr <= 2; nr++) {
       const item = document.getElementById("button-" + pPage.path + nr);
-      item.style.color = !visible && hasVisibleChild ? "lightgray" : "black";
+      if (!visible && hasVisibleChild) {
+        item.classList.add("menu-item-dimmed");
+      } else {
+        item.classList.remove("menu-item-dimmed");
+      }
       if (visible && item.dataset.hasShortcut === "true") {
         // show the shortcut indicator only when item is enabled
         item.classList.add("menu-item-first-letter");
diff --git a/saltgui/static/scripts/panels/Login.js b/saltgui/static/scripts/panels/Login.js
@@ -68,7 +68,12 @@ export class LoginPanel extends Panel {
     aa.rel = "noopener";
 
     const img = Utils.createElem("img");
-    img.src = "static/images/GitHub_Invertocat_Black.png";
+    const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const updateGithubLogo = () => {
+      img.src = darkModeQuery.matches ? "static/images/GitHub_Invertocat_White.png" : "static/images/GitHub_Invertocat_Black.png";
+    };
+    updateGithubLogo();
+    darkModeQuery.addEventListener("change", updateGithubLogo);
     img.style = "width: 1em; margin-right: 5px";
     aa.append(img);
 
diff --git a/saltgui/static/stylesheets/beacons.css b/saltgui/static/stylesheets/beacons.css
@@ -16,5 +16,5 @@
 
 .beacon-disabled,
 .beacon-waiting {
-  color: gray;
+  color: var(--text-light);
 }
diff --git a/saltgui/static/stylesheets/controls.css b/saltgui/static/stylesheets/controls.css
@@ -2,7 +2,8 @@
 
 input,
 select {
-  color: #272727;
+  color: var(--text-primary);
+  background-color: var(--bg-panel);
   padding: 7px 10px;
   display: inline-block;
   margin-bottom: 15px;
@@ -14,24 +15,24 @@ select {
 input[type="text"],
 input[type="password"],
 select {
-  border: 2px solid #e2e2e2;
+  border: 2px solid var(--border-color-input);
   border-radius: 2px;
 }
 
 input[type="text"]:focus,
 input[type="password"]:focus,
 select:focus {
-  border: 2px solid #4caf50;
+  border: 2px solid var(--border-color-focus);
 }
 
 input[type="submit"] {
-  background-color: #4caf50;
+  background-color: var(--color-primary);
   color: white;
   border: 0;
   margin-top: 5px;
   margin-bottom: 0;
   cursor: pointer;
-  box-shadow: 0 0 5px rgba(33, 33, 33, 50%);
+  box-shadow: 0 0 5px var(--shadow-color);
   width: 20%;
   min-width: 200px;
 }
diff --git a/saltgui/static/stylesheets/dropdown.css b/saltgui/static/stylesheets/dropdown.css
@@ -13,12 +13,13 @@ div.search-box .menu-dropdown {
   position: absolute;
   max-height: 300px;
   overflow-y: auto;
-  background: #fff;
-  box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 30%);
+  background: var(--bg-dropdown);
+  box-shadow: 0 3px 10px -2px var(--shadow-dropdown-dark);
   border: 1px solid rgba(0, 0, 0, 10%);
   z-index: 5;
   cursor: pointer;
   text-align: left;
+  color: var(--text-primary);
 }
 
 /* Links inside the menu-dropdown */
@@ -60,8 +61,8 @@ pre.output .run-command-button {
 }
 
 pre.output .run-command-button:hover .menu-dropdown {
-  background-color: #f9f9f9;
-  color: black;
+  background-color: var(--bg-dropdown);
+  color: var(--text-primary);
 }
 
 .dropdown {
@@ -72,9 +73,10 @@ pre.output .run-command-button:hover .menu-dropdown {
 .dropdown-content {
   display: none;
   position: absolute;
-  background-color: #f9f9f9;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 20%);
+  background-color: var(--bg-dropdown);
+  box-shadow: 0 8px 16px 0 var(--shadow-dropdown);
   z-index: 3;
+  color: var(--text-primary);
 }
 
 .dropdown:hover .dropdown-content {
diff --git a/saltgui/static/stylesheets/job.css b/saltgui/static/stylesheets/job.css
@@ -17,7 +17,7 @@
 }
 
 .highlight-task {
-  background-color: gray;
+  background-color: var(--bg-panel-hover);
 }
 
 #summary-list-job {
diff --git a/saltgui/static/stylesheets/login.css b/saltgui/static/stylesheets/login.css
@@ -9,15 +9,16 @@
 
 @media not print {
   #page-login {
-    background-color: #263238;
+    background-color: var(--bg-body);
   }
 }
 
 #login-panel {
   align-self: center;
-  background-color: white;
-  box-shadow: 0 0 24px rgba(0, 0, 0, 70%);
+  background-color: var(--bg-login-panel);
+  box-shadow: 0 0 24px var(--shadow-login);
   border-radius: 2px;
+  color: var(--text-primary);
 
   /* 1px needed to prevent bottom margin to disappear when using small screens */
   padding: 0 50px 1px;
@@ -30,7 +31,7 @@
   font-weight: lighter;
   font-size: 60px;
   width: 100%;
-  color: #505050;
+  color: var(--text-login);
 }
 
 #login-panel input {
@@ -45,12 +46,12 @@
 }
 
 #login-panel select option#eauth-default {
-  color: gray;
+  color: var(--text-light);
 }
 
 .attribution {
   display: block;
-  opacity: 0.4;
+  color: var(--text-secondary);
   font-size: 15px;
   margin-top: 40px;
   margin-bottom: 20px;
diff --git a/saltgui/static/stylesheets/main.css b/saltgui/static/stylesheets/main.css
@@ -10,23 +10,25 @@ body {
   margin: 0;
   padding: 0;
   font-family: Roboto, Helvetica, Arial, sans-serif;
+  color: var(--text-primary);
 }
 
 @media not print {
   body {
-    background-color: #263238;
+    background-color: var(--bg-body);
   }
 }
 
 header {
-  border-top: 2px solid #4caf50;
-  background-color: white;
+  border-top: 2px solid var(--border-color-header);
+  background-color: var(--bg-header);
   margin-top: 0;
+  color: var(--text-primary);
 }
 
 .logo {
   cursor: pointer;
-  color: #4caf50;
+  color: var(--text-logo);
   font-size: 30px;
   font-weight: normal;
   display: inline-block;
@@ -42,7 +44,7 @@ header {
 
 .docu {
   cursor: pointer;
-  color: gray;
+  color: var(--text-light);
   font-size: 30px;
   font-weight: normal;
   display: inline-block;
@@ -58,26 +60,27 @@ header {
 }
 
 .docu:hover {
-  color: #4caf50;
+  color: var(--color-primary);
 }
 
 h1 {
-  color: #4caf50;
+  color: var(--color-primary);
   font-weight: lighter;
   font-size: 20px;
   margin: 0 10px 0 0;
   display: inline-block;
 }
 
 .msg {
-  color: #505050;
+  color: var(--text-secondary);
   padding-top: 5px;
 }
 
 .panel {
-  background-color: white;
+  background-color: var(--bg-panel);
   padding: 20px;
   border-radius: 1px;
+  color: var(--text-primary);
 
   /* separate main-panel and jobs-panel */
   margin: 5px 0 0 5px;
@@ -114,11 +117,11 @@ h1 {
   display: inline-block;
   min-width: 50px;
   text-align: center;
-  background-color: #eee;
+  background-color: var(--bg-small-button);
   margin: 0;
   cursor: pointer;
   font-size: 18px;
-  color: #666;
+  color: var(--text-small-button);
   height: 24px;
   vertical-align: middle;
   padding-left: 10px;
@@ -150,7 +153,7 @@ h1 {
 }
 
 .small-button:hover {
-  color: #4caf50;
+  color: var(--color-primary);
 }
 
 .small-button-for-hover {
@@ -174,7 +177,7 @@ h1 {
 
 .search-error {
   display: block;
-  color: red;
+  color: var(--color-failure);
   margin-bottom: 10px;
   margin-left: 10px;
 }
@@ -184,15 +187,20 @@ h1 {
   font-size: 18px;
   font-weight: lighter;
   padding: 15px 30px;
+  color: var(--text-primary);
 }
 
 .menu-item-active {
   font-weight: bold;
 }
 
+.menu-item-dimmed {
+  color: var(--text-light);
+}
+
 .menu-item:hover {
-  background: rgba(0, 0, 0, 15%);
-  color: #4caf50;
+  background: var(--bg-menu-hover);
+  color: var(--color-primary);
   cursor: pointer;
 }
 
@@ -203,7 +211,7 @@ h1 {
 }
 
 .menu-item-first-letter:hover::first-letter {
-  text-decoration: underline #4caf50 double;
+  text-decoration: underline var(--color-primary) double;
   text-decoration-skip-ink: none;
 }
 
@@ -218,7 +226,7 @@ h1 {
 }
 
 #warning {
-  background: yellow;
+  background: var(--bg-warning);
   margin-top: 5px;
   padding: 5px 10px 5px 20px;
 }
@@ -253,7 +261,7 @@ h1 {
   width: 100%;
   height: 100%;
   z-index: 2;
-  background-color: rgba(0, 0, 0, 86%);
+  background-color: var(--bg-popup-overlay);
 }
 
 .popup h1 {
@@ -265,21 +273,22 @@ h1 {
 .run-command {
   padding: 30px;
   z-index: 3;
-  background-color: white;
+  background-color: var(--bg-panel);
   position: relative;
   top: 5px;
   margin-left: 15px;
   margin-right: 15px;
   width: calc(100% - 30px); /* padding+margin */
+  color: var(--text-primary);
 }
 
 #run-command {
   margin-bottom: 20px;
 }
 
 pre.output {
-  background-color: #272727;
-  color: white;
+  background-color: var(--bg-output);
+  color: var(--text-output);
   margin: 0;
   padding: 10px;
   border-radius: 2px;
@@ -304,10 +313,10 @@ pre.output {
 }
 
 .warning-button:hover {
-  color: #4caf50;
+  color: var(--color-primary);
   cursor: pointer;
 }
 
 .state-details-compressed {
-  color: gray;
+  color: var(--text-light);
 }
diff --git a/saltgui/static/stylesheets/page.css b/saltgui/static/stylesheets/page.css
diff --git a/saltgui/static/stylesheets/schedules.css b/saltgui/static/stylesheets/schedules.css
diff --git a/saltgui/static/stylesheets/tooltip.css b/saltgui/static/stylesheets/tooltip.css
diff --git a/saltgui/static/stylesheets/variables.css b/saltgui/static/stylesheets/variables.css

Original file line number	Diff line number	Diff line change
`@@ -61,6 +61,6 @@ export class Character {`
`61`	`61`	`}`
`62`	`62`
`63`	`63`	`static buttonInText (txt) {`
`64`		`- return "<span style=\"background-color:#eee\"> " + txt + " </span>";`
	`64`	`+ return "<span style=\"background-color:#eee; color:black\"> " + txt + " </span>";`
`65`	`65`	`}`
`66`	`66`	`}`
Original file line number	Diff line number	Diff line change
`@@ -16,5 +16,5 @@`
`16`	`16`
`17`	`17`	`.beacon-disabled,`
`18`	`18`	`.beacon-waiting {`
`19`		`- color: gray;`
	`19`	`+ color: var(--text-light);`
`20`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`.highlight-task {`
`20`		`- background-color: gray;`
	`20`	`+ background-color: var(--bg-panel-hover);`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`#summary-list-job {`