https://www.duolingo.com/lieryan

Announcing the release of Duolingo Dark Theme version 2

Turn off the lights and install a dark theme for Duolingo. This is a complete rewrite of Duolingo Dark to match Duolingo's new look and feel.

If you have been using the old version of Duolingo Dark with Stylish for Firefox or Stylish for Chrome then you can simply update to get the new style.

Download link: Duolingo Dark 2 and Duolingo Dark 2 (customizable). Complete installation instruction below.

You can follow this discussion page for update notification.

Currently there is no support for the Incubator.

Feedbacks are welcome!

May be useful for:

  1. Reducing eye strain when studying in a dark room
  2. Lovers of the dark color schemes
  3. Certain display technology uses less power with dark screen

Installation instruction:

  1. Install Stylish for Firefox or Stylish for Chrome. Stylish is a Firefox/Chrome addon that lets you customize the look and feel of any websites by writing or installing a user style
  2. Go to Duolingo Dark 2 and Duolingo Dark 2 (customizable) and click "Install with Stylish"

To temporarily disable the user style:

In Firefox, if you want to switch styles frequently, make sure the "Addon bar" is enabled (View > Toolbars > Addon Bar), now the Stylish button should be displayed in the Addon bar (usually bottom left, but like everything else in Firefox this can be customized). Alternatively, you can go to Tools > Addons > User Styles. You can enable, disable, edit, update, set automatic update, or delete individual user styles here.

In Chrome, the Stylish button is to the right of the address bar. Alternatively, you can manage your user styles by going to Menu (the three horizontal lines) > Tools > Extensions > Options under the Stylish entry. You can enable, disable, edit, update, or delete individual user styles in here.

Hacking and customization:

Get the source code from Github. Suggestions, bug fixes, and forks are welcome!

A small teaser:

Duolingo Dark

February 15, 2014

107 Comments


https://www.duolingo.com/Usagiboy7

Woo O.O Very handsome. Once I try it out though, how do I get back to DL's official version?

February 16, 2014

https://www.duolingo.com/Seth_H

Are you on Chrome? If so, on the top-left corner of your browser window, click on the stylish extension icon, and then under the heading Duolingo Dark 2 click right under it where it says "disable". Alternatively you click the little button next to your web address bar that says when you mouse over it "Customize and control Google Chrome", hover over tools, and then click on extensions. From there you can click in the little check box next to stylish that says Enabled, and that will disable stylish and the Duolingo Dark Skin 2 (along with in other skins you have installed under stylish).

February 16, 2014

https://www.duolingo.com/lieryan

Good question, I've added the answer to your question to the original post.

February 16, 2014

https://www.duolingo.com/Ontalor

I actually love this screen. I normally do Duolingo late at night so watching a bunch of bright screens at that time isn't the best. This is a very sleek version of the site. I think I'm gonna use this from now on.

February 15, 2014

https://www.duolingo.com/matson

obviously, there is a need for a different Duo theme. Can the Duo developers just provide a link to "click here for our dark CSS"? Seems easy, since you can look at the CSS code.

February 17, 2014

https://www.duolingo.com/endios

Really cool. Shame we don't have one for Incubator, or - for that matter - course editors. Some contributors spend hours there.

February 16, 2014

https://www.duolingo.com/lieryan

I would have made it work in the Incubator if I were a course editor, unfortunately I am not a course contributor at the moment.

February 20, 2014

https://www.duolingo.com/Andro0

wow.. i am now a proud user of this. thanks!!

February 16, 2014

https://www.duolingo.com/SpaceMichael

I was just thinking that the new duolingo deseign was waay to white and bright for me. Thanks!

February 17, 2014

https://www.duolingo.com/Godoflais

I was practicing German on my iPhone last night, and when i got to the 3rd lesson my eyes began to burn, I had to rest for like two minutes with eyes closed. I consider this type of efforts are important to keep learning no matter the place or time. Thx so much for your contribution and let's hope this is considered for implementation on all the versions.

February 17, 2014

https://www.duolingo.com/lieryan

Hi all, Duolingo Dark 2 (Customizable) has been released and Duolingo Dark 2 has been updated with various fixes. If you use Stylish for Firefox or Chrome, you can go to the style settings page to Check for update; if you want to switch to the customizable version, you should disable the regular version.

February 23, 2014

https://www.duolingo.com/lieryan

