search

openSUSE / chameleon

openSUSE Design System for Web
https://static.opensuse.org/chameleon/
GNU General Public License v3.0
13 stars 10 forks source link

Chameleon 4.0 #36

Open guoyunhe opened 3 years ago

guoyunhe commented 3 years ago

We will solve the dark/light mode issue in a better way.

In Chameleon 3.0, we compile dark and light mode in a single CSS. It brought some issues that make site adoption hard:

  1. You cannot disable dark mode. We have sites like shop.opensuse.org and progress.opensuse.org that don't support dark mode and we don't have enough resource to hack the code.
  2. You cannot manually switch dark/light mode.
  3. The dark mode doesn't look as perfect as the light mode. Only a few components have dark mode optimization.

In Chameleon 4.0, this will be changed. We will compile two different CSS: chameleon-dark.css and chameleon-light.css.

  1. You can disable dark mode by choosing which CSS to link in your HTML.
  2. You can manually switch dark/light mode by toggling CSS URL on server side (PHP/Ruby/Python) or client side (JavaScript).
  3. The dark mode will look more comfortable if we use only variables for theming, instead of override CSS.

Bootstrap 5 will add official support for dark/light mode. However, it won't come soon.

Some other improvements:

  1. Migrate build tools to webpack
  2. Upgarde to Bootstrap 5, and remove jQuery dependency
  3. Add RTL support

CC @hellcp

hellcp commented 1 year ago

So Bootstrap 5 is around and we may want to switch some of our web apps to it, would it be possible to create a theme for it?