[SOLVED] Website Dark/Night Mode?

65 posts / 0 new
Super Member
<a href="/en/translator/nyaasar" class="userpopupinfo" rel="user1443391">nyaasar <div class="author_icon" title="Page author" ></div></a>
Joined: 10.01.2020
Pending moderation

Is there any plan for making dark mode or night mode for this website?

It would be great if there is an option to make this website looks darker. 

Save the eyes.  8-)

 

Moderator Polyglot Scot
<a href="/en/translator/dionysius" class="userpopupinfo" rel="user1182697">dionysius <div class="moderator_icon" title="Moderator" ></div></a>
Joined: 26.07.2013

I use a plugin for my browser called Dark Reader. It works well on this site (and doesn't invert the photos which is an issue I see with a lot of plugins!).

Master
<a href="/en/translator/blacksea4ever" class="userpopupinfo" rel="user1390089">BlackSea4ever </a>
Joined: 19.07.2018

Could you please explain how to do it? I use iPad and this white background is killing me.

Super Member
<a href="/en/translator/nyaasar" class="userpopupinfo" rel="user1443391">nyaasar <div class="author_icon" title="Page author" ></div></a>
Joined: 10.01.2020

I'm pretty sure that Dark Reader is an extension for web browser.
So, yeah. That's not an option for me.

Super Member
<a href="/en/translator/nyaasar" class="userpopupinfo" rel="user1443391">nyaasar <div class="author_icon" title="Page author" ></div></a>
Joined: 10.01.2020

Well, that might help.

But, what I meant is something more universal(?) so that mobile phone user could use it.
(Or maybe there is some app that can be used for that purpose?)

Moderator
<a href="/en/translator/altermetax" class="userpopupinfo" rel="user1360194">altermetax <div class="moderator_icon" title="Modérateur" ></div></a>
Joined: 04.11.2017

I've made a custom dark mode for LyricsTranslate, which does a couple of things other than just inverting the colors. To get it on a PC running a Chrome-based browser, or Firefox, install the Stylus extension (Chrome | Firefox), then go here and add it.

If you're on an Android mobile device, you need a browser that supports extensions, such as the Kiwi Browser. Then you can just follow the guide for PC (with the Chrome extension) using that browser.

Unfortunately I don't know of any iOS browser that allows for Chrome or Firefox extensions, so I'm guessing it's impossible to support it there. It seems Apple imposes their own format for extensions, so it's against the App Store terms and conditions to publish an app that allows for extensions (unless they're in Apple's format). On iOS, Firefox isn't even allowed to use their own rendering engine — in other words, all browsers on iOS are pretty much just reskinned Safari's.

Master
<a href="/en/translator/blacksea4ever" class="userpopupinfo" rel="user1390089">BlackSea4ever </a>
Joined: 19.07.2018

Me not understand a word. Моя твоя не понимай... Lol. I have safari on iPad - so can I get the dark mode?

Moderator
<a href="/en/translator/altermetax" class="userpopupinfo" rel="user1360194">altermetax <div class="moderator_icon" title="Modérateur" ></div></a>
Joined: 04.11.2017
BlackSea4ever schreef:

Me not understand a word. Моя твоя не понимай... Lol. I have safari on iPad - so can I get the dark mode?

Unfortunately not, as far as I know — it's only possible for PC and Android users. But I might be wrong, since I have no Apple device to test. Try and search for "Stylus" or "Stylish" among the Safari extensions (which I think should be in the app store). If there is one, install it, then you can get the dark mode from here. Otherwise I don't know what else you can do.
If the admins make a dark mode included in the website itself, then it will work for Safari on iOS of course.

Moderator 👨🏻‍🏫🇧🇷✍🏻👨🏻
<a href="/en/translator/don-juan" class="userpopupinfo" rel="user1110108">Don Juan <div class="moderator_icon" title="Συντονιστής" ></div></a>
Joined: 05.04.2012

Admins were officially informed about your suggestions.

Super Member
<a href="/en/translator/nyaasar" class="userpopupinfo" rel="user1443391">nyaasar <div class="author_icon" title="Page author" ></div></a>
Joined: 10.01.2020

Yes, this is exactly like what I wanted (I wish I could show it in this comment (another suggestion?)). I still prefer simpler way to use it, though.
(Like something you can toggle on/off from the website (toggle button next to the language option would be best(?)) without installing other plugins.)

I really appreciate that you made this Stylus code, that's really fast. Thanks. :D

Moderator
<a href="/en/translator/altermetax" class="userpopupinfo" rel="user1360194">altermetax <div class="moderator_icon" title="Modérateur" ></div></a>
Joined: 04.11.2017
nyaasar schreef:

I still prefer simpler way to use it, though.

(Like something you can toggle on/off from the website (toggle button next to the language option would be best(?))

Yeah, me too, that can only happen if the LT developers themselves make it.

Master
<a href="/en/translator/blacksea4ever" class="userpopupinfo" rel="user1390089">BlackSea4ever </a>
Joined: 19.07.2018

Mattia is a superman

Moderator
<a href="/en/translator/altermetax" class="userpopupinfo" rel="user1360194">altermetax <div class="moderator_icon" title="Modérateur" ></div></a>
Joined: 04.11.2017
BlackSea4ever schreef:

Mattia is a superman

So did you manage to get it to work on iPad?

Master
<a href="/en/translator/blacksea4ever" class="userpopupinfo" rel="user1390089">BlackSea4ever </a>
Joined: 19.07.2018

No, I am midst an important go-live at work. I just come to LT to exercise my brain so I can keep up with our developers, the local supermen... I also can't install anything on this iPad - no space. I have a nice, shiny new toy iPad since Christmas, but didn't even open it yet... 6-8 more weeks of hell and then vacation!!! Lol. Hopefully.

Guest
Guest

That's the best suggestion ever.
I always wanted to start this thread myself, but was distracted as usual. IMHO, LT should do it [since it is much easier than lets say annotations and/or idioms blocks], and any 3rd party plugins aren't effective, especially if we always skedaddle from one device to another.
EDIT: Dark Reader is a blessing too, thanks dionysius!

Master True-to-original translations.
<a href="/en/translator/michaelna" class="userpopupinfo" rel="user1257575">MichaelNa </a>
Joined: 29.08.2015
BlackSea4ever schreef:

Me not understand a word. Моя твоя не понимай... Lol. I have safari on iPad - so can I get the dark mode?

You can adjust the brightness on the iPad by going to Settings>Display & Brightness. Depending on the model you have, you can put a check mark on "Dark" and/or modify the brightness by sliding the button provided.

Master
<a href="/en/translator/blacksea4ever" class="userpopupinfo" rel="user1390089">BlackSea4ever </a>
Joined: 19.07.2018

Thanks.
I already use this to somewhat grey the background. This setting greys everything - I like looking at photos and paintings and it ruins the experience. But when I translate or read, I do make it greyer.
If we could control this for LT, it would be nice to pick the background color. I do understand there is the dev cost and it is a nice-to-have not a must-have.

Guest
Guest

On iOS you can get Firefox for Mobile and then enable night mode works perfect for me

Banned User
<a href="/en/translator/igeethecat" class="userpopupinfo" rel="user1365086">Igeethecat </a>
Joined: 16.12.2017

Try Night Shift on iOS

Administrator
<a href="/en/translator/lt" class="userpopupinfo" rel="user1">LT </a>
Joined: 27.05.2008
nyaasar schreef:

It would be great if there is an option to make this website looks darker. 

Now it is possible to use a dark theme. The switch is on the right in the footer. Thanks for the suggestion!

Master
<a href="/en/translator/blacksea4ever" class="userpopupinfo" rel="user1390089">BlackSea4ever </a>
Joined: 19.07.2018

Sounds great! I don’t see it.

Administrator
<a href="/en/translator/lt" class="userpopupinfo" rel="user1">LT </a>
Joined: 27.05.2008

Sorry, there was an error in permissions. Now the option should be available to all registered users.

Master
<a href="/en/translator/blacksea4ever" class="userpopupinfo" rel="user1390089">BlackSea4ever </a>
Joined: 19.07.2018

Yes, thanks. Dark as the night. 💁🏼

Banned User
<a href="/en/translator/%D0%BE%D0%BB%D0%B5%D0%B3-%D0%BB" class="userpopupinfo" rel="user1330079">Олег Л. </a>
Joined: 03.03.2017

Videos in my collections don't work when a dark theme is on.

Super Member 𝙅𝙮𝙪𝙩𝙤 𝘿𝙚𝙫𝙤𝙩𝙚𝙚
<a href="/en/translator/kyucat" class="userpopupinfo" rel="user1445312">kyucat </a>
Joined: 31.01.2020

Looks great! Though textboxes still appear as white unless selected. Is that intended?

Super Member 𝙅𝙮𝙪𝙩𝙤 𝘿𝙚𝙫𝙤𝙩𝙚𝙚
<a href="/en/translator/kyucat" class="userpopupinfo" rel="user1445312">kyucat </a>
Joined: 31.01.2020

Ah, also, for translations marked as "proofreading requested" the background becomes white and the text isn't readable besides the line being hovered over ^^

Guest
Guest

Light>>>Dark it's much better, I didn't even know about anything like that.

Thanks  *heart*

Super Member
<a href="/en/translator/nyaasar" class="userpopupinfo" rel="user1443391">nyaasar <div class="author_icon" title="Page author" ></div></a>
Joined: 10.01.2020

Finally! \(≧▽≦)/
That's amazing! Thank you so much.

Expert
<a href="/en/translator/zkpy47" class="userpopupinfo" rel="user1432560">ZKPY_47 </a>
Joined: 05.09.2019

Is it possible to also add strings for "Theme", "Light", and "Dark" for the interface translation? Or is that not intended to be translated?

Moderator 👨🏻‍🏫🇧🇷✍🏻👨🏻
<a href="/en/translator/don-juan" class="userpopupinfo" rel="user1110108">Don Juan <div class="moderator_icon" title="Συντονιστής" ></div></a>
Joined: 05.04.2012

Wow, I really liked this new interface! I sure will have to get used to it :P

Master
<a href="/en/translator/ritvank" class="userpopupinfo" rel="user1331869">ritvank </a>
Joined: 17.03.2017

The dark theme is really beautiful. But I think there is a small problem with the proofreading request. The text on the right is almost unreadable. I hope administrators will see it and deal with the issue soon.

Guest
Guest

AT LAST. YAAAAAAAAY!!!!

Master
<a href="/en/translator/ritvank" class="userpopupinfo" rel="user1331869">ritvank </a>
Joined: 17.03.2017

Many thanks!

Moderator ¡Café-dependiente ☕! | 🇻🇪
<a href="/en/translator/enjovher" class="userpopupinfo" rel="user1219642">Enjovher <div class="moderator_icon" title="Moderatore" ></div></a>
Joined: 09.09.2014

In the "revisions" button for the modified lyrics and translations, when you press the "compare" button, the background and the unmodified lyrics appear in white and it is impossible to read both texts (only you can read the modified lyrics that appears in red).

Moderator 👨🏻‍🏫🇧🇷✍🏻👨🏻
<a href="/en/translator/don-juan" class="userpopupinfo" rel="user1110108">Don Juan <div class="moderator_icon" title="Συντονιστής" ></div></a>
Joined: 05.04.2012

I don't know if it happened with other users, but after I closed a window with LT open and reopened it, the theme was changed back to 'Light'. Maybe there could be a message showing up saying something like 'Do you want to set (x) as your default theme?'.

Guest
Guest

That's a nice option, thanks

Super Member 𝙅𝙮𝙪𝙩𝙤 𝘿𝙚𝙫𝙤𝙩𝙚𝙚
<a href="/en/translator/kyucat" class="userpopupinfo" rel="user1445312">kyucat </a>
Joined: 31.01.2020

The new proofreading background looks really nice in dark mode now, thank you ^^ A minor nitpick - the translator's signature under the translation (not the translator's comment, but the one that appears under every translation) shows up really dark and almost blends into the background, so it's a bit hard to read (example).

Super Member 𝙅𝙮𝙪𝙩𝙤 𝘿𝙚𝙫𝙤𝙩𝙚𝙚
<a href="/en/translator/kyucat" class="userpopupinfo" rel="user1445312">kyucat </a>
Joined: 31.01.2020

The same thing happens in the site feed with the title of a forum a new thread is posted to ^^ (example)
Also, the popup for the votes made on a translation (example)
And the header for translation/transcription requests opened by a user (example)

Administrator
<a href="/en/translator/lt" class="userpopupinfo" rel="user1">LT </a>
Joined: 27.05.2008
Олег Л. schreef:

Videos in my collections don't work when a dark theme is on.

fixed

kyucat schreef:

Ah, also, for translations marked as "proofreading requested" the background becomes white and the text isn't readable besides the line being hovered over ^^

fixed

Alma Barroca schreef:

after I closed a window with LT open and reopened it, the theme was changed back to 'Light'.

fixed. The next time you switch the theme, your choice will become permanent.

kyucat schreef:

the translator's signature under the translation shows up really dark and almost blends into the background.

fixed

Other fixes on the way, thanks to everyone!

Super Member 𝙅𝙮𝙪𝙩𝙤 𝘿𝙚𝙫𝙤𝙩𝙚𝙚
<a href="/en/translator/kyucat" class="userpopupinfo" rel="user1445312">kyucat </a>
Joined: 31.01.2020

Thank you so much for your hard work!! It looks amazing :​)

