use CSS variables for dark mode dropdown styling

Author: sethbern

bases/rsptx/interactives/ptxrs-bootstrap.less

@@ -12,6 +12,8 @@
     --bodyFont: var(--body-text-color, #000000);
     --tooltip: #ffffff;
     --grayToWhite: #333333;
+    --dropdownBg: #ffffff;
+    --dropdownHoverBg: #f5f5f5;
     --navbar: #f8f8f8;
     --navbarFont: #707070;
     --navbarFontHover: #000000;
@@ -76,6 +78,8 @@
     --bodyFont: #99aab5;
     --tooltip: #000000;
     --grayToWhite: #ffffff;
+    --dropdownBg: #1a1a1a;
+    --dropdownHoverBg: #333333;
     --navbar: #3d3d3d;
     --navbarFont: #ffffff;
     --navbarFontHover: #d6d6d6;

bases/rsptx/interactives/runestone/common/css/runestone-custom-sphinx-bootstrap.css

@@ -59,6 +59,8 @@ Needed??? */
     --bodyFont: #99aab5;
     --tooltip: #000000;
     --grayToWhite: #ffffff;
+    --dropdownBg: #1a1a1a;
+    --dropdownHoverBg: #333333;
     --navbar: #3d3d3d;
     --navbarFont: #ffffff;
     --navbarFontHover: #d6d6d6;
@@ -388,34 +390,26 @@ div.container {
 }
 
 .dropdown-menu > li > label:hover, .dropdown-menu > li > label:focus {
-  color: #262626;
+  color: var(--grayToWhite);
   text-decoration: none;
-  background-color: #f5f5f5;
+  background-color: var(--dropdownHoverBg, #f5f5f5);
 }
 
-/*Dark mode-force dropdown menus to black background with white text */
-[data-theme="dark"] .dropdown-menu {
-    background-color: #000000;
-    color: #ffffff;
-}
 
-[data-theme="dark"] .dropdown-menu > li > a,
-[data-theme="dark"] .dropdown-menu > li > span,
-[data-theme="dark"] .dropdown-menu > li > div,
-[data-theme="dark"] .dropdown-menu > li > label {
-    color: #ffffff;
+.dropdown-menu {
+    background-color: var(--dropdownBg, #ffffff);
 }
 
-[data-theme="dark"] .dropdown-menu > li > a:hover,
-[data-theme="dark"] .dropdown-menu > li > a:focus,
-[data-theme="dark"] .dropdown-menu > li > label:hover,
-[data-theme="dark"] .dropdown-menu > li > label:focus {
-    color: #ffffff;
-    background-color: #333333;
+.dropdown-menu > li > a {
+    color: var(--grayToWhite);
 }
 
-.dropdown-menu > li > a {
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus,
+.dropdown-menu > li > label:hover,
+.dropdown-menu > li > label:focus {
     color: var(--grayToWhite);
+    background-color: var(--dropdownHoverBg, #f5f5f5);
 }
 
 .loggedinuser {

components/rsptx/templates/staticAssets/css/runestone-custom-sphinx-bootstrap.css

@@ -140,25 +140,33 @@ div.section {
     white-space: nowrap;
 }
 
-/*Dark mode- force dropdown menus to black background with white text */
-[data-theme="dark"] .dropdown-menu {
-    background-color: #000000 !important;
-    color: #ffffff !important;
+:root {
+    --dropdownBg: #ffffff;
+    --dropdownHoverBg: #f5f5f5;
 }
 
-[data-theme="dark"] .dropdown-menu > li > a,
-[data-theme="dark"] .dropdown-menu > li > span,
-[data-theme="dark"] .dropdown-menu > li > div,
-[data-theme="dark"] .dropdown-menu > li > label {
-    color: #ffffff !important;
+[data-theme="dark"] {
+    --dropdownBg: #1a1a1a;
+    --dropdownHoverBg: #333333;
 }
 
-[data-theme="dark"] .dropdown-menu > li > a:hover,
-[data-theme="dark"] .dropdown-menu > li > a:focus,
-[data-theme="dark"] .dropdown-menu > li > label:hover,
-[data-theme="dark"] .dropdown-menu > li > label:focus {
-    color: #ffffff !important;
-    background-color: #333333 !important;
+.dropdown-menu {
+    background-color: var(--dropdownBg, #ffffff);
+}
+
+.dropdown-menu > li > a,
+.dropdown-menu > li > span,
+.dropdown-menu > li > div,
+.dropdown-menu > li > label {
+    color: var(--grayToWhite, #333);
+}
+
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus,
+.dropdown-menu > li > label:hover,
+.dropdown-menu > li > label:focus {
+    color: var(--grayToWhite, #333);
+    background-color: var(--dropdownHoverBg, #f5f5f5);
 }
 
 .loggedinuser {