Change navbar to use dark background and light text

djmattyg007 · djmattyg007 · commit 5163b142b4ee · 2021-01-10T12:33:37.000+11:00
This contrasts a lot better than what was there previously.
diff --git a/mopidy_api_explorer/static/css/app.css b/mopidy_api_explorer/static/css/app.css
@@ -1,10 +1,26 @@
+:root {
+    --mopidy-bg: #465158;
+    --mopidy-fg: #e8ecef;
+}
+
 body {
     position: relative;
 }
 pre {
     margin-bottom: 0;
 }
 
+.bg-mopidy {
+    background-color: var(--mopidy-bg);
+}
+
+.navbar-dark .navbar-brand,
+.navbar-dark .navbar-nav .nav-link,
+.navbar-dark .navbar-nav .nav-link:focus,
+.navbar-dark .navbar-nav .nav-link:hover {
+    color: var(--mopidy-fg);
+}
+
 #toc-container {
     position: sticky;
     top: 60px;
diff --git a/mopidy_api_explorer/static/index.html b/mopidy_api_explorer/static/index.html
@@ -9,7 +9,7 @@
 </head>
 <body data-bs-spy="scroll" data-bs-target="#toc-container" data-bs-offset="100">
 
-<header class="navbar navbar-expand-lg navbar-light bg-primary sticky-top">
+<header class="navbar navbar-expand-lg navbar-dark bg-mopidy sticky-top">
     <nav class="container flex-wrap flex-lg-nowrap" aria-label="Navigation">
         <a class="navbar-brand" href="#">Mopidy API Explorer</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-contents" aria-controls="navbar-contents" aria-expanded="false" aria-label="Toggle navigation">
