https://www.duolingo.com/profile/iFail

Duolingo true dark, unofficial dark theme

Last version (April 13th): 3.0.X. Still working on updates to make everything well balanced and to cover everything better.

"Colorful main page" "Colorful exercise page" "Dark version of the site"

Option 1: Chromium browsers

Available in the Chrome Webstore.

Version without Google maps api.

.

Option 2: Firefox

Not supported anymore for now

.

Option 3: For other browsers, you can get the base script on Github - there's no guarantee that it will work on other browsers.

.

Option 4: Stylus/Stylish version is not yet available, will be available soon


General information:

  • Last version: 2.3.6 (For the non-stylus versions you can view the version number in the bottom of the brightness menu - you can open the brightness menu by hovering over the cog icon in the top-right corner of the screen)

  • There are sliders to adjust the brightness according to your preferences. There's an option for dynamic brightness, which slowly lowers the brightness during the period between sunset and dusk. The settings don't transfer to the forum or stories parts of the website. Which essentially is fixable but I'm going to leave it as it is, you can set these separately however you like.

How to adjust the brightness:

  • The settings menu to adjust the brightness is in the far top right of the screen. Hover over the cog icon and a menu will pop-up (to close it, just move your mouse away).

  • To enable the dynamic brightness option based on the position of the sun you need to:

a) Enable the "dynamic day-night brightness" checkbox

b) Enter your coordinates (you can find these using Google Maps - go to anywhere near where you live, right click, click on "what's here" - in the bottom it will display coordinates that look like this "40.003217, -102.051783", enter these in the 2 input boxes [it has to be as a number, not in degrees])

c) make sure you've set a desired nighttime brightness


If you encounter any bugs / unreadable elements or have some suggestions for changes, please let me know. I know some people with eye issues were having trouble to read parts of the Duolingo website, if you let me know what would fix it for you, I might add an option for it.


Mobile

Also supports the mobile version of the website, which might be useful for smartphone and tablet users who want a dark version on their device. Requires a mobile browser that supports browser extensions.


I'll likely add an option for custom colors and other customization somewhere in the future.

April 2, 2019

68 Comments


https://www.duolingo.com/profile/iFail

General tip for people with eyesight problems: you can use ctrl + scrolling to increase the viewing size of a web page. This works quite well for Duolingo up to 150%-200%.

April 2, 2019

https://www.duolingo.com/profile/Songve

Also, use the contrast/light controls to make it darker.

April 2, 2019

https://www.duolingo.com/profile/French.DuoLingo.

The dark theme is actually really good for mobile, especially for Android users, because much of the pixels on screen don't have to generate colour, resulting in prolonged battery life.

Thank you for sharing this!

April 2, 2019

https://www.duolingo.com/profile/FranM2

Only on AMOLED screens though and it has to be pure black, dark grey and white consume the same amount of power.

April 2, 2019

https://www.duolingo.com/profile/MusicalTarrasque

Most screens use the same amount of power for, black and all other colors.

April 2, 2019

https://www.duolingo.com/profile/Songve

My eye problems do not have a problem with current version but this is good to know if I ever need it. Thanks for all your work to assemble this.

April 2, 2019

https://www.duolingo.com/profile/TheLord2k1

Thank you!

April 2, 2019

https://www.duolingo.com/profile/Maughanster_

Thank you so much for this elvper! I used one of your previous dark modes until updates made it unusable and it was amazing.

April 2, 2019

https://www.duolingo.com/profile/compsognathus

Oooh so that's how you do it! Awesome! Thank you so much for sharing! :)

April 2, 2019

https://www.duolingo.com/profile/DragonPolyglot

My night-eyes thank you.

April 2, 2019

https://www.duolingo.com/profile/iFail

Wanna know what I've been working on today?

"Picture of a customizable theme for Duolingo"

(I still need to create a menu for it / add it to the existing menu - which is the most annoying part xD)

ETA: sunday

April 5, 2019

https://www.duolingo.com/profile/iFail

Will take a bit longer, decided to immediately do a rewrite instead of first adding the colors and then rewriting it.

April 8, 2019

https://www.duolingo.com/profile/iFail

https://player.vimeo.com/video/329691225

Beta version will probably be out by friday :)

Edit: a bit more balancing to do (a lot of extra css selectors and tuning), other than that the color changing is fully functional.

April 10, 2019

https://www.duolingo.com/profile/Satyameva123

That is Great! Thank you.

April 11, 2019

https://www.duolingo.com/profile/Sophiafilm

It looks amazing!

April 11, 2019

https://www.duolingo.com/profile/MusicalTarrasque

You can also turn on inverted colors or inverted grayscale in the "color filters" settings on Windows Ten.