Hi all, there is a new major release of Duolingo Dark 2 just released to userstyles.org. This update comes with style for words list page, front login page, and many other minor fixes on other pages.

If you are updating, just use the usual stylish's check update instruction for each browser.

September 25, 2014

https://www.duolingo.com/Usagiboy7

Hi lieryan, thanks for the update! The DuoDark scripts are very appreciated by those of us with sensitive eyes! (I can't wait to have my own compy back so I can use it again. right now I am staring at a wall of blinding white with squiggly black font peeking out of it xP)

September 25, 2014

https://www.duolingo.com/lieryan

Hi all! Duolingo Dark 2 is now on Github. Suggestions, bug fixes, and forks are welcome!

December 11, 2014

https://www.duolingo.com/rocko2012

I like it. The only thing I can see I would like to customize and I'm not sure if it would even be possible in the customizable version is the progress bar during practice. It starts out as a big white block. I think it could just be blacked out and then just go green as you progress.

February 15, 2014

https://www.duolingo.com/lieryan

The customizable version will be coming in probably next week. However I've now turned the progress bar to dark. If you check for update now you will get the dark progress bar (as well as various other tweaks I've made in the last hour).

February 15, 2014

https://www.duolingo.com/rocko2012

Sweet thanks.

February 15, 2014

https://www.duolingo.com/pont

Thanks! I just installed it, and it looks great. I find dark themes easier on the eyes so I'm grateful for this.

Another advantage for those of us who study late in the evening: using a bright computer screen shortly before going to bed can cause insomnia, and reducing the brightness can help to avoid this. See http://www.webmd.com/sleep-disorders/news/20030620/nighttime-computer-users-may-lose-sleep

February 15, 2014

https://www.duolingo.com/SyxHyTex

Here's a software solution for your bedtime computer screen problem: http://justgetflux.com/

February 15, 2014

https://www.duolingo.com/raans
  • 2000

I can really recommend this. I'm using it for several months now.

February 16, 2014

https://www.duolingo.com/Samsta

Just downloaded it. Seems interesting.

February 15, 2014

https://www.duolingo.com/FrenchAddict7

Sadly, I can't download it because I have a chromebook. But for those with chromebooks and other devices that can't run f.lux there is an app on the chromestore called g.lux

February 16, 2014

https://www.duolingo.com/Kalquimarke

Cool! Thank's for helping night readers!

February 16, 2014

https://www.duolingo.com/NicolletAve

I just installed it and I really like it. Thanks!

February 18, 2014

https://www.duolingo.com/FrenchAddict7

It is beautiful and great! Last night, I was up until about 11:30 p.m. practicing on Duolingo, and I couldn't go to sleep afterwards. This theme is easier on the eyes, and, like pont said, it will not lead to sleep disorders like bright screens. Thanks so much!!!

February 16, 2014

https://www.duolingo.com/Jsprwstr

Wow, this is gorgeous.

February 15, 2014

https://www.duolingo.com/DutchDuoL

Thanks a lot for this! It looks relatively ok still but mostly it's awesome for nighttime learning. Keep up the good work! You just solved a problem I didn't know there was a solution for :)

February 15, 2014

https://www.duolingo.com/lamyrtilleverte

This looks great! Danke schön!

February 16, 2014

https://www.duolingo.com/Heather_Watkins

Thank you so, so much. All that bright white and pale grey was really hurting my eyes. I tried to use Windows XP's high contrast settings, but that made all the icons invisible. This is a huge relief.

February 16, 2014

https://www.duolingo.com/Noe010101

I have been waiting for this since the site update :) Now I will return to my daily routine;)
The style is excellent (though I will customize it when possible later on, maybe) , I'm very grateful, I appreciate this very much:) Have some lingots from me:)

February 16, 2014

https://www.duolingo.com/Harley.J.Quin

Love this, and love that I am in the example screenshot.

February 16, 2014

https://www.duolingo.com/buunny

Thanks. I don't usually go on the computer in the dark, but I have very sensitive eyes and am prone to migraines and bright backgrounds don't always help those things.

February 17, 2014

https://www.duolingo.com/Topolski

I love it, it makes Duolingo much easier, especially aloong with Flux. However, I have one complaint, and that's it: the amount of upvotes you have in Immersion is completely invisible (it's black text against a black background, so you have to highlight it with your cursor). See: http://postimg.org/image/6ek29srsr/b586d7de/ and http://postimg.org/image/x7yyyp26b/f237b80c/

