jgthms / bulma

Modern CSS framework based on Flexbox
https://bulma.io
MIT License
49.41k stars 3.95k forks source link

Proposal: Shadows in Dark Theme don't work. #3886

Open gobijan opened 3 months ago

gobijan commented 3 months ago

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma 1.0.2

Description

The shadow design for cards and boxes etc. doesn't look good in Dark Mode CleanShot 2024-08-29 at 14 33 53

In order to keep the high visual quality of the framework we should adjust this behaviour by providing a different dark mode default. See here for examples of efficient Dark Mode Design: https://medium.com/@tundehercules/designing-effective-dark-mode-interfaces-17f38ecea2e9

CleanShot 2024-08-29 at 14 33 38

In case this get's accepted I will create a PR

gobijan commented 3 months ago

This works for me as a sane default.

/* Dark mode styles */
[data-theme="dark"] .box,
.theme-dark .box {
  --bulma-box-shadow: none;
}

/* Alternative using media query for system preference */
@media (prefers-color-scheme: dark) {
  .box {
    --bulma-box-shadow: none;
  }
}