dark mode with bootstrap complete components

Used https://github.com/vinorodrigues/bootstrap-dark-5/releases/tag/v1.0.0

scss/dark/bootstrap/forms/_floating-labels.scss

@@ -0,0 +1,26 @@
+.form-floating {
+
+  // > label {
+  //   border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
+  // }
+
+  > .form-control {
+    // &::placeholder {
+    //   color: transparent;
+    // }
+  }
+
+  > .form-control:focus,
+  > .form-control:not(:placeholder-shown),
+  > .form-select {
+    ~ label {
+      opacity: $form-floating-label-opacity-alt;
+    }
+  }
+  // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
+  > .form-control:-webkit-autofill {
+    ~ label {
+      opacity: $form-floating-label-opacity-alt;
+    }
+  }
+}

scss/dark/bootstrap/forms/_form-check.scss

@@ -0,0 +1,93 @@
+// Check/radio
+
+.form-check-input {
+  background-color: $form-check-input-bg-alt;
+  border: $form-check-input-border-alt;
+
+  &:active {
+    filter: $form-check-input-active-filter-alt;
+  }
+
+  &:focus {
+    border-color: $form-check-input-focus-border-alt;
+    box-shadow: $form-check-input-focus-box-shadow-alt;
+  }
+
+  &:checked {
+    background-color: $form-check-input-checked-bg-color-alt;
+    border-color: $form-check-input-checked-border-color-alt;
+
+    &[type="checkbox"] {
+      @if $enable-gradients {
+        background-image: escape-svg($form-check-input-checked-bg-image-alt), var(--#{$variable-prefix}gradient);
+      } @else {
+        background-image: escape-svg($form-check-input-checked-bg-image-alt);
+      }
+    }
+
+    &[type="radio"] {
+      @if $enable-gradients {
+        background-image: escape-svg($form-check-radio-checked-bg-image-alt), var(--#{$variable-prefix}gradient);
+      } @else {
+        background-image: escape-svg($form-check-radio-checked-bg-image-alt);
+      }
+    }
+  }
+
+  &[type="checkbox"]:indeterminate {
+    background-color: $form-check-input-indeterminate-bg-color-alt;
+    border-color: $form-check-input-indeterminate-border-color-alt;
+
+    @if $enable-gradients {
+      background-image: escape-svg($form-check-input-indeterminate-bg-image-alt), var(--#{$variable-prefix}gradient);
+    } @else {
+      background-image: escape-svg($form-check-input-indeterminate-bg-image-alt);
+    }
+  }
+
+  &:disabled {
+    opacity: $form-check-input-disabled-opacity-alt;
+  }
+
+  // Use disabled attribute in addition of :disabled pseudo-class
+  &[disabled],
+  &:disabled {
+    ~ .form-check-label {
+      opacity: $form-check-label-disabled-opacity-alt;
+    }
+  }
+}
+
+.form-check-label {
+  color: $form-check-label-color-alt;
+}
+
+// Switch
+
+.form-switch {
+
+  .form-check-input {
+    background-image: escape-svg($form-switch-bg-image-alt);
+
+    &:focus {
+      background-image: escape-svg($form-switch-focus-bg-image-alt);
+    }
+
+    &:checked {
+      @if $enable-gradients {
+        background-image: escape-svg($form-switch-checked-bg-image-alt), var(--#{$variable-prefix}gradient);
+      } @else {
+        background-image: escape-svg($form-switch-checked-bg-image-alt);
+      }
+    }
+  }
+}
+
+.btn-check {
+  &[disabled],
+  &:disabled {
+    + .btn {
+      opacity: $form-check-btn-check-disabled-opacity-alt;
+    }
+  }
+}

scss/dark/bootstrap/forms/_form-control.scss

@@ -0,0 +1,64 @@
+//
+// General form controls (plus a few specific high-level interventions)
+//
+
+.form-control {
+  color: $input-color-alt;
+  background-color: $input-bg-alt;
+  border: $input-border-width solid $input-border-color-alt;
+
+  @include box-shadow($input-box-shadow-alt);
+
+  // Customize the `:focus` state to imitate native WebKit styles.
+  &:focus {
+    color: $input-focus-color-alt;
+    background-color: $input-focus-bg-alt;
+    border-color: $input-focus-border-color-alt;
+    @if $enable-shadows {
+      @include box-shadow($input-box-shadow-alt, $input-focus-box-shadow-alt);
+    } @else {
+      box-shadow: $input-focus-box-shadow-alt;
+    }
+  }
+
+  // Placeholder
+  &::placeholder {
+    color: $input-placeholder-color-alt;
+  }
+
+  // Disabled and read-only inputs
+  &:disabled,
+  &:read-only {
+    background-color: $input-disabled-bg-alt;
+    border-color: $input-disabled-border-color-alt;
+  }
+
+  // File input buttons theming
+  &::file-selector-button {
+    color: $form-file-button-color-alt;
+    @include gradient-bg($form-file-button-bg-alt);
+    border-color: inherit;
+  }
+
+  &:hover:not(:disabled):not(:read-only)::file-selector-button {
+    background-color: $form-file-button-hover-bg-alt;
+  }
+
+  &::-webkit-file-upload-button {
+    color: $form-file-button-color-alt;
+    @include gradient-bg($form-file-button-bg-alt);
+    border-color: inherit;
+  }
+
+  &:hover:not(:disabled):not(:read-only)::-webkit-file-upload-button {
+    background-color: $form-file-button-hover-bg-alt;
+  }
+}
+
+// Readonly controls as plain text
+
+.form-control-plaintext {
+  color: $input-plaintext-color-alt;
+  background-color: transparent;
+  border: solid transparent;
+}

scss/dark/bootstrap/forms/_form-range.scss

@@ -0,0 +1,56 @@
+// Range
+
+.form-range {
+  // background-color: transparent;
+
+  &:focus {
+    &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow-alt; }
+    &::-moz-range-thumb     { box-shadow: $form-range-thumb-focus-box-shadow-alt; }
+  }
+
+  &::-webkit-slider-thumb {
+    @include gradient-bg($form-range-thumb-bg-alt);
+    border: $form-range-thumb-border-alt;
+    @include box-shadow($form-range-thumb-box-shadow-alt);
+
+    &:active {
+      @include gradient-bg($form-range-thumb-active-bg-alt);
+    }
+  }
+
+  &::-webkit-slider-runnable-track {
+    // color: transparent; // Why?
+    background-color: $form-range-track-bg-alt;
+    // border-color: transparent;
+    @include box-shadow($form-range-track-box-shadow-alt);
+  }
+
+  &::-moz-range-thumb {
+    @include gradient-bg($form-range-thumb-bg-alt);
+    border: $form-range-thumb-border-alt;
+    @include box-shadow($form-range-thumb-box-shadow-alt);
+
+    &:active {
+      @include gradient-bg($form-range-thumb-active-bg-alt);
+    }
+  }
+
+  &::-moz-range-track {
+    // color: transparent;
+    background-color: $form-range-track-bg-alt;
+    // border-color: transparent; // Firefox specific?
+    @include box-shadow($form-range-track-box-shadow-alt);
+  }
+
+  &:disabled {
+    pointer-events: none;
+
+    &::-webkit-slider-thumb {
+      background-color: $form-range-thumb-disabled-bg-alt;
+    }
+
+    &::-moz-range-thumb {
+      background-color: $form-range-thumb-disabled-bg-alt;
+    }
+  }
+}

scss/dark/bootstrap/forms/_form-select.scss

@@ -0,0 +1,35 @@
+// Select
+
+.form-select {
+  color: $form-select-color-alt;
+  background-color: $form-select-bg-alt;
+  background-image: escape-svg($form-select-indicator-alt);
+  border: $form-select-border-width solid $form-select-border-color-alt;
+  @include box-shadow($form-select-box-shadow-alt);
+
+  &:focus {
+    border-color: $form-select-focus-border-color-alt;
+    @if $enable-shadows {
+      @include box-shadow($form-select-box-shadow-alt, $form-select-focus-box-shadow-alt);
+    } @else {
+      box-shadow: $form-select-focus-box-shadow-alt;
+    }
+  }
+
+  &[multiple],
+  &[size]:not([size="1"]) {
+    background-image: none;
+  }
+
+  &:disabled {
+    color: $form-select-disabled-color-alt;
+    background-color: $form-select-disabled-bg-alt;
+    border-color: $form-select-disabled-border-color-alt;
+  }
+
+  // Remove outline from select box in FF
+  &:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 $form-select-color-alt;
+  }
+}

scss/dark/bootstrap/forms/_form-text.scss

@@ -0,0 +1,5 @@
+// Form text
+
+.form-text {
+  color: $form-text-color-alt;
+}

scss/dark/bootstrap/forms/_input-group.scss

@@ -0,0 +1,16 @@
+// Textual addons
+
+.input-group-text {
+  color: $input-group-addon-color-alt;
+  background-color: $input-group-addon-bg-alt;
+  border: $input-border-width solid $input-group-addon-border-color-alt;
+}
+
+// Rounded corners
+
+.input-group {
+  $validation-messages: "";
+  @each $state in map-keys($form-validation-states-alt) {
+    $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
+  }
+}  // WHAT DOES THIS DO???

scss/dark/bootstrap/forms/_labels.scss

@@ -0,0 +1,9 @@
+// Labels
+
+.form-label {
+  color: $form-label-color-alt;
+}
+
+.col-form-label {
+  color: $form-label-color-alt;
+}

scss/dark/bootstrap/forms/_validation.scss

@@ -0,0 +1,5 @@
+// Form validation
+
+@each $state, $data in $form-validation-states-alt {
+  @include form-validation-state-alt($state, $data...);
+}