diff --git a/scss/_root.scss b/scss/_root.scss index 40a2883d1f..a6728b0fe2 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -147,6 +147,8 @@ --#{$prefix}gray-tweak: #{$gray-900}; --#{$prefix}input-filter: #{$invert-filter}; --#{$prefix}icon-filter: none; + --#{$prefix}select-indicator: #{$form-select-indicator}; + --#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator}; // ******* End additions for dark-mode } @@ -226,6 +228,8 @@ --#{$prefix}gray-tweak: #{$gray-700}; --#{$prefix}input-filter: none; --#{$prefix}icon-filter: #{$invert-filter}; + --#{$prefix}select-indicator: #{$form-select-indicator-dark}; + --#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator-dark}; // ******* End additions for dark-mode // scss-docs-end root-dark-mode-vars } diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss index 22a7eeea31..d498ca8cce 100644 --- a/scss/_variables-dark.scss +++ b/scss/_variables-dark.scss @@ -99,7 +99,9 @@ $focus-visible-outer-color-dark: $white !default; // Boosted mod // // Boosted mod: no $form-select-indicator-color-dark -// Boosted mod: no $form-select-indicator-dark + +$form-select-indicator-dark: escape-svg(url("data:image/svg+xml,")) !default; +$form-select-disabled-indicator-dark: escape-svg(url("data:image/svg+xml,")) !default; // Boosted mod // Boosted mod: no $form-switch-color-dark // Boosted mod: no $form-switch-bg-image-dark diff --git a/scss/_variables.scss b/scss/_variables.scss index 973ce7d7fc..21fac58ab7 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1270,13 +1270,13 @@ $form-select-font-weight: $input-font-weight !default; $form-select-line-height: $input-line-height !default; $form-select-color: $input-color !default; $form-select-bg: $input-bg !default; -$form-select-disabled-color: $gray-700 !default; +$form-select-disabled-color: $input-disabled-color !default; // Boosted mod: instead of `null` $form-select-disabled-bg: $input-disabled-bg !default; $form-select-disabled-border-color: $input-disabled-border-color !default; $form-select-bg-position: right $form-select-padding-x top add(50%, 1px) !default; $form-select-bg-size: .875rem 1rem !default; // In pixels because image dimensions -$form-select-indicator: url("data:image/svg+xml,") !default; -$form-select-disabled-indicator: url("data:image/svg+xml,") !default; // Boosted mod +$form-select-indicator: escape-svg(url("data:image/svg+xml,")) !default; +$form-select-disabled-indicator: escape-svg(url("data:image/svg+xml,")) !default; // Boosted mod $form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default; $form-select-feedback-icon-position: center right $form-select-indicator-padding !default; diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss index 3b4483f54a..7c715cfffa 100644 --- a/scss/forms/_form-select.scss +++ b/scss/forms/_form-select.scss @@ -4,7 +4,7 @@ // https://primer.github.io/. .form-select { - --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)}; + --#{$prefix}form-select-bg-img: var(--#{$prefix}select-indicator); display: block; width: 100%; @@ -45,7 +45,7 @@ &:disabled { color: $form-select-disabled-color; background-color: $form-select-disabled-bg; - background-image: escape-svg($form-select-disabled-indicator); // Boosted mod + background-image: var(--#{$prefix}select-disabled-indicator); // Boosted mod border-color: $form-select-disabled-border-color; } diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md index 0faf554a3f..38125156a3 100644 --- a/site/content/docs/5.3/dark-mode.md +++ b/site/content/docs/5.3/dark-mode.md @@ -2301,3 +2301,90 @@ sitemap_exclude: true + +### Select + +

No theme

+ +
+ + +
+ +

Dark theme on container

+ +
+ + +
+ +

Light theme on container

+ +
+ + +
+ +

Dark theme on component

+ +
+ + +
+ +

Light theme on component

+ +
+ + +