Fix some color issues with the Bootstrap dark theme

MauricioFauth · MauricioFauth · commit 4095a901bb54 · 2023-05-11T16:50:37.000-03:00
Related to #18368 Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
diff --git a/public/themes/bootstrap/scss/_common.scss b/public/themes/bootstrap/scss/_common.scss
@@ -6,27 +6,6 @@
   margin: 0 0 12px;
 }
 
-button.mult_submit,
-.checkall_box + label {
-  text-decoration: none;
-  color: #235a81;
-  cursor: pointer;
-  outline: none;
-}
-
-button.mult_submit {
-  &:hover,
-  &:focus {
-    text-decoration: underline;
-    color: #235a81;
-  }
-}
-
-.checkall_box + label:hover {
-  text-decoration: underline;
-  color: #235a81;
-}
-
 #navbarDropdown > img {
   display: none;
 }
@@ -483,7 +462,15 @@ div#tablestatistics table {
   width: 100%;
 
   .navbar {
-    background-color: rgba(var(--#{$prefix}body-color-rgb), 0.03);
+    background-color: #f8f8f8;
+  }
+}
+
+@include color-mode(dark) {
+  #topmenucontainer {
+    .navbar {
+      background-color: #262a2e;
+    }
   }
 }
 
@@ -1256,6 +1243,17 @@ table#index_columns {
   }
 }
 
+@include color-mode(dark) {
+  .config-form fieldset th small,
+  .config-form fieldset th .small {
+    color: inherit;
+  }
+
+  .config-form .custom {
+    background: #555;
+  }
+}
+
 fieldset {
   .group-header {
     th {
@@ -1299,6 +1297,12 @@ fieldset {
   }
 }
 
+@include color-mode(dark) {
+  fieldset .group-header th {
+    background: #333;
+  }
+}
+
 .click-hide-message {
   cursor: pointer;
 }
diff --git a/public/themes/bootstrap/scss/_designer.scss b/public/themes/bootstrap/scss/_designer.scss
@@ -30,8 +30,8 @@ $resize-img: '../img/designer/resize.png';
 }
 
 #canvas {
-  background-color: $white;
-  color: $black;
+  background-color: var(--#{$prefix}body-bg);
+  color: var(--#{$prefix}body-color);
 }
 
 canvas.designer {
@@ -273,8 +273,8 @@ canvas.designer {
 
 #osn_tab {
   position: absolute;
-  background-color: $white;
-  color: $black;
+  background-color: var(--#{$prefix}body-bg);
+  color: var(--#{$prefix}body-color);
 }
 
 .designer_header {
@@ -488,6 +488,13 @@ a {
   font-weight: bold;
 }
 
+@include color-mode(dark) {
+  .side-menu,
+  #name-panel {
+    background-color: var(--#{$prefix}secondary-bg);
+  }
+}
+
 #container-form {
   width: 100%;
   position: absolute;
diff --git a/templates/database/designer/main.twig b/templates/database/designer/main.twig
@@ -193,7 +193,7 @@ window.designerConfig = {{ designer_config|raw }};
 </div>
 <div id="canvas_outer">
     <form action="" id="container-form" method="post" name="form1">
-        <div id="osn_tab">
+        <div id="osn_tab" class="w-100">
             <canvas class="designer" id="canvas" width="100" height="100"></canvas>
         </div>
         <div id="layer_menu" class="hide">