It makes everything look cool and on a mostly white website it makes it mostly darker.

April 2, 2019

https://www.duolingo.com/profile/Fey-J

Thank you! This will prove invaluable to my overall health (specifically the eyes)

April 3, 2019

https://www.duolingo.com/profile/iFail

Wanted to wait a bit till I covered everything well, but I've decided to already publish the new version with color choices as the live version. Only Chrome for now, but Firefox should follow very soon.

Demo (not meant to be pretty, just show off :P):

"Duolingo frontpage with changed colors"

April 13, 2019

https://www.duolingo.com/profile/EriksRa

The new version is asking me for maps.googleapis.com permission. (I found a version in Github without that)

Otherwise the extension is great, been using it for a while, I don't even need the settings, I just like the dark.

April 13, 2019

https://www.duolingo.com/profile/iFail

I've created a version without the google maps api:

https://chrome.google.com/webstore/detail/jkbnfbdgpklpiclihgdinciiddjgbhhj

April 13, 2019

https://www.duolingo.com/profile/EriksRa

Thanks and a very solid explanation, I like how lightweight the extension is already

April 13, 2019

https://www.duolingo.com/profile/iFail

It's still in the verification process of Google, since it's a seperate (new) posting, it can take a bit longer than usual before it gets approved. Once it has been approved, the link should work :). (I have checked just now and it hasn't been approved - yet).

April 13, 2019

https://www.duolingo.com/profile/iFail

The link works now :)

April 13, 2019

https://www.duolingo.com/profile/iFail

The google maps api is to pick a location for dynamic day/night brightness. If you don't click the "Open Google maps to pick a location" button in the popup menu, then no code from Google is loaded.

If you look at the code, the functon f.googlemaps() is run when the button is clicked, and only then js from Google maps api is loaded.

f.googlemaps = function(){

var gmapsscript = document.createElement("script");

gmapsscript.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyCDehCVbzJ7oF6YSmN8_aZHZmEtKAzxtXY";

document.head.appendChild(gmapsscript);

gmaps.load();

};

The location picker doesn't send any data to anybody, the location you pick (optional) is stored locally in your browser. And in case that's still something you might be scared of: you can pick a location within quite a wide radius and still have accurate dynamic day/night brightness. It also doesn't at all automatically locate you or anything, it just loads a default map that is set to cover the US. Whenever you click that map it uses that location for dynamic day/night brightness.

I understand your concerns since it's not immediately obvious what exactly it does, but there's really nothing to worry about (not that you should ever just take anybodies word for such a thing).

April 13, 2019

https://www.duolingo.com/profile/Satyameva123

Beautiful!

April 13, 2019

https://www.duolingo.com/profile/iFail

xD if you want beautiful, this one would be a better example:

"space colors background"

Space theme :P. But too much blue to be good for the eyes :P

April 13, 2019

https://www.duolingo.com/profile/C_R_A_Z-Y1273

Can you activate and deactivate it at will?

April 2, 2019

https://www.duolingo.com/profile/iFail

There's no option for that yet, you'd have to enable and disable the extension. I'll add this option in the next version.

April 3, 2019

https://www.duolingo.com/profile/Satyameva123

I love it. Thank you!

April 3, 2019

https://www.duolingo.com/profile/Hariku09

This is great, but the pure black is almost as bad as pure white. Most websites that have a dark theme use a coal gray which I think you should as well.

April 4, 2019

https://www.duolingo.com/profile/iFail

Thank you very much for the feedback. Personally I dislike lighter backgrounds as they equal an overall increase in brightness, thus it's nice to hear what the preferences of others are since I can't read minds. You're the 2nd to make that comment and it's very useful, now I know that an alternative lighter option is important.

The same counts for anybody else reading this, if you don't let me know what it is that need / like / want, it ain't going to just magically appear :P.

April 4, 2019

https://www.duolingo.com/profile/Myrrael

You're the 2nd to make that comment

Really? I count four so far ;)

April 4, 2019

https://www.duolingo.com/profile/iFail

*at the moment I wrote that * :P

April 4, 2019

https://www.duolingo.com/profile/Myrrael

I stand corrected XD!

April 4, 2019

https://www.duolingo.com/profile/hanna.sch

thank you so much

April 4, 2019

https://www.duolingo.com/profile/SecretlyAHippo

