search

ColorlibHQ / AdminLTE

AdminLTE - Free admin dashboard template based on Bootstrap 5
https://adminlte.io
MIT License
43.9k stars 18.17k forks source link

[BUG] Bootstrap 5.3 Shadow is being over-written by LTE variables #4951

Open burdittw opened 1 year ago

burdittw commented 1 year ago

Describe the bug With the new Bootstrap 5.3 themes, the shadows need to adjust based on dark or light theme. In Bootstrap 5.3 they do, and in dark mode there is light grayish color for the shadow. In the current v4-dev code set, this is not so. The color is black and not noticeable in dark theme. The issue is that in the _bootstrap-variables.scss file there are variables that modify the box-shadow values. These values are being used instead of the Bootstrap 5.3 values and breaking the shadow affect.

To Reproduce Steps to reproduce the behavior:

  1. Go to a div container and add the class .shadow.
  2. Load page and switch to dark theme.
  3. No observe it in the browser and you will see that it is black on a dark background.

Expected behavior The expected behavior is that the .shadow class will produce the correct color shadow to the applied element like it does in Bootstrap 5.3. The expected result can be seen on the Bootstrap 5.3 documentation.

Screenshots If you look at the sidebar menu's shadow it is black in dark mode. If you use the F12 Dev tool in the browser and uncheck the .shadow css that AdminLTE adds it will turn grayish like it should.

Environment (please complete the following information):

Additional context I am pretty sure that this is an artifact of the transition to Bootstrap 5.3 and either was overlooked or is a bad choice of color for shadow on dark theme. I am going to guess that this section of code needs to be removed or tweaked to have a light and dark theme version of the desired shadow.

Lines 553 to 558 in _bootstrap-variables.scss file // scss-docs-start box-shadow-variables $box-shadow: 0 .5rem 1rem rgba($black, .15) !default; $box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default; $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default; $box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default; // scss-docs-end box-shadow-variables

danny007in commented 1 year ago

its bug in bootstrap v5.3.0-alpha1

burdittw commented 1 year ago

I am not sure that is true because if I remove that CSS from the code and remove the references to it and just use Bootstrap it works just fine. I could be missing something, but it seems to be that section of CSS that is causing the issue as it is assigning it to black no matter what, so the dark theme has no chance of getting a lighter white/gray color instead.

burdittw commented 1 year ago

@danny007in Bootstrap has been update to "bootstrap": "^5.3.0-alpha2". This fixes the scroll bars for one thing and various other fixes. Not sure if this will resolve this issue or not.

burdittw commented 1 year ago

I just dug into the CSS for alpha2 and added alpha2 to my custom code of v4-dev and the shadow is the same. On the light theme you can see the shadow but with the dark theme, like the profile picture you can see it if look really hard. So, is this a design issue with the profile picture and something that should be fixed in AdminLTE or just write it off as an issue with Bootstrap and wait for enough people to make it an issue and hopefully get revisited?