February 17, 2014

https://www.duolingo.com/Khaur

Still in Immersion, the translation level of the last editor is black on black as well.

February 18, 2014

https://www.duolingo.com/lieryan

@Topolski, @Khaur: Thanks for the reports; these have now been fixed, you can check for update to obtain the fix. Please do report any issues you notice.

February 19, 2014

https://www.duolingo.com/Khaur

The advice that pops-up when you make a mistake that is recognized by the system is sometimes over what you've written. With the default theme it's possible to see through it, but not with the dark theme.

February 21, 2014

https://www.duolingo.com/lieryan

@Khaur: can you post a screenshot of which part you're referring to?

February 23, 2014

https://www.duolingo.com/Khaur

This got broken again by an update it would seem: Imgur

Also the mouseovers in the Words tab are hard to read.

Lastly code formatting is giving me trouble herelight grey on yellow background, but not everywhere.

September 22, 2014

https://www.duolingo.com/lieryan

Thanks for the feedback! These issues is now fixed in today's update.

September 25, 2014

https://www.duolingo.com/jurekcy1

This is great. A lot easier to read

February 17, 2014

https://www.duolingo.com/ZeTook

Oh I love it! Thank you!

February 17, 2014

https://www.duolingo.com/Eriklover555

There is now a white band surrounding the bonus skill level of the tree ^^ May need to update the CSS to account for it.

March 5, 2014

https://www.duolingo.com/lieryan

The white band is now fixed. The plus icon has gone obscured by the dark background though, will fix that tomorrow (it's 3am here now).

March 6, 2014

https://www.duolingo.com/Eriklover555

Thank you very much!

March 6, 2014

https://www.duolingo.com/4of92000

I know it's old, but..

Could you do a 2.1 to fix the new front page?

July 26, 2014

https://www.duolingo.com/lieryan

Today's update now has a black front page.

September 25, 2014

https://www.duolingo.com/jalnt

Das ist genial. Danke!

July 29, 2014

https://www.duolingo.com/sssheridan

When installing:

Add "Stylish"? It can: Access your data on all websites Access your tabs and browsing activity

Nooo thanks. I understand that it's probably safe, but I'm just not going to risk it. There's no way to just have an option on the website? Seems simple enough.

August 9, 2014

https://www.duolingo.com/lieryan

If you're not comfortable with installing the Stylish addon, you can do this entirely with standard browser feature by modifying userContent.css in Firefox.

Stylish only makes creating, installing, and updating user stylesheet much easier and provides integration with userstyles.org website.

August 10, 2014

https://www.duolingo.com/Jamthom8

I'd like to suggest that you add the class ".bg-white" to the list that gets "background-color: #000000;". It feels incomplete otherwise.

August 11, 2015

https://www.duolingo.com/Zyberg

I love this! However, it's not quite working for me and I can't find where the problem lies... I am using firefox and the box with the couch isn't becoming black! It stays white. Surely, it's not a huge problem, but doesn't make me want to use black theme all that much... Will try to inspect this error myself, however, a help from you would be great! (Here's what I see: http://i65.tinypic.com/ao6fcx.png)

December 27, 2015

https://www.duolingo.com/Jamthom8

On line 37 you will see ".lingot-bill {". Change this to ".lingot-bill, .bg-white {".

The box should now be black.

I assume that you have figured out how to edit the code. If not I can type up some instructions for that. I am also assuming that you have not altered any of the code. If you have, then the line number may be different to 37.

December 28, 2015

https://www.duolingo.com/Zyberg

Thank you very much! It worked out!

December 28, 2015

https://www.duolingo.com/Coolpandaaurine

After couple of minutes, my eyes were hurting a lot. I am looking forward to see an eye friendly theme

October 19, 2016

https://www.duolingo.com/Andrealphus

Duo just got a lot sexier!

February 15, 2014

https://www.duolingo.com/Secret_Dartmoore

OKAY... Tone it down.

February 13, 2016

https://www.duolingo.com/JosephineDaniels

This is rather excellent, thank you!

February 15, 2014

https://www.duolingo.com/SongbirdSandra

This is awesome ! Merci mon ami. Lingots pour toi ! :-)

February 16, 2014

https://www.duolingo.com/Eriklover555

¡Muchas gracias, mi amigo! I really like the change, it fits the rest of my laptop's aesthetics, now.

February 16, 2014

https://www.duolingo.com/Arya.Stark

