dark mode improvements

_config.yml

@@ -20,6 +20,7 @@ tabler-plugins:
   - tabler-flags
   - tabler-payments
   - tabler-buttons
+  - tabler-dark
 
 exclude:
   - .jekyll-cache

pages/tmp-dark.html

@@ -17,13 +17,32 @@ page-title: Dark
 					<h6>H6 header</h6>
 					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus adipisci consectetur cupiditate, doloribus error ex expedita fuga incidunt laboriosam pariatur perferendis possimus praesentium quisquam reiciendis tempora ut! Cumque, fuga!</p>
 					{% include ui/progress.html value=60 size="sm" class="mb-3" %}
-					<div>
+					<div class="mb-3">
 						{% include ui/button.html color="primary" %}
 						{% include ui/button.html color="secondary" %}
 						{% include ui/button.html color="danger" %}
 						{% include ui/button.html color="success" %}
 						{% include ui/button.html color="warning" %}
 					</div>
+
+					<div class="mb-3">
+						<label class="form-label">Text</label>
+						<div class="form-hint">Here's some more info.</div>
+						<input type="text" class="form-control" name="example-text-input" placeholder="Text..">
+					</div>
+
+					{% include parts/input-color.html %}
+					{% include parts/input-checkboxes.html %}
+
+					<div class="mb-3">
+						<label class="form-label">Input with appended text</label>
+						{% include ui/form/input-group.html append=".tabler.io" input-class="text-right pr-0" class="input-group-flat" %}
+					</div>
+
+					<div class="mb-3">
+						<label class="form-label">Price</label>
+						{% include ui/form/input-group.html prepend="$" append=".00" %}
+					</div>
 				</div>
 				<footer class="card-footer">
 					Card footer

scss/_dark.scss

@@ -1,9 +1,5 @@
 // stylelint-disable declaration-no-important
 
-$dark-body-bg: #222935;
-$dark-body-color: #afbdd1;
-$dark-border-color: rgba($border-color, .01);
-
 @mixin dark-mode {
   &,
   .modal-content,
@@ -20,10 +16,6 @@ $dark-border-color: rgba($border-color, .01);
     background: $dark;
   }
 
-  .form-control-light {
-    background: $dark-border-color;
-  }
-
   .text-body {
     color: #afbdd1 !important;
   }
@@ -39,6 +31,18 @@ $dark-border-color: rgba($border-color, .01);
   .form-fieldset {
     border-color: transparent;
   }
+
+  .form-control,
+  .form-select,
+  .form-check-input:not(:checked) {
+    background: transparent;
+    border-color: $dark-border-color;
+    color: inherit;
+  }
+
+  .input-group-text {
+    border-color: $dark-border-color;
+  }
 }
 
 @media not print {

scss/_variables.scss

@@ -54,10 +54,13 @@ $body-color: $dark !default;
 $text-muted: mix($body-color, #fff, 64%) !default;
 $border-color: rgba(mix($body-color, #fff, 75%), .24) !default;
 
-
 $hover-bg: $light-white !default;
 $active-bg: rgba($blue, .06) !default;
 
+$dark-body-bg: #222935 !default;
+$dark-body-color: #afbdd1 !default;
+$dark-border-color: rgba($dark-body-color, .4) !default;
+
 $primary: $blue !default;
 $secondary: $text-muted !default;
 $success: $green !default;
@@ -219,7 +222,10 @@ $input-btn-padding-y-lg: .5rem !default;
 $input-height: null !default;
 $input-height-sm: null !default;
 $input-height-lg: null !default;
+$input-color: inherit !default;
+$input-focus-color: inherit !default;
 
+//buttons
 $btn-padding-x: 1rem !default;
 $btn-font-weight: 500 !default;
 $btn-border-radius: 3px !default;
@@ -326,7 +332,7 @@ $input-disabled-bg: $gray-100 !default;
 $input-border-color: $border-color !default;
 $input-placeholder-color: $text-muted !default;
 
-$input-group-addon-bg: $gray-100 !default;
+$input-group-addon-bg: $min-white !default;
 $input-group-addon-color: $text-muted !default;
 
 $dropdown-border-color: $border-color !default;

scss/mixins/_mixins.scss

@@ -36,3 +36,10 @@
     }
   }
 }
+
+@mixin dark {
+  .bg-dark &,
+  .theme-dark & {
+    @content;
+  }
+}

scss/tabler-dark.scss

@@ -0,0 +1,2 @@
+@import "config";
+@import "dark";

scss/tabler.scss

@@ -69,7 +69,6 @@
 @import "utils/opacity";
 @import "utils/shadow";
 
-@import "dark";
 @import "rtl";
 
 @import "debug";

scss/ui/_forms.scss

@@ -19,7 +19,7 @@ Form label
   font-weight: $font-weight-normal;
   color: $text-muted;
   line-height: $line-height-base * (100%/$small-font-size);
-  font-size: $small-font-size ;
+  font-size: $small-font-size;
 }
 
 /**
@@ -40,7 +40,7 @@ Form control
  */
 .form-control {
   &:-webkit-autofill {
-    box-shadow: 0 0 0 1000px #fff inset;
+    box-shadow: 0 0 0 1000px #ffffff inset;
   }
 
   &:disabled,
@@ -48,7 +48,8 @@ Form control
     color: $text-muted;
     user-select: none;
   }
-  &[size]{
+
+  &[size] {
     width: auto;
   }
 }
@@ -101,7 +102,7 @@ Form help
 
   &:hover,
   &[aria-describedby] {
-    color: #fff;
+    color: #ffffff;
     background: $primary;
   }
 }
@@ -124,8 +125,13 @@ Form switch
 /**
 Input group
  */
-.input-group-prepend .input-group-text { border-right: 0; }
-.input-group-append .input-group-text { border-left: 0; }
+.input-group-prepend .input-group-text {
+  border-right: 0;
+}
+
+.input-group-append .input-group-text {
+  border-left: 0;
+}
 
 .input-group-flat {
   &:focus-within {

scss/vendor/_selectize.scss

@@ -20,6 +20,8 @@
   font-size: $input-font-size;
   box-shadow: none;
   line-height: $input-line-height;
+  background-color: inherit !important;
+  color: inherit !important;
 
   .selectize-control.single & {
     background: $form-select-bg escape-svg($form-select-indicator) $form-select-background;