Fix dark mode bugs

static/css/base.css

@@ -51,6 +51,36 @@ body {
         border-bottom: 5px solid var(--border-muted);
         padding-bottom: 25px;
     }
+
+    .navbar-default .navbar-nav > .open > a,
+    .navbar-default .navbar-nav > .open > a:hover {
+        color: var(--text-color);
+    }
+}
+
+@media (max-width: 767px) {
+    .navbar-default .navbar-nav > li > a,
+    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
+        color: var(--text-color);
+    }
+
+    .navbar-default .navbar-nav > li > a:hover {
+        color: var(--btn-active-color);
+        border-left: 5px solid var(--border-color);
+        padding-left: 10px;
+    }
+
+    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
+        color: var(--btn-active-color);
+        border-left: 5px solid var(--border-color);
+        padding-left: 20px;
+    }
+
+
+    .navbar-default .navbar-nav > .open > a,
+    .navbar-default .navbar-nav > .open > a:hover {
+        color: var(--text-muted);
+    }
 }
 
 .navbar-default {
@@ -63,6 +93,18 @@ body {
     font-weight: bold;
 }
 
+.navbar-collapse {
+    box-shadow: none;
+}
+
+.navbar-default .navbar-toggle {
+    border-color: var(--border-color);
+}
+
+.navbar-default .navbar-toggle .icon-bar {
+    background-color: var(--text-muted);
+}
+
 #nav-sign-up {
     padding: 21px 0 21px 15px;
 }

static/css/bootstrap-colors.css

@@ -104,6 +104,10 @@ hr {
     color:  var(--text-color);
 }
 
+.navbar-default .navbar-collapse {
+    border-color: var(--border-color);
+}
+
 .breadcrumb {
     background-color:  var(--breadcrumb-bg);
 }
@@ -159,3 +163,24 @@ h2 small {
 .help-block {
     color: var(--text-muted);
 }
+
+.dropdown-menu {
+    background-color: var(--panel-bg);
+}
+
+.dropdown-menu .divider {
+    background-color: var(--border-muted);
+}
+
+.dropdown-header {
+    color: var(--text-muted);
+}
+
+.dropdown-menu li a {
+    color: var(--text-color);
+}
+
+.dropdown-menu li a:hover {
+    color: var(--btn-active-color);
+    background-color: var(--btn-active-bg);
+}

static/css/channels.css

@@ -217,7 +217,7 @@ table.channels-table > tbody > tr > th {
 
 .ai-guide-screenshot {
     max-width: 100%;
-    border: 6px solid #EEE;
+    border: 6px solid var(--border-color);
 }
 
 .add-integration li.link-to-github {

static/css/variables.css

@@ -131,7 +131,7 @@ body.dark {
     --tag-up-bg: #25252a;
     --tag-up-border: #303033;
     --tag-up-color: #e0e0e2;
-    --text-color: #e0e0e2;
+    --text-color: hsl(240, 3.3%, 88.2%);
     --text-muted: hsl(240, 3%, 55%);
 }
 

templates/base.html

@@ -12,6 +12,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="apple-mobile-web-app-title" content="{{ site_name }}">
     <meta name="application-name" content="{{ site_name }}">
+    {% if request.user.is_authenticated and request.profile.theme == 'dark' %}
+    <meta name="theme-color" content="#18181b">
+    {% endif %}
     <link rel="icon" type="image/x-icon" href="{% static 'img/favicon.ico' %}">
     <link rel="apple-touch-icon" sizes="180x180" href="{% static 'img/apple-touch-180.png' %}">
     {% block head %}{% endblock %}