Does it work at all for phones?

February 16, 2014

https://www.duolingo.com/lieryan

As long as the browser supports Stylish, then it should work. There is Stylish for Firefox Mobile for Android and for the Dolphin browser.

February 16, 2014

https://www.duolingo.com/EugeniaAT

I love it!

February 16, 2014

https://www.duolingo.com/jkazor

Before the recent "upgrade" made Duolingo so difficult to read, I used to use if on my iPad. Is, or will this new color scheme work with the iPad/iPhone apps?

February 17, 2014

https://www.duolingo.com/lieryan

The theme would not work on the mobile app. The stylesheet itself would have worked for the website when opened in a mobile browser, but doing applying a user style in Mobile Safari is a bit tricky.

The Stylish addon is fully supported in Firefox Mobile for Android, and Duolingo Dark 2 works very well there. It does not work on the native app.

February 17, 2014

https://www.duolingo.com/Hvalfisk

Could you make a darkgrey version too?

Like this https://i.imgur.com/BPIICKG.png

June 5, 2014

https://www.duolingo.com/lieryan

The customizable version on userstyles.org allows you to easily change the colors of the backgrounds. In particular, these two settings will be of interest to you:

  • Page Background Color
  • Content Background Color
June 14, 2014

https://www.duolingo.com/Usagiboy7

Hi Lieryan, I hope you don't mind, but I added a link to this discussion to the Duolingo wiki (unofficial) http://duolingo.wikia.com/wiki/Accessibility_Options#Alternative_color_scheme

June 18, 2014

https://www.duolingo.com/lieryan

That's awesome, thank you for including it in the Wikia. Would you mind if I update the gallery screenshot, specifically the immersion page screenshot? I have released an update just now that would fix the styling of the immersion header that looks to be incorrectly styled in the screenshot (as well as a few other fixes).

EDIT: ok, that didn't go very well; I tried changing the screenshot but that causes the gallery slider to go missing. I had reverted the edit to the good revision for now.

June 19, 2014

https://www.duolingo.com/Usagiboy7

@lieryan, I could give it a shot if you'd like to link me to the image.

June 19, 2014

https://www.duolingo.com/lieryan

Thanks, can you try with this one http://i.imgur.com/DGNWjIH.png?

June 19, 2014

https://www.duolingo.com/Usagiboy7

@lieryan, I updated the pic yesterday. Can you see if the one I put in there will work? It has the most updated look and a picture of the "Immersion" tab selected. http://duolingo.wikia.com/wiki/Accessibility_Options

June 19, 2014

https://www.duolingo.com/lieryan

Hmm, that's odd, that isn't the latest version. The latest version that is in userstyles.org should have a black header in immersion. Did you update the style yesterday? If not, don't worry about it then, it's not really a big issue. Thanks for working on the Wikia.

June 20, 2014

https://www.duolingo.com/Usagiboy7

@lieryan, I had just updated the pic.

However, I just went back to double check today. Here is inside of a specific article: http://i.imgur.com/L1ikeSX.png

Here is inside of Immersion main menus: http://i.imgur.com/fP62otQ.png

Looks like my script was lagging for some reason. I'll go make a new update to the wiki. It's no problem at all. ^_^

UPDATE: Image replaced with latest update. :)

June 24, 2014

https://www.duolingo.com/S0R0USH

Hello, is there a way to change the top banner colour from blue to black as well? You know, where it says Duolingo, home , activity, discussion... username .. etc.

June 19, 2014

https://www.duolingo.com/4of92000

Could you remove the redundant review button after the end of practice? Thanks.

September 27, 2014

https://www.duolingo.com/kebabkerry

This is brilliant. Thank you :D

December 4, 2014

https://www.duolingo.com/JacobVA

That app is awesome thanks

December 21, 2015

https://www.duolingo.com/angel.lorenzo

Excuse me. Why is necessary to download both things: Duolingo Dark 2 and Duolingo Dark 2 (customizable)? What's the purpose?

January 8, 2016

https://www.duolingo.com/Jamthom8

It is not necessary to install both. In fact you probably wouldn't want to. The "customizable" one is just more easily customizable than the one without "customizable".

January 8, 2016

https://www.duolingo.com/angel.lorenzo

Ok. Thanks a lot for your response.

January 8, 2016

https://www.duolingo.com/Knoxienne

Wow, this looks neat... I may just do it. :)

January 8, 2016

