// Dark color mode variables // // 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. // // Global colors // // scss-docs-start sass-dark-mode-vars $primary-text-emphasis-dark: $cyan-600; $secondary-text-emphasis-dark: $gray-600; $success-text-emphasis-dark: $blue-600; $info-text-emphasis-dark: $indigo-600; $warning-text-emphasis-dark: $yellow-600; $danger-text-emphasis-dark: $red-600; $pink-text-emphasis-dark: $pink-600; $purple-text-emphasis-dark: $purple-600; $light-text-emphasis-dark: $gray-600; $dark-text-emphasis-dark: $gray-600; $primary-bg-subtle-dark: rgba(var(--#{$prefix}primary-rgb), 0.2); $secondary-bg-subtle-dark: rgba(var(--#{$prefix}secondary-rgb), 0.2); $success-bg-subtle-dark: rgba(var(--#{$prefix}success-rgb), 0.2); $info-bg-subtle-dark: rgba(var(--#{$prefix}info-rgb), 0.2); $warning-bg-subtle-dark: rgba(var(--#{$prefix}warning-rgb), 0.2); $danger-bg-subtle-dark: rgba(var(--#{$prefix}danger-rgb), 0.2); $pink-bg-subtle-dark: rgba(var(--#{$prefix}pink-rgb), 0.2); $purple-bg-subtle-dark: rgba(var(--#{$prefix}purple-rgb), 0.2); $light-bg-subtle-dark: rgba(var(--#{$prefix}light-rgb), 0.2); $dark-bg-subtle-dark: rgba(var(--#{$prefix}dark-rgb), 0.2); $primary-border-subtle-dark: $cyan-700; $secondary-border-subtle-dark: $gray-700; $success-border-subtle-dark: $blue-700; $info-border-subtle-dark: $indigo-800; $warning-border-subtle-dark: $yellow-800; $danger-border-subtle-dark: $red-700; $pink-border-subtle-dark: $pink-700; $purple-border-subtle-dark: $purple-700; $light-border-subtle-dark: $gray-700; $dark-border-subtle-dark: $gray-800; $body-color-dark: #aab8c5; $body-bg-dark: #2d333c; $body-emphasis-color-dark: $gray-100; $body-secondary-color-dark: #8391a2; $body-secondary-bg-dark: #313a46; $body-tertiary-color-dark: #f1f1f1; $body-tertiary-bg-dark: #404954; $border-color-dark: #464f5b; $border-color-translucent-dark: #464f5b; $headings-color-dark: inherit; $link-color-dark: $cyan-500; $link-hover-color-dark: $cyan-600; $code-color-dark: $cyan-500; // // Forms // $form-select-indicator-color-dark: $body-color-dark; $form-select-indicator-dark: url("data:image/svg+xml,"); $form-switch-color-dark: rgba($white, .25); $form-switch-bg-image-dark: url("data:image/svg+xml,"); // scss-docs-start form-validation-colors-dark $form-valid-color-dark: $blue-300 !default; $form-valid-border-color-dark: $blue-300 !default; $form-invalid-color-dark: $red-300 !default; $form-invalid-border-color-dark: $red-300 !default; // scss-docs-end form-validation-colors-dark // // Accordion // $accordion-icon-color-dark: $primary-text-emphasis-dark !default; $accordion-icon-active-color-dark: $primary-text-emphasis-dark !default; $accordion-button-icon-dark: url("data:image/svg+xml,") !default; $accordion-button-active-icon-dark: url("data:image/svg+xml,") !default; // scss-docs-end sass-dark-mode-vars // scss-docs-start theme-text-dark-map $theme-colors-text-dark: ( "primary": $primary-text-emphasis-dark, "secondary": $secondary-text-emphasis-dark, "success": $success-text-emphasis-dark, "info": $info-text-emphasis-dark, "warning": $warning-text-emphasis-dark, "danger": $danger-text-emphasis-dark, "pink": $pink-text-emphasis-dark, "purple": $purple-text-emphasis-dark, "light": $light-text-emphasis-dark, "dark": $dark-text-emphasis-dark, ); // scss-docs-end theme-text-dark-map // scss-docs-start theme-bg-subtle-dark-map $theme-colors-bg-subtle-dark: ( "primary": $primary-bg-subtle-dark, "secondary": $secondary-bg-subtle-dark, "success": $success-bg-subtle-dark, "info": $info-bg-subtle-dark, "warning": $warning-bg-subtle-dark, "danger": $danger-bg-subtle-dark, "pink": $pink-bg-subtle-dark, "purple": $purple-bg-subtle-dark, "light": $light-bg-subtle-dark, "dark": $dark-bg-subtle-dark, ); // scss-docs-end theme-bg-subtle-dark-map // scss-docs-start theme-border-subtle-dark-map $theme-colors-border-subtle-dark: ( "primary": $primary-border-subtle-dark, "secondary": $secondary-border-subtle-dark, "success": $success-border-subtle-dark, "info": $info-border-subtle-dark, "warning": $warning-border-subtle-dark, "danger": $danger-border-subtle-dark, "pink": $pink-border-subtle-dark, "purple": $purple-border-subtle-dark, "light": $light-border-subtle-dark, "dark": $dark-border-subtle-dark, ); // scss-docs-end theme-border-subtle-dark-map