Just so you know, elvper, this is great. I've been wanting something like this. I don't have eyesight problems, but I still think this looks so much better. However, I do have a (maybe I'll find more) suggestion.

If you encounter any bugs / unreadable elements or have some suggestions for changes, please let me know.

For the golden owl (without the scarf, but on the new update), the text for the message is kind of weird. It's dark grey with black font, and it's hard to read. Just a suggestion, but I could see that being more readable.

I'll likely add an option for custom colors and other customization somewhere in the future.

I look forward to it. Until next update!

April 2, 2019

https://www.duolingo.com/profile/iFail

Thank you very much. I'll fix the golden owl text, there are indeed still a few things here and there that I haven't converted yet. If you find some, especially very important ones, do tell :). Suggestions of any type are also always welcome.

It might take a bit of time before customs colors are a thing, depending on how easy it will be to balance it. Code wise it shouldn't be a problem.

April 2, 2019

https://www.duolingo.com/profile/SecretlyAHippo

Cool. Thanks for the help. This really is a great product... I'll let you know if I find anything else.

April 2, 2019

https://www.duolingo.com/profile/Myrrael

Firefox user here. There is no off button?

Also, which version of Duolingo does it work with? I'm using FieryCat's script ( found here https://forum.duolingo.com/comment/31465576 ) to access the old design and it seems to have some issues.

Looks good, though! Bit too dark for me. I'd go for more grey-ish than the black. It's a bit too black for me, personally.

April 2, 2019

https://www.duolingo.com/profile/iFail

It's made for the new version of Duolingo. Customization options should come somewhere into the future. An off button is also planned :), one to disable all customization as well as options to just enable/disable some specific things. For example, somebody could want the original styles of the site with just things like brightness options.

April 2, 2019

https://www.duolingo.com/profile/Myrrael

Thank you. I'll keep an eye on it and jump in when the script no longer works ♥

April 2, 2019

https://www.duolingo.com/profile/Myrrael

I have something weird. On refresh of a forum page, the top of the screen doesn't always load the black background but instead goes for the Duo default.

April 4, 2019

https://www.duolingo.com/profile/iFail

I'll check it out thanks.

April 4, 2019

https://www.duolingo.com/profile/Myrrael

Thank you.

April 4, 2019

https://www.duolingo.com/profile/Myrrael

Looks good now :)

April 5, 2019

https://www.duolingo.com/profile/iFail

I didn't particularly do anything against such a type of issue. I've also had it happen a few times on rare occasions while working on the code, but don't know what causes it as it's difficult to immediately see whether I just broke something in the code or if it's a bug. I do have a suspicion of what it might potentially be (edit: tried a potential cause, it's not it). A screenshot could help :). How often does it happen?

April 7, 2019

https://www.duolingo.com/profile/Myrrael

Never done this before and can't find a good guide.

https://imgur.com/a/ddjBdnR#kGN2OL2

Well, the link works, but unsure how to embed, apologies.

It now happens on every session. It also looks like the white default loads over the black in the area a page is viewing. It's normal under that. Though short posts only have half of this.

April 7, 2019

https://www.duolingo.com/profile/iFail

I think your issue could potentially be fixed as I did apply some changes to the bg selectors. Note that issues can also be caused by having other extension active for duolingo that also apply styling chanes.

April 13, 2019

https://www.duolingo.com/profile/Myrrael

@elvper Latests version has no issue :) Thank you for all of your hard work.

April 16, 2019

https://www.duolingo.com/profile/Myrrael

Spoke too soon, it's doing the same again.

April 6, 2019

https://www.duolingo.com/profile/iFail

Great to hear, hope it stays well.

I'll soon do another update to cover some more forgotten elements.

April 16, 2019

https://www.duolingo.com/profile/Andavro

You are a GOD

April 3, 2019

https://www.duolingo.com/profile/Nana344213

Love! True black is awesome! You're the best!

April 4, 2019

https://www.duolingo.com/profile/masoome.fazeli

I am just wondering why we would have to choose between a super bright theme and a completely dark one only. :-?

April 10, 2019

https://www.duolingo.com/profile/iFail

Customization is coming soon. I've finished the menu for it (might change it later on):

April 10, 2019

https://www.duolingo.com/profile/CeoDruidechta

Thanks! I have migraines, and this is definitely easier for me to look at.

April 17, 2019

https://www.duolingo.com/profile/Kelikaku

@elvper
Here is my solution.
Good topic. Keep up
the good work.

בס״ד

July 3, 2019

https://www.duolingo.com/profile/iFail

Looks nice, thank you.

But since the last update(s) many things aren't working anymore, sadly I won't be able to update anything short term.

July 3, 2019

https://www.duolingo.com/profile/JovanVazqu2

Nice

April 3, 2019

https://www.duolingo.com/profile/krishnabhakta

Just a question what colour is duo

May 13, 2019

https://www.duolingo.com/profile/iFail

Pink. Bit weird to ask, but green.

May 13, 2019
Learn a language in just 5 minutes a day. For free.