mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-17 19:06:40 +02:00
Code Issues Releases Wiki Activity

Proposal to offer a customization way for dark mode

Browse Source
This commit is contained in:
louismaxime.piton
2023-02-28 12:31:55 +01:00
parent 80ba848443
commit 7726b345aa
3 changed files with 57 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
scss/_maps.scss
View File

@@ -44,12 +44,30 @@ $theme-colors-border-subtle: (
"dark": $dark-border-subtle, "dark": $dark-border-subtle,
) !default; ) !default;
// scss-docs-end theme-border-subtle-map // scss-docs-end theme-border-subtle-map
$theme-colors-dark: null !default;
$theme-colors-rgb-dark: null !default;
$theme-colors-text-dark: null !default; $theme-colors-text-dark: null !default;
$theme-colors-bg-subtle-dark: null !default; $theme-colors-bg-subtle-dark: null !default;
$theme-colors-border-subtle-dark: null !default; $theme-colors-border-subtle-dark: null !default;
@if $enable-dark-mode { @if $enable-dark-mode {
// scss-docs-start theme-color-dark-map
$theme-colors-dark: (
"primary": $primary-dark,
"secondary": $secondary-dark,
"success": $success-dark,
"info": $info-dark,
"warning": $warning-dark,
"danger": $danger-dark,
"light": $light-dark,
"dark": $dark-dark,
) !default;
// scss-docs-end theme-color-dark-map
// scss-docs-start theme-colors-rgb-dark
$theme-colors-rgb-dark: map-loop($theme-colors-dark, to-rgb, "$value") !default;
// scss-docs-end theme-colors-rgb-dark
// scss-docs-start theme-text-dark-map // scss-docs-start theme-text-dark-map
$theme-colors-text-dark: ( $theme-colors-text-dark: (
"primary": $primary-text-emphasis-dark, "primary": $primary-text-emphasis-dark,

8
scss/_root.scss
View File

@@ -153,6 +153,14 @@
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark}; --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)}; --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
@each $color, $value in $theme-colors-dark {
--#{$prefix}#{$color}: #{$value};
}
@each $color, $value in $theme-colors-rgb-dark {
--#{$prefix}#{$color}-rgb: #{$value};
}
@each $color, $value in $theme-colors-text-dark { @each $color, $value in $theme-colors-text-dark {
--#{$prefix}#{$color}-text-emphasis: #{$value}; --#{$prefix}#{$color}-text-emphasis: #{$value};
} }

49
scss/_variables-dark.scss
View File

@@ -7,35 +7,46 @@
// //
// scss-docs-start sass-dark-mode-vars // scss-docs-start sass-dark-mode-vars
// scss-docs-start theme-color-dark-variables
$primary-dark: $blue !default;
$secondary-dark: $gray-600 !default;
$success-dark: $green !default;
$info-dark: $cyan !default;
$warning-dark: $yellow !default;
$danger-dark: $red !default;
$light-dark: $gray-100 !default;
$dark-dark: $gray-900 !default;
// scss-docs-end theme-color-dark-variables
// scss-docs-start theme-text-dark-variables // scss-docs-start theme-text-dark-variables
$primary-text-emphasis-dark: tint-color($primary, 40%) !default; $primary-text-emphasis-dark: tint-color($primary-dark, 40%) !default;
$secondary-text-emphasis-dark: tint-color($secondary, 40%) !default; $secondary-text-emphasis-dark: tint-color($secondary-dark, 40%) !default;
$success-text-emphasis-dark: tint-color($success, 40%) !default; $success-text-emphasis-dark: tint-color($success-dark, 40%) !default;
$info-text-emphasis-dark: tint-color($info, 40%) !default; $info-text-emphasis-dark: tint-color($info-dark, 40%) !default;
$warning-text-emphasis-dark: tint-color($warning, 40%) !default; $warning-text-emphasis-dark: tint-color($warning-dark, 40%) !default;
$danger-text-emphasis-dark: tint-color($danger, 40%) !default; $danger-text-emphasis-dark: tint-color($danger-dark, 40%) !default;
$light-text-emphasis-dark: $gray-100 !default; $light-text-emphasis-dark: $gray-100 !default;
$dark-text-emphasis-dark: $gray-300 !default; $dark-text-emphasis-dark: $gray-300 !default;
// scss-docs-end theme-text-dark-variables // scss-docs-end theme-text-dark-variables
// scss-docs-start theme-bg-subtle-dark-variables // scss-docs-start theme-bg-subtle-dark-variables
$primary-bg-subtle-dark: shade-color($primary, 80%) !default; $primary-bg-subtle-dark: shade-color($primary-dark, 80%) !default;
$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default; $secondary-bg-subtle-dark: shade-color($secondary-dark, 80%) !default;
$success-bg-subtle-dark: shade-color($success, 80%) !default; $success-bg-subtle-dark: shade-color($success-dark, 80%) !default;
$info-bg-subtle-dark: shade-color($info, 80%) !default; $info-bg-subtle-dark: shade-color($info-dark, 80%) !default;
$warning-bg-subtle-dark: shade-color($warning, 80%) !default; $warning-bg-subtle-dark: shade-color($warning-dark, 80%) !default;
$danger-bg-subtle-dark: shade-color($danger, 80%) !default; $danger-bg-subtle-dark: shade-color($danger-dark, 80%) !default;
$light-bg-subtle-dark: $gray-800 !default; $light-bg-subtle-dark: $gray-800 !default;
$dark-bg-subtle-dark: mix($gray-800, $black) !default; $dark-bg-subtle-dark: mix($gray-800, $black) !default;
// scss-docs-end theme-bg-subtle-dark-variables // scss-docs-end theme-bg-subtle-dark-variables
// scss-docs-start theme-border-subtle-dark-variables // scss-docs-start theme-border-subtle-dark-variables
$primary-border-subtle-dark: shade-color($primary, 40%) !default; $primary-border-subtle-dark: shade-color($primary-dark, 40%) !default;
$secondary-border-subtle-dark: shade-color($secondary, 40%) !default; $secondary-border-subtle-dark: shade-color($secondary-dark, 40%) !default;
$success-border-subtle-dark: shade-color($success, 40%) !default; $success-border-subtle-dark: shade-color($success-dark, 40%) !default;
$info-border-subtle-dark: shade-color($info, 40%) !default; $info-border-subtle-dark: shade-color($info-dark, 40%) !default;
$warning-border-subtle-dark: shade-color($warning, 40%) !default; $warning-border-subtle-dark: shade-color($warning-dark, 40%) !default;
$danger-border-subtle-dark: shade-color($danger, 40%) !default; $danger-border-subtle-dark: shade-color($danger-dark, 40%) !default;
$light-border-subtle-dark: $gray-700 !default; $light-border-subtle-dark: $gray-700 !default;
$dark-border-subtle-dark: $gray-800 !default; $dark-border-subtle-dark: $gray-800 !default;
// scss-docs-end theme-border-subtle-dark-variables // scss-docs-end theme-border-subtle-dark-variables
@@ -50,7 +61,7 @@ $body-emphasis-color-dark: $white !default;
$border-color-dark: $gray-700 !default; $border-color-dark: $gray-700 !default;
$border-color-translucent-dark: rgba($white, .15) !default; $border-color-translucent-dark: rgba($white, .15) !default;
$headings-color-dark: null !default; $headings-color-dark: null !default;
$link-color-dark: tint-color($primary, 40%) !default; $link-color-dark: tint-color($primary-dark, 40%) !default;
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default; $link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
$code-color-dark: tint-color($code-color, 40%) !default; $code-color-dark: tint-color($code-color, 40%) !default;