Add night theme

[Kyuuu]

Is your feature request related to a problem? Please describe.
I like to work at night. It would be nice to give my eyes some rest and be able to switch between day and night mode at any time.

Describe the solution you'd like
Possibility to switch between these modes.

Describe alternatives you've considered
//

Additional context
//

[Kyuuu]

Day/Night mode switcher position proposal:

[tomasbranda]

+1
I agree. I have to decrease my brightness to the lowest level but even that isn't good. Much better would be a dark theme that you could enable right in the Weblate without any extension.

[nijel]

Not yet, nobody contributed it so far.

[comradekingu]

@Kyuuu If you aren't using custom CSS, or a plugin to do it. Isn't just the next website going to look too bright?
Having every page implement this, even if they all did it the same way, is not a good solution. Android went through this problem with apps and solved it with a system setting https://developer.android.com/guide/topics/ui/look-and-feel/darktheme

[SethFalco]

Just want to note the existence of the prefers-color-scheme feature of CSS to check the user's system preference on light/dark mode.

The prefers-color-scheme CSS media feature is used to detect if the user has requested the system use a light or dark color theme.
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

When/if this gets implemented, it would be nice if Weblate can default to the system theme if not explicitly set in Weblate itself.

[HcgRandon]

Would love to see this. So my users don't have to have bleeding eyes, nor stop being the night owls they are..

[eUgEntOptIc44]

Hi everyone 👋,

I just generated a dark mode CSS stylesheet for weblate using the Dark Reader browser extension.

I haven't dealt with weblate's source code so far. So unfortunately I have no knowledge considering the JavaScript used.

But generally speaking I'd solve the integration of the light/dark mode switch using either a server-side variable stored with the user's profile information or client-side using preferable local storage or cookies.

Please see the attached CSS file. Please note that the file extension is .txt instead of .css as for unkown reasons the upload of the latter is blocked by GitHub.

📎DarkReader-weblate-dark-mode.css

Regards,

Jean-Luc

[eUgEntOptIc44]

The generation of high contrast or sepia colored themes using the Dark Reader browser extension would be possible as well. So this might improve the accessibility of weblate in general.

[eUgEntOptIc44]

I would be very grateful if @nijel could look into this any time soon.

Btw just wanted to express my gratitude for maintaining weblate. It's a awesome piece of software.

[nijel]

Thanks for sharing the CSS, unfortunately full integration is not that easy.

• The dark mode CSS needs to be updated when doing other CSS changes. Ideally, this would be automated, otherwise it will be forgotten.
• The CSS change does not cover some icons in the UI making them really low contrast:

[yarons]

Switching to SVG/Font based icons instead of images is fairly simple and there's also a way to invert the colors of an image with CSS.

Regarding inverting colors:
https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert

Regarding SVG/Fonts (There are many open source projects such as Feather, etc.), there are some equivalent icons:
Font Awesome: link-simple, crown, lock, eye, etc.
There are some in the other projects but these are quite different than what is already used.

The simplest approach is to create root element in CSS for the dark/light mode and switch when necessary.

I created an example here:
https://github.com/Maagan-Michael/dud-design

Thanks :)

[SethFalco]

The CSS change does not cover some icons in the UI making them really low contrast

I haven't checked the code, but I would assume those icons are SVGs.
If you just change the fill attribute to the value currentColor (supported in all major browsers) it'll inherit the color (font color), from there it'll be easy to override between themes.

Should be an easy fix for the icons, and is not a hack. (This is how things like FontAwesome achieve setting the color of their icons through CSS.)

[nijel]

Yes, using fill is probably the way to go. We already use that for coloring SVGs (and all icons are SVGs). It was just a statement that CSS in #2969 (comment) does not cover this.

[rex2630]

Any update on this? That white mode is killing me :/

[nijel]

Draft PR for this is available at #9361

What is missing is user configuration, and I'm hesitating here whether to make it in user settings and for all devices, or store it in the browser and have it per device.

[Kyuuu]

Draft PR for this is available at #9361

What is missing is user configuration, and I'm hesitating here whether to make it in user settings and for all devices, or store it in the browser and have it per device.

Thank you for working on this issue!
I would love to have it for all devices in the same time. So user settings for me and I think others will be the same since if someone likes having things dark it will be the same with all apps everywhere

[poVoq]

IMHO this should not be stored anywhere but be left to the browser preference setting.

[nijel]

The browser preference works already in the PR. Most sites allow you to configure this as well. Or is it no longer useful these days?