| 1 | // Dark color mode variables
|
|---|
| 2 | //
|
|---|
| 3 | // Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
|
|---|
| 4 |
|
|---|
| 5 | //
|
|---|
| 6 | // Global colors
|
|---|
| 7 | //
|
|---|
| 8 |
|
|---|
| 9 | // scss-docs-start sass-dark-mode-vars
|
|---|
| 10 | // scss-docs-start theme-text-dark-variables
|
|---|
| 11 | $primary-text-emphasis-dark: tint-color($primary, 40%) !default;
|
|---|
| 12 | $secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
|
|---|
| 13 | $success-text-emphasis-dark: tint-color($success, 40%) !default;
|
|---|
| 14 | $info-text-emphasis-dark: tint-color($info, 40%) !default;
|
|---|
| 15 | $warning-text-emphasis-dark: tint-color($warning, 40%) !default;
|
|---|
| 16 | $danger-text-emphasis-dark: tint-color($danger, 40%) !default;
|
|---|
| 17 | $light-text-emphasis-dark: $gray-100 !default;
|
|---|
| 18 | $dark-text-emphasis-dark: $gray-300 !default;
|
|---|
| 19 | // scss-docs-end theme-text-dark-variables
|
|---|
| 20 |
|
|---|
| 21 | // scss-docs-start theme-bg-subtle-dark-variables
|
|---|
| 22 | $primary-bg-subtle-dark: shade-color($primary, 80%) !default;
|
|---|
| 23 | $secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
|
|---|
| 24 | $success-bg-subtle-dark: shade-color($success, 80%) !default;
|
|---|
| 25 | $info-bg-subtle-dark: shade-color($info, 80%) !default;
|
|---|
| 26 | $warning-bg-subtle-dark: shade-color($warning, 80%) !default;
|
|---|
| 27 | $danger-bg-subtle-dark: shade-color($danger, 80%) !default;
|
|---|
| 28 | $light-bg-subtle-dark: $gray-800 !default;
|
|---|
| 29 | $dark-bg-subtle-dark: mix($gray-800, $black) !default;
|
|---|
| 30 | // scss-docs-end theme-bg-subtle-dark-variables
|
|---|
| 31 |
|
|---|
| 32 | // scss-docs-start theme-border-subtle-dark-variables
|
|---|
| 33 | $primary-border-subtle-dark: shade-color($primary, 40%) !default;
|
|---|
| 34 | $secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
|
|---|
| 35 | $success-border-subtle-dark: shade-color($success, 40%) !default;
|
|---|
| 36 | $info-border-subtle-dark: shade-color($info, 40%) !default;
|
|---|
| 37 | $warning-border-subtle-dark: shade-color($warning, 40%) !default;
|
|---|
| 38 | $danger-border-subtle-dark: shade-color($danger, 40%) !default;
|
|---|
| 39 | $light-border-subtle-dark: $gray-700 !default;
|
|---|
| 40 | $dark-border-subtle-dark: $gray-800 !default;
|
|---|
| 41 | // scss-docs-end theme-border-subtle-dark-variables
|
|---|
| 42 |
|
|---|
| 43 | $body-color-dark: $gray-300 !default;
|
|---|
| 44 | $body-bg-dark: $gray-900 !default;
|
|---|
| 45 | $body-secondary-color-dark: rgba($body-color-dark, .75) !default;
|
|---|
| 46 | $body-secondary-bg-dark: $gray-800 !default;
|
|---|
| 47 | $body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
|
|---|
| 48 | $body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default;
|
|---|
| 49 | $body-emphasis-color-dark: $white !default;
|
|---|
| 50 | $border-color-dark: $gray-700 !default;
|
|---|
| 51 | $border-color-translucent-dark: rgba($white, .15) !default;
|
|---|
| 52 | $headings-color-dark: inherit !default;
|
|---|
| 53 | $link-color-dark: tint-color($primary, 40%) !default;
|
|---|
| 54 | $link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
|
|---|
| 55 | $code-color-dark: tint-color($code-color, 40%) !default;
|
|---|
| 56 | $mark-color-dark: $body-color-dark !default;
|
|---|
| 57 | $mark-bg-dark: $yellow-800 !default;
|
|---|
| 58 |
|
|---|
| 59 |
|
|---|
| 60 | //
|
|---|
| 61 | // Forms
|
|---|
| 62 | //
|
|---|
| 63 |
|
|---|
| 64 | $form-select-indicator-color-dark: $body-color-dark !default;
|
|---|
| 65 | $form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
|
|---|
| 66 |
|
|---|
| 67 | $form-switch-color-dark: rgba($white, .25) !default;
|
|---|
| 68 | $form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
|
|---|
| 69 |
|
|---|
| 70 | // scss-docs-start form-validation-colors-dark
|
|---|
| 71 | $form-valid-color-dark: $green-300 !default;
|
|---|
| 72 | $form-valid-border-color-dark: $green-300 !default;
|
|---|
| 73 | $form-invalid-color-dark: $red-300 !default;
|
|---|
| 74 | $form-invalid-border-color-dark: $red-300 !default;
|
|---|
| 75 | // scss-docs-end form-validation-colors-dark
|
|---|
| 76 |
|
|---|
| 77 |
|
|---|
| 78 | //
|
|---|
| 79 | // Accordion
|
|---|
| 80 | //
|
|---|
| 81 |
|
|---|
| 82 | $accordion-icon-color-dark: $primary-text-emphasis-dark !default;
|
|---|
| 83 | $accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
|
|---|
| 84 |
|
|---|
| 85 | $accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
|
|---|
| 86 | $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
|
|---|
| 87 | // scss-docs-end sass-dark-mode-vars
|
|---|
