Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !37843

Add theme maps specific to dark mode

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Julien Déramond requested to merge main-jd-add-dark-maps into main Jan 09, 2023
  • Overview 1
  • Commits 3
  • Pipelines 0
  • Changes 4

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 https://github.com/twbs/bootstrap/pull/37737 (only for the dark mode) and to this answer: https://github.com/twbs/bootstrap/discussions/37838#discussioncomment-4631730.

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);
Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: main-jd-add-dark-maps