Contrib.social

Bootstrap Barrio Sass overriding css unnecessarily and in a bad way

Open on Drupal.org →
Created on 6 October 2023, over 1 year ago
Updated 3 January 2024, over 1 year ago

In bootstrap 5.x you have some thing like so in _reset.scss

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

This approach has certain benefits, including support for dark mode and theme switching

However I also notice in style.scss we have 

body {
    background: $white;
}

There are a couple of issues I can see with this:

1. This has already been define in bootstrap. e.g. --bs-body-bg or --#{$prefix}body-bg). No need to reinvent the wheel here.
2. If we want to override body's background color we should probably do so changing the $body-bg in _variables.scss.

Personally I think it would better to set all colours using a css variable, but might have to wait for bootstrap 6 for that.

e.g. atm in _root.scss we have something like this:


  @if $enable-dark-mode {
     @include color-mode(dark, true) {
        color-scheme: dark;
        --#{$prefix}body-bg: #{$body-bg-dark};

My feeling is this could be simplified by simply overriding e.g.

  @if $enable-dark-mode {
     @include color-mode(dark, true) {
        color-scheme: dark;
        --#{$prefix}body-bg: black;

But maybe there is issue with using css variables and media queries, not sure.

🐛 Bug report
Status

Needs review

Version

5.0

Component

Code

Created by

🇬🇧United Kingdom 2dareis2do

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024