corbado/javascript

Make sure that dark mode works as expected

Closed this issue · 2 comments

incorbador commented

Why

During integration into our dev panel @Aby-JS noticed that our dark mode setting does not behave as expected when combined with style customizations (i.e. a custom theme). Expected behaviour is:

  • when darkMode = 'on': only the custom classes affecting dark mode should take effect. If a user specifies only classes that affect light mode, nothing should about styling should change and default dark mode should be used
  • when darkMode = 'off': only the custom classes affecting light mode should take effect
  • when darkMode = 'auto': depending on the browser setting theme customizations should take effect

TODOS

Here you must list all the TODOS using TODO checkboxes (markdown).

  • Check if we can prove the points from above by using one of our example applications (they already have custom themes and darkMode => if we can prove this out of the box we don't even have to write and code here and it's enough to document the findings in this ticket
  • If the current examples can not be used to prove the points above either modify them (preferred approach) or use one of the playground applications instead
Aby-JS commented

Cause: This error is related to CSS class specificity.
Links for Github issues reporting this: Vite Issue and Nuxt + Vite Issue
Fix: can be fixed by increasing the specificity of the custom class like with body.corbado-auth

Note: This is related to Vite v3 which is being used by developer panel and since we are using Vite v5 in our WebJS demo we did not faced this issue there.

Aby-JS commented

Fact: In a usual scenario, the stylings for dark mode and light mode are similar except for colors.
Solution: We have made sure to introduce a bulk of CSS variables which can be overwritten for dark mode and light mode in our customer's CSS themes. The approach for that will be to write stylings for .customers-custom-theme which will apply for both light mode and dark mode. And then for dark mode specific stylings the customer/developer can just use a more specific selector like .cb-dark.customers-custom-theme. This will work.