Super Member 𝙅𝙮𝙪𝙩𝙤 𝘿𝙚𝙫𝙤𝙩𝙚𝙚
<a href="/en/translator/kyucat" class="userpopupinfo" rel="user1445312">kyucat </a>
Joined: 31.01.2020

Aa not sure if it's been raised already but just in case: the highlighted entries on the site requests pages (https://lyricstranslate.com/en/requests, https://lyricstranslate.com/en/transrequests) are also a bit hard to read, like this

Banned User
<a href="/en/translator/%D0%BE%D0%BB%D0%B5%D0%B3-%D0%BB" class="userpopupinfo" rel="user1330079">Олег Л. </a>
Joined: 03.03.2017

I can't switch on a dark theme.

Master
<a href="/en/translator/blacksea4ever" class="userpopupinfo" rel="user1390089">BlackSea4ever </a>
Joined: 19.07.2018

It looks like it was temporarily disabled until few issues are worked out. As we say in the business: details, details. 😏
It was done super fast so we must be patient.

Administrator
<a href="/en/translator/lt" class="userpopupinfo" rel="user1">LT </a>
Joined: 27.05.2008

Everything is fixed. Thanks!

Super Member
<a href="/en/translator/nyaasar" class="userpopupinfo" rel="user1443391">nyaasar <div class="author_icon" title="Page author" ></div></a>
Joined: 10.01.2020

