A dark background on the website
Hi,
I am not sure how doable it is, but a dark background as well as the present one would be very handy.
Best.
28 Comments
If you used Firefox or Chrome, I've written a dark theme for Duolingo (basic dark version http://userstyles.org/styles/90721/duolingo-dark or customizable version http://userstyles.org/styles/90750/duolingo-dark-customizable) which can be used with the Stylish addon (Firefox: https://addons.mozilla.org/en-US/firefox/addon/stylish/ Chrome: https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en). Stylish is a Firefox/Chrome addon that lets you customize the look and feel of any websites by writing a user CSS, if you've heard/used about Greasemonkey/Tampermonkey then Stylish is very similar except that it's for CSS.
The current version supports all the important pages (Skill Tree, Lessons, Immersions, Discussions, Vocab List, Profile Page, Settings Page,). This is an initial release, so expect some bugs. Feedbacks are welcome.
Hi all, if you have been using Duolingo Dark, please update to Duolingo Dark 2 to get the latest version for the redesigned Duolingo. More details on: https://www.duolingo.com/comment/1853274
2011
@lieryan : Installed. So far so good! I hope you will have the time to keep it updated. Appreciate the effort, thanks!
- 2011
@lieryan @Mallowigi : Which one of you is willing to make their style not so black, as in a bit more gray-ish, perhaps a dark gray. Also, tweak the colors for the space when users get answers right or wrong. Perhaps both of you - thanks in advance!
EDIT: Nevermind, I just realized that you don't need to replace the green / red with gray for the correct / not correct answers. Also now I understand what you mean by "green/red colour that I know looks good on black background".
@Levi: I've added a customizable version of my style that can be customized using the "Style Settings" feature of userstyles.org: http://userstyles.org/styles/90750/duolingo-dark-customizable. You can set it to a greyer background (or even fancier colours if you'd like :)
I'm also in the process of reorganizing the code to make editing the code easier for people that knows or wants to learn CSS. Yeah, I know the colour used for the answer space is a bit ugly, but I'm no graphic designer and the only green/red colour that I know looks good on black background are neon red/neon green which is too bright for a dark style. I'll keep tweaking those colours, but let me know if you can find a good colour match.
That's super! You can fiddle with text & background colors till you get a pleasant combo. It would get even better if all text could change color - Anyhow, thank you very much!
I have just updated Duolingo Dark and Duolingo Dark (customizable) on userstyles.
The new style is now even more customizable, most (or all?) text that I can find on Duo has been categorized into 4 levels of colors (original Duo theme uses lots of slightly differing shades of gray, so I've grouped many very close-valued colors into those 4 levels to reduce unnecessary complexity). It is now also possible to customize the color of textboxes.
Fantastic - Thanks ever so much!
Just one little thing, in Immersion, I can't seem to get translated and untranslated sentences to have different colors.
- 2011
@lieryan : The update is highly appreciated! I've updated my install, looks very good.
If you're part of the 50% who got the recently redesigned immersion page (http://www.duolingo.com/comment/660780), I've just made an update for the new immersion page.
- 2011
@lieryan : Brilliant! For background color I chose #363636 (gray 21 according to http://cloford.com/resources/colours/500col.htm) I will tinker more when I'll have the time. For now this looks great: the gray + golden yellow + blue and green that are default on DL. Appreciate the time and effort.
Tip for mac users: you can invert the screen colors by pressing Control+Option+Command+8 simultaneously. There is a way to do it in Windows by using the magnifier function.
There is also this software called f.lux which makes the color of your display adapt to the time of day (by reducing the blue light your screen is emitting)
f.lux is great. You can get it free as a Chrome extension. You can also turn it on or off if you're doing color sensitive work.
These are actually decent temporary solutions, but they discolor the screen, so having a darker background at some point would still be nice.
I also made a theme for UserStyles: http://userstyles.org/styles/90723/duolingo?r=1374230153
Install it with the Stylish extension for Firefox and Chrome
Screenshots: http://imgur.com/cag0t5H,XFEPNis,Ke7gkht,KoclMCM#3
Have you tried f.lux? It's designed to reduce some of the stress that computer screens put on your eyes with the idea that you set it based on the type of lighting you're in. A lot of people at my office use the program and seem to like it, but it does take some getting used to.
I started this yesterday - will try it out for the first recommended "get use to it" week.
- 2011
@Chumpatrol1 : Exactly what I was thinking now. That would be helpful for me and my old, slow-ish laptop.
