Merge pull request #11 from sethbern/fix-dark-mode

fix dark mode for dropdown menu in course home and for chapter naviga…

Author: sethbern

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

@@ -393,6 +393,27 @@ div.container {
   background-color: #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;
+}
+
+[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);
 }

bases/rsptx/interactives/runestone/common/css/user-highlights.css

@@ -99,6 +99,17 @@ div.sphinxsidebar {
 	margin-left: auto;
 	margin-right: auto;
 }
+
+[data-theme="dark"] #jump-to-chapter {
+    background-color: #000000;
+    color: #ffffff;
+    border-color: #555555;
+}
+
+[data-theme="dark"] #jump-to-chapter option {
+    background-color: #000000;
+    color: #ffffff;
+}
 #navigation-links{
 	background-color: #F8F8F8;
     border: 1px solid #CCCCCC;

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

@@ -140,6 +140,27 @@ 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;
+}
+
+[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"] .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;
+}
+
 .loggedinuser {
     font-weight: bold;
 }