https://www.duolingo.com/aryabferduzi

I think we should be able to buy fancy themes (like floral theme, or rainy, park, forest etc.; or maybe an endorsed one like Disney theme, Spongebob, Marvel) with lingots. Who's with me? :D

January 27, 2016

https://www.duolingo.com/lieryan

Hi Duolingo Dark 2 users, the latest Duolingo website update have made it impossible for me to continue working on this userstyle because Duolingo is obfuscating their HTML pages, which will make maintaining a reliable userstyle effectively impossible. Please help me bring this issue to Duolingo's attention by upvoting, following, and sharing a petition to revert HTML obfuscation that I have created, so I can continue working on this theme.

June 16, 2017

https://www.duolingo.com/RPD85

Can the HTML obfuscation be the reason why the skill tree and practice window remain white even after installation of the Dark Theme?

August 3, 2017

https://www.duolingo.com/tweetypie67

One question,this won't mess with other websites right?And it doesn't cause viruses or cookies right?

February 15, 2014

https://www.duolingo.com/lieryan

No, it would not mess with other websites. A Stylish user style is applied only on the domain name specified in the user style. In the case of Duolingo Dark 2 the domain name must match www.duolingo.com.

A Stylish userstyle is a CSS file. A CSS file is not an executable file. A CSS file can load external images from another domain and that domain may set cookies; currently Duolingo Dark 2 does not use any images, however this might change in the future as some of Duolingo's icons does not look best with a dark color scheme. You can check out the source code of a user style before installing by clicking on the "Show CSS" link on userstyles.org.

Stylish for Firefox and Stylish for Chrome are popular open source browser addons written by Jason Barnabe; userstyles.org is the accompaniment website for the addon and is the primary distribution channel for Stylish user styles. Their source code can be found on Github. A browser addon contains executable script and may create security holes. I do not write Stylish, so I would not comment on the security aspect of installing the addon. You will have to evaluate the security impact of installing Stylish by yourself.

February 16, 2014

https://www.duolingo.com/Levi
  • 1911

@tweetypie67 : This is specifically for DL. No viruses or other interference, of course - don't worry.

February 16, 2014

https://www.duolingo.com/Repelsteeltje

You get the same affect with the twilight app.

January 10, 2016

https://www.duolingo.com/CalebHu

PS it doesnt work on the progress bar anymore. Fix?

January 10, 2016

https://www.duolingo.com/Jamthom8

Can you take a screenshot of the problem?

January 11, 2016

https://www.duolingo.com/dilaraa41

neden İngilizce acaba?

January 18, 2016

https://www.duolingo.com/gesteur

Can it be use with the "tampermonkey" addon that add the language's flag?

January 24, 2016

https://www.duolingo.com/Jamthom8

Yes.

If you encounter any issues then post a screenshot here and we shall fix it for you.

January 25, 2016

https://www.duolingo.com/gesteur

Thanks, but what I have to do to it works?

January 25, 2016

https://www.duolingo.com/Jamthom8

1) Go here and "Add to Chrome".

2) Go here and "Install with Stylish".

January 26, 2016

https://www.duolingo.com/gesteur

I know this, I want to make it work in the same time that Tampermonkey, to have dark theme and the land flag behind

January 26, 2016

https://www.duolingo.com/Jamthom8

EDIT: For anyone else wanting to do this, see the other comment for a better solution.


I'm not super familiar with that extension but try deleting

/* disable background image */ body { background: #161616 /* GRP: grpbg1 REP: #161616 */ !important; /* #e9e9e9 */ }

from lines 2 to 5.

January 26, 2016

https://www.duolingo.com/Jamthom8

So I have just installed the userscript you are talking about to check it out and I think I have a better solution. Replace

body { background: #161616 /* GRP: grpbg1 REP: #161616 */ !important; /* #e9e9e9 */ }

with

`body { background: #161616; }

.nav-footer li a { color: white !important; }`

January 26, 2016

https://www.duolingo.com/gesteur

Just P.E.R.F.E.C.T Thanks a lot !

January 26, 2016

https://www.duolingo.com/King-Sun

wow

July 30, 2016

https://www.duolingo.com/foaduolingo

Is there one for Safari?

March 16, 2019

https://www.duolingo.com/Trace715221

I think this theme is broken now. Is anyone still available to do some troubleshooting for possible updates?

March 23, 2019
Learn a language in just 5 minutes a day. For free.