From 6e01af33273fde9c31030a7b642c3ecc3f33584c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Mon, 21 Jun 2021 11:42:18 +0300
Subject: [PATCH] Fix dark mode bugs

---
 static/css/base.css             | 42 +++++++++++++++++++++++++++++++++
 static/css/bootstrap-colors.css | 25 ++++++++++++++++++++
 static/css/channels.css         |  2 +-
 static/css/variables.css        |  2 +-
 templates/base.html             |  3 +++
 5 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/static/css/base.css b/static/css/base.css
index 1c4a8d25..1feb12b1 100644
--- a/static/css/base.css
+++ b/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;
 }
diff --git a/static/css/bootstrap-colors.css b/static/css/bootstrap-colors.css
index 0261ca3d..97bc1fa6 100644
--- a/static/css/bootstrap-colors.css
+++ b/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);
+}
\ No newline at end of file
diff --git a/static/css/channels.css b/static/css/channels.css
index eed648ce..6e25c017 100644
--- a/static/css/channels.css
+++ b/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 {
diff --git a/static/css/variables.css b/static/css/variables.css
index 4f4bd479..d3b2fb5a 100644
--- a/static/css/variables.css
+++ b/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%);
 }
 
diff --git a/templates/base.html b/templates/base.html
index 92e3d6cf..d667cd3b 100644
--- a/templates/base.html
+++ b/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 %}