theming / Dark UI

[Roshanjossey]

Add preference to toggle to dark mode for the web app

[kantord]

Cool idea!

[kantord]

Actually, it would be nice to have whitelabel-style theming support.

The use case for that would be:

• school or government creates their own branded version
• employer with international employees or migrant workers
• NGO, etc..
• user just prefers a different theme
• and dark UI ofc :-)

Also, maybe if it's possible, dark UI could be detected on mobile devices :thinking:

[kantord]

Different free themes already exist for Bulma: https://jenil.github.io/bulmaswatch/ so maybe it should be possible to re-use them along with the custom theme we already have.

Not sure what the ideal way of implementing them would be though, using static site generation

[Roshanjossey]

I've seen a media query to check it https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

Haven't tried this though.

[kantord]

We can try this one out: https://github.com/jloh/bulma-prefers-dark

[kantord]

Although that doesn't solve the theming issue, only dark theming

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[doamatto]

Using the @media (prefers-color-scheme: dark) query, you can keep the existing stylesheet (that would be the light theme) and add inside the query the specific changes that would need to be made to adjust for dark theming.

Example:

body {
  background: #fff;
  @media (prefers-color-scheme: dark) {
    background: #000;
  }
}

Edit: I can try to get this done at some point in the near future, if you'd like some help with it.

[kantord]

@doamatto yes, that's roughly how I imagine it!

The theme is based on bulma, I wonder if they have some official support for this?

Ideally, instead of overrides, we'd use variables for this. Either build 2 versions of the CSS using SASS with different variables (this should be possible to implement using existing bulma I imagine).

Or the best version of implementation would be using CSS variables. I'm slowly working on refactoring the components and ideally it would eventually be implemented using CSS-in-JS and CSS variables, but that could take a long time.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[doamatto]

Also, maybe if it's possible, dark UI could be detected on mobile devices

With the media query (I'm not sure how else you could do it), it will detect on any browser that declares the prefered theme (between the choices of light and dark).

We can try this one out: https://github.com/jloh/bulma-prefers-dark Although that doesn't solve the theming issue, only dark theming The theme is based on bulma, I wonder if they have some official support for this?

From my quick and dirty research, it seems this may be the best course of action (although the last tagged release is pretty old; 2 years old). In other news, there is this PR for Bulma that can start to bring a dark theme to Bulma.

How's the integration of CSS-in-JS coming along?

cc: @kantord

[kantord]

Hi @doamatto ,

I just created a project where the CSS-in-JS thing can be tracked: https://github.com/kantord/LibreLingo/projects/11?add_cards_query=is%3Aopen

It doesn't (yet) have all the issues that we're going to need, because after those are going to be revising all the components in lluis and make sure that they don't depend on external CSS + that they use CSS variables. Once that's done, it should be easy to implement dark mode with CSS variables.

Sorry, right now I'm mainly focusing on making course contribution possible, so I'm personally not investing a lot of time on this. If you really care about dark mode, then you can either work on the issues in that project, or I'll alternatively also accept a PR that implements it using bulma. Just keep in mind that bulma will be eventually removed completely

[doamatto]

Hey!

I'll try to resolve some issues in my free time. I completely understand the focus on course content. In the future, I may be able to contribute to French and Japanese courses.

Cheers - Matt ^-^

[kantord]

@doamatto amazing!

I'm in the process of documenting course contribution and the last touches in tooling to make it practically viable

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[frostedkitsune]

@kantord can we keep the the current theme(the color specifically) and modify it a bit to give a more gamy, energetic look instead of completly changing the theme(as @kivutar suggets) and I want to develop it(both dark and light version, maybe a hight contrast version also). Can I join the design team?

[kantord]

@frostedkitsune we don't really have a design team (or an organized team whatsoever). Would you be interested in starting to organize some sort of design team?

[kantord]

can we keep the the current theme(the color specifically) and modify it a bit to give a more gamy, energetic look instead of completly changing the theme

I like this approach BTW, because it can be executed probably in small steps as well

[frostedkitsune]

@frostedkitsune we don't really have a design team (or an organized team whatsoever). Would you be interested in starting to organize some sort of design team?

Sure! I'm joining the matrix chatroom there we may create a group for design