Skip to content

Chameleon 4.0 #36

@guoyunhe

Description

@guoyunhe

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

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions