mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-28 23:59:53 +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

49
scss/_variables-dark.scss
View File

@@ -7,35 +7,46 @@
//
// 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
$primary-text-emphasis-dark: tint-color($primary, 40%) !default;
$secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
$success-text-emphasis-dark: tint-color($success, 40%) !default;
$info-text-emphasis-dark: tint-color($info, 40%) !default;
$warning-text-emphasis-dark: tint-color($warning, 40%) !default;
$danger-text-emphasis-dark: tint-color($danger, 40%) !default;
$primary-text-emphasis-dark: tint-color($primary-dark, 40%) !default;
$secondary-text-emphasis-dark: tint-color($secondary-dark, 40%) !default;
$success-text-emphasis-dark: tint-color($success-dark, 40%) !default;
$info-text-emphasis-dark: tint-color($info-dark, 40%) !default;
$warning-text-emphasis-dark: tint-color($warning-dark, 40%) !default;
$danger-text-emphasis-dark: tint-color($danger-dark, 40%) !default;
$light-text-emphasis-dark: $gray-100 !default;
$dark-text-emphasis-dark: $gray-300 !default;
// scss-docs-end theme-text-dark-variables
// scss-docs-start theme-bg-subtle-dark-variables
$primary-bg-subtle-dark: shade-color($primary, 80%) !default;
$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
$success-bg-subtle-dark: shade-color($success, 80%) !default;
$info-bg-subtle-dark: shade-color($info, 80%) !default;
$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
$primary-bg-subtle-dark: shade-color($primary-dark, 80%) !default;
$secondary-bg-subtle-dark: shade-color($secondary-dark, 80%) !default;
$success-bg-subtle-dark: shade-color($success-dark, 80%) !default;
$info-bg-subtle-dark: shade-color($info-dark, 80%) !default;
$warning-bg-subtle-dark: shade-color($warning-dark, 80%) !default;
$danger-bg-subtle-dark: shade-color($danger-dark, 80%) !default;
$light-bg-subtle-dark: $gray-800 !default;
$dark-bg-subtle-dark: mix($gray-800, $black) !default;
// scss-docs-end theme-bg-subtle-dark-variables
// scss-docs-start theme-border-subtle-dark-variables
$primary-border-subtle-dark: shade-color($primary, 40%) !default;
$secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
$success-border-subtle-dark: shade-color($success, 40%) !default;
$info-border-subtle-dark: shade-color($info, 40%) !default;
$warning-border-subtle-dark: shade-color($warning, 40%) !default;
$danger-border-subtle-dark: shade-color($danger, 40%) !default;
$primary-border-subtle-dark: shade-color($primary-dark, 40%) !default;
$secondary-border-subtle-dark: shade-color($secondary-dark, 40%) !default;
$success-border-subtle-dark: shade-color($success-dark, 40%) !default;
$info-border-subtle-dark: shade-color($info-dark, 40%) !default;
$warning-border-subtle-dark: shade-color($warning-dark, 40%) !default;
$danger-border-subtle-dark: shade-color($danger-dark, 40%) !default;
$light-border-subtle-dark: $gray-700 !default;
$dark-border-subtle-dark: $gray-800 !default;
// 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-translucent-dark: rgba($white, .15) !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;
$code-color-dark: tint-color($code-color, 40%) !default;