1. Forum
  2. >
  3. Topic: Duolingo
  4. >
  5. Announcing the release of Duo…


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



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


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).


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


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.


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.


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


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.


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


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


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.


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.


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.


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)


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


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.


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).


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


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

  • 2838

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


Just downloaded it. Seems interesting.


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


Cool! Thank's for helping night readers!


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


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!!!


Wow, this is gorgeous.


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 :)


This looks great! Danke schön!


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.


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:)


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


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.


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/


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


@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.


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.


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


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.


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


This is great. A lot easier to read


Oh I love it! Thank you!


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


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).


Thank you very much!


I know it's old, but..

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


Today's update now has a black front page.


Das ist genial. Danke!


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.


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.


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


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)


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.


Thank you very much! It worked out!


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


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.

  • 1661

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

[deactivated user]

    Duo just got a lot sexier!


    This is rather excellent, thank you!


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


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


    Does it work at all for phones?


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


    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?


    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.


    Could you make a darkgrey version too?

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


    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


    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


    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.


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


    @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


    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.


    @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. :)


    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.


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


    This is brilliant. Thank you :D


    That app is awesome thanks


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


    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".


    Ok. Thanks a lot for your response.


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


    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


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


    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.

    • 2742

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


    You get the same affect with the twilight app.


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


    Can you take a screenshot of the problem?


    neden İngilizce acaba?


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



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


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


    1) Go here and "Add to Chrome".

    2) Go here and "Install with Stylish".


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


    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.


    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 */ }


    `body { background: #161616; }

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


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


    Is there one for Safari?


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

    [deactivated user]

      How do you get it though?


      The dark styles are very unfinished, When ur doing words the letters are white, so you don't know what you're clicking.


      This dark style project was finished a few years ago. It's now no longer maintained because Duolingo started obfuscating the site's code in a way that makes it really hard to target specific site elements because they started randomizing the names on the site's elements which completely changes with every site update. This makes it essentially impossible to reliably restyle the site and continue the project.

      If you complain to Duolingo, perhaps they may listen and there may be a chance that they'll either stop the obfuscation or provide their own native dark mode, but as it is this project is finished.

      [deactivated user]

        Where is it?


        Oh, I would love this! Unfortunately, it seems to not work anymore (at least in my attempts). Only some border colors are darkened, while the majority of the page is blasting white at me. Sad face.

        • 2742

        @Wil : There is a dark theme in the app (in the settings).


        Thanks, Levi. I'm using the Dark theme in the app (Android) and I love it! Unfortunately, that affects only the app on that particular device and the Duolingo website is still very bright white. (I use both the app and the website.) I've got my fingers crossed that they'll eventually add the option to go dark on the site as well. :-)

        Learn a language in just 5 minutes a day. For free.