fix file input and input addon text color on dark themes, closes #1256

thomaspark · Jun 13, 2023 · 52bd1d2 · 52bd1d2
1 parent 45823d0
commit 52bd1d2
Show file tree

Hide file tree

Showing 52 changed files with 220 additions and 234 deletions.
diff --git a/dist/cyborg/_bootswatch.scss b/dist/cyborg/_bootswatch.scss
@@ -55,9 +55,6 @@ legend {
 }
 
 .form-control {
-  color-scheme: light;
-  background-clip: border-box;
-
   &:disabled,
   &[readonly] {
     border-color: transparent;

diff --git a/dist/cyborg/_variables.scss b/dist/cyborg/_variables.scss
@@ -89,7 +89,9 @@ $input-group-addon-border-color:    transparent !default;
 $form-check-input-bg:                     $white !default;
 $form-check-input-border:                 none !default;
 
-$form-file-button-color:          $white !default;
+$form-file-button-color:          $input-group-addon-color !default;
+$form-file-button-bg:             $input-group-addon-bg !default;
+$form-file-button-hover-bg:       darken($form-file-button-bg, 2%) !default;
 
 // Dropdowns
 

diff --git a/dist/cyborg/bootstrap.css b/dist/cyborg/bootstrap.css
@@ -2184,7 +2184,7 @@ progress {
   -webkit-margin-end: 1rem;
   margin-inline-end: 1rem;
   color: #fff;
-  background-color: var(--bs-tertiary-bg);
+  background-color: #282828;
   pointer-events: none;
   border-color: inherit;
   border-style: solid;
@@ -2200,7 +2200,7 @@ progress {
   -webkit-margin-end: 1rem;
   margin-inline-end: 1rem;
   color: #fff;
-  background-color: var(--bs-tertiary-bg);
+  background-color: #282828;
   pointer-events: none;
   border-color: inherit;
   border-style: solid;
@@ -2219,10 +2219,10 @@ progress {
   }
 }
 .form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
-  background-color: var(--bs-secondary-bg);
+  background-color: #232323;
 }
 .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
-  background-color: var(--bs-secondary-bg);
+  background-color: #232323;
 }
 
 .form-control-plaintext {
@@ -12130,10 +12130,6 @@ legend {
   color: #fff;
 }
 
-.form-control {
-  color-scheme: light;
-  background-clip: border-box;
-}
 .form-control:disabled, .form-control[readonly] {
   border-color: transparent;
 }

diff --git a/dist/cyborg/bootstrap.min.css b/dist/cyborg/bootstrap.min.css
diff --git a/dist/darkly/_bootswatch.scss b/dist/darkly/_bootswatch.scss
@@ -19,16 +19,18 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0
 
 // Forms
 
-.form-control {
-  color-scheme: light;
-}
-
-.input-group-addon {
-  color: $white;
+@include color-mode(dark) {
+  .input-group-text {
+    // color: $white;
+  }
 }
 
-.form-floating > label {
-  color: $gray-700;
+.form-floating {
+  > label,
+  > .form-control:focus ~ label,
+  > .form-control:not(:placeholder-shown) ~ label {
+    color: $input-placeholder-color;
+  }
 }
 
 // Navs

diff --git a/dist/darkly/_variables.scss b/dist/darkly/_variables.scss
@@ -72,13 +72,16 @@ $input-color:                       $gray-800 !default;
 $input-border-color:                $body-bg !default;
 $input-group-addon-color:           $gray-500 !default;
 $input-group-addon-bg:              $gray-700 !default;
+$input-placeholder-color:           $gray-600 !default;
 
 $form-check-input-bg:                     $white !default;
 $form-check-input-border:                 none !default;
 
 $form-select-disabled-color:        $gray-600 !default;
 
-$form-file-button-color:          $white !default;
+$form-file-button-color:          $input-group-addon-color !default;
+$form-file-button-bg:             $input-group-addon-bg !default;
+$form-file-button-hover-bg:       darken($form-file-button-bg, 5%) !default;
 
 // Dropdowns
 

diff --git a/dist/darkly/bootstrap.css b/dist/darkly/bootstrap.css
@@ -2162,11 +2162,11 @@ progress {
   padding: 0;
 }
 .form-control::-moz-placeholder {
-  color: var(--bs-secondary-color);
+  color: #888;
   opacity: 1;
 }
 .form-control::placeholder {
-  color: var(--bs-secondary-color);
+  color: #888;
   opacity: 1;
 }
 .form-control:disabled {
@@ -2178,8 +2178,8 @@ progress {
   margin: -0.375rem -0.75rem;
   -webkit-margin-end: 0.75rem;
   margin-inline-end: 0.75rem;
-  color: #fff;
-  background-color: var(--bs-tertiary-bg);
+  color: #adb5bd;
+  background-color: #444;
   pointer-events: none;
   border-color: inherit;
   border-style: solid;
@@ -2194,8 +2194,8 @@ progress {
   margin: -0.375rem -0.75rem;
   -webkit-margin-end: 0.75rem;
   margin-inline-end: 0.75rem;
-  color: #fff;
-  background-color: var(--bs-tertiary-bg);
+  color: #adb5bd;
+  background-color: #444;
   pointer-events: none;
   border-color: inherit;
   border-style: solid;
@@ -2214,10 +2214,10 @@ progress {
   }
 }
 .form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
-  background-color: var(--bs-secondary-bg);
+  background-color: #373737;
 }
 .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
-  background-color: var(--bs-secondary-bg);
+  background-color: #373737;
 }
 
 .form-control-plaintext {
@@ -12081,16 +12081,14 @@ textarea.form-control-lg {
   color: #888;
 }
 
-.form-control {
-  color-scheme: light;
-}
-
-.input-group-addon {
-  color: #fff;
+.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
+  color: #888;
 }
 
-.form-floating > label {
-  color: #444;
+.form-floating > label,
+.form-floating > .form-control:focus ~ label,
+.form-floating > .form-control:not(:placeholder-shown) ~ label {
+  color: #888;
 }
 
 .nav-tabs .nav-link,

diff --git a/dist/darkly/bootstrap.min.css b/dist/darkly/bootstrap.min.css
diff --git a/dist/materia/_bootswatch.scss b/dist/materia/_bootswatch.scss
@@ -114,16 +114,6 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;50
   }
 }
 
-.bg-primary,
-.bg-success,
-.bg-info,
-.bg-warning,
-.bg-danger,
-.bg-dark,
-.bg-black {
-  color-scheme: dark;
-}
-
 // Buttons
 
 @include btn(primary, $primary, $white);
@@ -260,10 +250,6 @@ p {
   }
 }
 
-.form-control {
-  color-scheme: inherit;
-}
-
 textarea,
 textarea.form-control,
 input.form-control,

diff --git a/dist/materia/bootstrap.css b/dist/materia/bootstrap.css
@@ -12157,16 +12157,6 @@ textarea.form-control-lg {
   color: rgba(255, 255, 255, 0.5);
 }
 
-.bg-primary,
-.bg-success,
-.bg-info,
-.bg-warning,
-.bg-danger,
-.bg-dark,
-.bg-black {
-  color-scheme: dark;
-}
-
 .btn-primary {
   position: relative;
 }
@@ -12801,10 +12791,6 @@ p {
   font-size: 1.25rem;
 }
 
-.form-control {
-  color-scheme: inherit;
-}
-
 textarea,
 textarea.form-control,
 input.form-control,

diff --git a/dist/materia/bootstrap.min.css b/dist/materia/bootstrap.min.css
diff --git a/dist/quartz/_bootswatch.scss b/dist/quartz/_bootswatch.scss
@@ -35,6 +35,12 @@ body {
   background-image: $body-bg-image;
 }
 
+@include color-mode(dark) {
+  body {
+    color: $white;
+  }
+}
+
 // Tables
 
 .table-secondary {
@@ -83,6 +89,10 @@ body {
   backdrop-filter: blur(5px);
 }
 
+.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
+  background-color: rgba($white, 0.1);
+}
+
 .input-group-text {
   box-shadow: inset 1px 1px $border-color, inset -1px -1px rgba($white, .1);
 }

diff --git a/dist/quartz/_variables.scss b/dist/quartz/_variables.scss
@@ -120,8 +120,6 @@ $form-select-focus-box-shadow:    none !default;
 
 $form-range-track-bg:             rgba($black, .2) !default;
 
-$form-range-thumb-disabled-bg:             $gray-500 !default;
-
 // Navs
 
 $nav-link-disabled-color:           $text-muted !default;

diff --git a/dist/quartz/bootstrap.css b/dist/quartz/bootstrap.css
@@ -2589,10 +2589,10 @@ textarea.form-control-lg {
   pointer-events: none;
 }
 .form-range:disabled::-webkit-slider-thumb {
-  background-color: #adb5bd;
+  background-color: var(--bs-secondary-color);
 }
 .form-range:disabled::-moz-range-thumb {
-  background-color: #adb5bd;
+  background-color: var(--bs-secondary-color);
 }
 
 .form-floating {
@@ -12079,6 +12079,10 @@ body {
   background-image: linear-gradient(90deg, #33b7e2, #5e62b0, #dc307c);
 }
 
+[data-bs-theme=dark] body {
+  color: #fff;
+}
+
 .table-secondary {
   --bs-table-hover-color: $white;
 }
@@ -12125,6 +12129,14 @@ body {
   backdrop-filter: blur(5px);
 }
 
+.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
 .input-group-text {
   box-shadow: inset 1px 1px rgba(255, 255, 255, 0.2), inset -1px -1px rgba(255, 255, 255, 0.1);
 }

diff --git a/dist/quartz/bootstrap.min.css b/dist/quartz/bootstrap.min.css
diff --git a/dist/slate/_bootswatch.scss b/dist/slate/_bootswatch.scss
@@ -230,10 +230,6 @@ legend {
   color: $white;
 }
 
-.form-control {
-  color-scheme: light;
-}
-
 .input-group-addon {
   @include btn-shadow($secondary);
   color: $white;

diff --git a/dist/slate/_variables.scss b/dist/slate/_variables.scss
@@ -70,16 +70,22 @@ $input-btn-padding-x:         1rem !default;
 
 // Forms
 
-$input-bg:                              $white !default;
-$input-disabled-color:                  $gray-600 !default;
-$input-disabled-bg:                     #ccc !default;
-
+$input-bg:                          $white !default;
 $input-color:                       $gray-900 !default;
+$input-border-color:                rgba($black, .6) !default;
+$input-group-addon-color:           $gray-500 !default;
+$input-group-addon-bg:              $gray-700 !default;
+$input-disabled-color:              $gray-600 !default;
+$input-disabled-bg:                 #ccc !default;
+
+$form-check-input-bg:                     $white !default;
 
 $form-select-disabled-bg:           $input-disabled-bg !default;
 $form-select-disabled-color:        $input-disabled-color !default;
 
-$form-check-input-bg:                     $white !default;
+$form-file-button-color:          $input-group-addon-color !default;
+$form-file-button-bg:             $input-group-addon-bg !default;
+$form-file-button-hover-bg:       darken($form-file-button-bg, 5%) !default;
 
 // Dropdowns