Skip to content
GitLab
    • Explore Projects Groups Snippets
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 2 years ago
  • 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);
Compare
  • main (base)

and
  • latest version
    9d76ea64
    3 commits, 2 years ago

4 files
+ 52
- 26

    Preferences

    File browser
    Compare changes
sc‎ss‎
tests/u‎tilities‎
_api.te‎st.scss‎ +1 -0
_maps‎.scss‎ +39 -0
_root‎.scss‎ +11 -26
bootstrap‎-grid.scss‎ +1 -0
scss/tests/utilities/_api.test.scss
+ 1
- 0
  • View file @ 9d76ea64

  • Edit in single-file editor

  • Open in Web IDE


@import "../../functions";
@import "../../variables";
@import "../../variables-dark";
@import "../../maps";
@import "../../mixins";
scss/_maps.scss
+ 39
- 0
  • View file @ 9d76ea64

  • Edit in single-file editor

  • Open in Web IDE


@@ -39,6 +39,45 @@ $theme-colors-border-subtle: (
"dark": $dark-border-subtle,
) !default;
$theme-colors-text-dark: null !default;
$theme-colors-bg-subtle-dark: null !default;
$theme-colors-border-subtle-dark: null !default;
@if $enable-dark-mode {
$theme-colors-text-dark: (
"primary": $primary-text-dark,
"secondary": $secondary-text-dark,
"success": $success-text-dark,
"info": $info-text-dark,
"warning": $warning-text-dark,
"danger": $danger-text-dark,
"light": $light-text-dark,
"dark": $dark-text-dark,
) !default;
$theme-colors-bg-subtle-dark: (
"primary": $primary-bg-subtle-dark,
"secondary": $secondary-bg-subtle-dark,
"success": $success-bg-subtle-dark,
"info": $info-bg-subtle-dark,
"warning": $warning-bg-subtle-dark,
"danger": $danger-bg-subtle-dark,
"light": $light-bg-subtle-dark,
"dark": $dark-bg-subtle-dark,
) !default;
$theme-colors-border-subtle-dark: (
"primary": $primary-border-subtle-dark,
"secondary": $secondary-border-subtle-dark,
"success": $success-border-subtle-dark,
"info": $info-border-subtle-dark,
"warning": $warning-border-subtle-dark,
"danger": $danger-border-subtle-dark,
"light": $light-border-subtle-dark,
"dark": $dark-border-subtle-dark,
) !default;
}
// Utilities maps
//
// Extends the default `$theme-colors` maps to help create our utilities.
scss/_root.scss
+ 11
- 26
  • View file @ 9d76ea64

  • Edit in single-file editor

  • Open in Web IDE


@@ -153,32 +153,17 @@
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
--#{$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};
--#{$prefix}primary-bg-subtle: #{$primary-bg-subtle-dark};
--#{$prefix}secondary-bg-subtle: #{$secondary-bg-subtle-dark};
--#{$prefix}success-bg-subtle: #{$success-bg-subtle-dark};
--#{$prefix}info-bg-subtle: #{$info-bg-subtle-dark};
--#{$prefix}warning-bg-subtle: #{$warning-bg-subtle-dark};
--#{$prefix}danger-bg-subtle: #{$danger-bg-subtle-dark};
--#{$prefix}light-bg-subtle: #{$light-bg-subtle-dark};
--#{$prefix}dark-bg-subtle: #{$dark-bg-subtle-dark};
--#{$prefix}primary-border-subtle: #{$primary-border-subtle-dark};
--#{$prefix}secondary-border-subtle: #{$secondary-border-subtle-dark};
--#{$prefix}success-border-subtle: #{$success-border-subtle-dark};
--#{$prefix}info-border-subtle: #{$info-border-subtle-dark};
--#{$prefix}warning-border-subtle: #{$warning-border-subtle-dark};
--#{$prefix}danger-border-subtle: #{$danger-border-subtle-dark};
--#{$prefix}light-border-subtle: #{$light-border-subtle-dark};
--#{$prefix}dark-border-subtle: #{$dark-border-subtle-dark};
@each $color, $value in $theme-colors-text-dark {
--#{$prefix}#{$color}-text: #{$value};
}
@each $color, $value in $theme-colors-bg-subtle-dark {
--#{$prefix}#{$color}-bg-subtle: #{$value};
}
@each $color, $value in $theme-colors-border-subtle-dark {
--#{$prefix}#{$color}-border-subtle: #{$value};
}
@if $headings-color-dark != null {
--#{$prefix}heading-color: #{$headings-color-dark};
scss/bootstrap-grid.scss
+ 1
- 0
  • View file @ 9d76ea64

  • Edit in single-file editor

  • Open in Web IDE


@@ -5,6 +5,7 @@ $include-column-box-sizing: true !default;
@import "functions";
@import "variables";
@import "variables-dark";
@import "maps";
@import "mixins/lists";
0 Assignees
None
Assign to
0 Reviewers
None
Request review from
Labels
1
CLA Signed
1
CLA Signed
    Assign labels
  • Manage project labels

Milestone
No milestone
None
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
0
0 participants
Reference: facebook/create-react-app!11031
Source branch: main-jd-add-dark-maps

Menu

Explore Projects Groups Snippets