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

https://www.duolingo.com/profile/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

116 Comments


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

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


https://www.duolingo.com/profile/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).


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

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


https://www.duolingo.com/profile/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.


https://www.duolingo.com/profile/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.


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

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


https://www.duolingo.com/profile/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.


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

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


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

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


https://www.duolingo.com/profile/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.


https://www.duolingo.com/profile/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.


https://www.duolingo.com/profile/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.


https://www.duolingo.com/profile/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)


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

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


https://www.duolingo.com/profile/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.


https://www.duolingo.com/profile/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).


https://www.duolingo.com/profile/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


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

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


https://www.duolingo.com/profile/raans
  • 2838

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


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

Just downloaded it. Seems interesting.


https://www.duolingo.com/profile/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


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

Cool! Thank's for helping night readers!


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

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


https://www.duolingo.com/profile/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!!!


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

Wow, this is gorgeous.


https://www.duolingo.com/profile/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 :)


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

This looks great! Danke schön!


https://www.duolingo.com/profile/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.


https://www.duolingo.com/profile/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:)


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

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


https://www.duolingo.com/profile/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.


https://www.duolingo.com/profile/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/


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

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


https://www.duolingo.com/profile/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.


https://www.duolingo.com/profile/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.


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

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


https://www.duolingo.com/profile/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.


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

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


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

This is great. A lot easier to read


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

Oh I love it! Thank you!


https://www.duolingo.com/profile/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.


https://www.duolingo.com/profile/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).


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

Thank you very much!


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

I know it's old, but..

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


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

Today's update now has a black front page.


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

Das ist genial. Danke!


https://www.duolingo.com/profile/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.


https://www.duolingo.com/profile/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.


https://www.duolingo.com/profile/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.


https://www.duolingo.com/profile/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)


https://www.duolingo.com/profile/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.


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

Thank you very much! It worked out!


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

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


https://www.duolingo.com/profile/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.


https://www.duolingo.com/profile/RPD85
  • 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!


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

    This is rather excellent, thank you!


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

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


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

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


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

    Does it work at all for phones?


    https://www.duolingo.com/profile/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.


    https://www.duolingo.com/profile/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?


    https://www.duolingo.com/profile/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.


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

    Could you make a darkgrey version too?

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


    https://www.duolingo.com/profile/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

    https://www.duolingo.com/profile/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


    https://www.duolingo.com/profile/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.


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

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


    https://www.duolingo.com/profile/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


    https://www.duolingo.com/profile/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.


    https://www.duolingo.com/profile/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. :)


    https://www.duolingo.com/profile/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.


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

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


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

    This is brilliant. Thank you :D


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

    That app is awesome thanks


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

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


    https://www.duolingo.com/profile/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".


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

    Ok. Thanks a lot for your response.


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

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


    https://www.duolingo.com/profile/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


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

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


    https://www.duolingo.com/profile/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.


    https://www.duolingo.com/profile/Levi
    • 2742

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


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

    You get the same affect with the twilight app.


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

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


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

    Can you take a screenshot of the problem?


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

    neden İngilizce acaba?


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

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


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

    Yes.

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


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

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


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

    1) Go here and "Add to Chrome".

    2) Go here and "Install with Stylish".


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

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


    https://www.duolingo.com/profile/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.


    https://www.duolingo.com/profile/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; }`


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

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


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

    Is there one for Safari?


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

    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?


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

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


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

      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?


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

        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.


        https://www.duolingo.com/profile/Levi
        • 2742

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


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

        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.