Found one, the footnote background.

Edit:
Now it's perfect.

Moderator ¡Café-dependiente ☕! | 🇻🇪
<a href="/en/translator/enjovher" class="userpopupinfo" rel="user1219642">Enjovher <div class="moderator_icon" title="Moderatore" ></div></a>
Joined: 09.09.2014

When someone posts a forum, the title "Report a problem, ask a question" can hardly be read in the activity site panel. Although I don't know if it happens with the other forums.

https://imgur.com/RO89Mef

Moderator
<a href="/en/translator/altermetax" class="userpopupinfo" rel="user1360194">altermetax <div class="moderator_icon" title="Modérateur" ></div></a>
Joined: 04.11.2017

Text is dark and hard to read in Likes, Notifications, Thanks pages, and also in lists of threads in forum sections and in the buttons at the end of the "translations visibility" page: https://imgur.com/a/dxRhIwr

Moderator 👨🏻‍🏫🇧🇷✍🏻👨🏻
<a href="/en/translator/don-juan" class="userpopupinfo" rel="user1110108">Don Juan <div class="moderator_icon" title="Συντονιστής" ></div></a>
Joined: 05.04.2012

Most fields in 'View annotation as webpage' are almost unreadable
https://imgur.com/a/1i7Wuac
https://lyricstranslate.com/en/annotation/1029 - for instance

Administrator
<a href="/en/translator/lt" class="userpopupinfo" rel="user1">LT </a>
Joined: 27.05.2008

[@altermetax], [@Alma Barroca]
all fixed, thanks

Guest
Guest

I don't know if it happened with others, but I couldn't switch after I chose dark, but when I cleared my browsing data then I could switch either in windows or android
And the background of footnotes get white when I press on them

Master True-to-original translations.
<a href="/en/translator/michaelna" class="userpopupinfo" rel="user1257575">MichaelNa </a>
Joined: 29.08.2015

Curious enough, the Light/Dark mode works OK with Safari on an older iPad (iOS 10.3.3) but not on a new one (iOS 13.3.1).

Pages