Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add theme maps specific to dark mode #37843

Merged
merged 3 commits into from
Jan 12, 2023
Merged

Add theme maps specific to dark mode #37843

merged 3 commits into from
Jan 12, 2023

Conversation

julien-deramond
Copy link
Member

@julien-deramond julien-deramond commented Jan 9, 2023

Warning
Draft idea

This PR is a draft idea

/cc @mdo

This PR tries to tackle a part of the problem we currently have with the new complexity of customizing colors in Bootstrap coming with the color modes. This is also link to the complexity that we can see in #37737 (only for the dark mode) and to this answer: #37838 (reply in thread).

On one hand we have for the light mode:

@each $color, $value in $theme-colors-text {
  --#{$prefix}#{$color}-text: #{$value};
}

On the other hande we have for the dark mode:

--#{$prefix}primary-text: #{$primary-text-dark};
--#{$prefix}secondary-text: #{$secondary-text-dark};
--#{$prefix}success-text: #{$success-text-dark};
--#{$prefix}info-text: #{$info-text-dark};
--#{$prefix}warning-text: #{$warning-text-dark};
--#{$prefix}danger-text: #{$danger-text-dark};
--#{$prefix}light-text: #{$light-text-dark};
--#{$prefix}dark-text: #{$dark-text-dark};

So this PR suggests to have an equivalent for the dark mode and so to have corresponding maps:

  • $theme-colors-text-dark
  • $theme-colors-bg-subtle-dark
  • $theme-colors-border-subtle-dark

TODO if this PR is useful:

  • Fix the issue with the unit tests
  • Something to update in the docs?

IDK if it would be helpful or not but we could create a mixin to avoid copy-pasting this system; something like:

@mixin generate($map, $map-dark) {
    @each $color, $value in $map {
        --#{$prefix}#{$color}-bg-subtle: #{$value};
    }
    @if $enable-dark-mode {
        @each $color, $value in $map-dark {
            --#{$prefix}#{$color}-bg-subtle: #{$value};
        }   
    }
}

@include generate($theme-colors-bg-subtle, $theme-colors-bg-subtle-dark);

@mdo mdo marked this pull request as ready for review January 12, 2023 04:58
@mdo mdo requested a review from a team as a code owner January 12, 2023 04:58
@mdo mdo merged commit 60714e3 into main Jan 12, 2023
@mdo mdo deleted the main-jd-add-dark-maps branch January 12, 2023 05:06
@mahilanmjd mahilanmjd mentioned this pull request Apr 16, 2023
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

2 participants