From 29118bbcd8d7e9994401a317985caf2285f90b37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maur=C3=ADcio=20Meneghini=20Fauth?= <mauricio@fauth.dev>
Date: Mon, 12 Jun 2023 21:48:44 -0300
Subject: [PATCH] Fix Console dark color issues for Bootstrap theme
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
---
 public/themes/bootstrap/scss/_common.scss | 42 +++++++++++++++++++----
 1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/public/themes/bootstrap/scss/_common.scss b/public/themes/bootstrap/scss/_common.scss
index 6237a81ccf..62fd4747ab 100644
--- a/public/themes/bootstrap/scss/_common.scss
+++ b/public/themes/bootstrap/scss/_common.scss
@@ -1699,7 +1699,7 @@ div#page_content div {
 
   .toolbar {
     position: relative;
-    background: #ccc;
+    background: var(--#{$prefix}gray-200);
     border-top: solid 1px #aaa;
     cursor: n-resize;
     pointer-events: auto;
@@ -1753,12 +1753,12 @@ div#page_content div {
   .message span.action:hover,
   .toolbar .button:hover,
   .switch_button:hover {
-    background: #ddd;
+    background: var(--#{$prefix}gray-400);
   }
 
   .toolbar {
     .button.active {
-      background: #ddd;
+      background: var(--#{$prefix}gray-400);
     }
 
     .text {
@@ -1781,7 +1781,7 @@ div#page_content div {
     overflow-y: auto;
     margin-bottom: -65px;
     border-top: solid 1px #aaa;
-    background: $white;
+    background: var(--#{$prefix}body-bg);
     padding-top: 0.4em;
     pointer-events: auto;
 
@@ -1940,7 +1940,7 @@ div#page_content div {
     .action_content {
       position: absolute;
       bottom: 100%;
-      background: #ccc;
+      background: var(--#{$prefix}gray-200);
       border: solid 1px #aaa;
       border-top-left-radius: 3px;
     }
@@ -1961,7 +1961,7 @@ div#page_content div {
     }
 
     .text {
-      background: $white;
+      background: var(--#{$prefix}white);
     }
 
     &.collapsed {
@@ -2030,6 +2030,36 @@ div#page_content div {
   }
 }
 
+@include color-mode(dark) {
+  #pma_console {
+    .toolbar {
+      background-color: var(--#{$prefix}gray-800);
+
+      .button.active {
+        background: var(--#{$prefix}gray-600);
+        color: var(--#{$prefix}white);
+      }
+    }
+
+    .message span.action:hover,
+    .toolbar .button:hover,
+    .switch_button:hover {
+      background: var(--#{$prefix}gray-600);
+      color: var(--#{$prefix}white);
+    }
+
+    .message {
+      .action_content {
+        background: var(--#{$prefix}gray-800);
+      }
+
+      .text {
+        background: var(--#{$prefix}black);
+      }
+    }
+  }
+}
+
 #pma_bookmarks .content.add_bookmark,
 #pma_console_options .content {
   padding: 4px 6px;