1. Forum
  2. >
  3. Topic: Duolingo
  4. >
  5. Recipe: How to Disable/Enable…

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

Recipe: How to Disable/Enable The New Web Look

Hi there!

Unfortunately, since 2018-04-04 this recipe no longer works. Sorry.

Surely most of you heard about the new duolingo's look, and someone even got it. Do you have the new look, but you want to use the old one or do you have the old look and want to look at the new one? Read a recipe below.

How to turn the new look OFF

  1. Go to the home page.
  2. Open the browser console (press Ctr+Shift+K for FireFox or Ctrl+Shift+J for Chome/Chromium based). You can find more information in Google.
  3. Copy or type this command there: (function(){var newStyle=false;document.getElementsByTagName("html")[0].setAttribute("data-juicy",newStyle);window.duo.isJuicy=newStyle;document.querySelector("a[data-test='user-profile']").click();document.querySelector("a[data-test='home-nav']").click();})(); and hit "Enter".
  4. Enjoy!

.

How to turn the new look ON

  1. Go to the home page.
  2. Open the browser console (press Ctr+Shift+K for FireFox or Ctrl+Shift+J for Chome/Chromium based). You can find more information in Google.
  3. Copy or type this command there: (function(){var newStyle=true;document.getElementsByTagName("html")[0].setAttribute("data-juicy",newStyle);window.duo.isJuicy=newStyle;document.querySelector("a[data-test='user-profile']").click();document.querySelector("a[data-test='home-nav']").click();})(); and hit "Enter".
  4. Enjoy!

.

Some information and warnings

  • All the changes, this script made, are temporary. It means that if you update your browser tab, the look switch back. You should add this code to a user script to make it persistent or ask someone to do it for you.
  • Going to the discussion page also resets the changes. I recommend you using the discussions in a separate tab.
  • Most likely, this recipe will stop working when duolingo apply the new look for everyone.
  • They called the new design "Juicy" and the old one "Dry". I found that in the site's JS code.

Happy learning!

March 27, 2019

54 Comments


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

Wohoo, it works!

No more tiny letters!

No more baby interface!

Progress bars are rotated back so I can actually see when I am half done!

March 28, 2019

https://www.duolingo.com/profile/Thomas.Heiss

Hello Fierycat,

I posted this in this thread: https://forum.duolingo.com/comment/31464209$comment_id=31472435

I wish I (well, a html programmer / userstyle programmer would be better) could save all the old css classes locally for Stylus and write a userstyle before they update me.

I noticed that the text font already changed within the "fill the word into the blank / choose from options 1-4 button)" from a normal visible text and it now definitely is too small / thin....even with a Firefox zooming factor of at least 130%.

...(...)..

Q: Do you maybe know who on Duolingo as a web frontend developer might be capable in doing this to save the current web layout when the "big rollout" Juicy UI redesign happens?

March 28, 2019

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

I also think the "choose-from-options" text is now too small (Chrome, desktop). I logged it as a bug with Duo, because I think it is simply broken. But meanwhile, I wrote a userstyle for the Stylus extension "Duo Magnifying Glass" just to deal with it and make it legible (at 19px like the heading above it).

https://userstyles.org/styles/170630/duo-magnifying-glass

This has all of @Fierycat's disclaimers, mostly that when they roll this out all the way or change the code, this could easily stop working. But hope it helps others for now.

I'm not really a web developer, so you're more ambitious plan would fall to someone else. :)

April 3, 2019

https://www.duolingo.com/profile/Thomas.Heiss

Maybe more experienced html / css frontend developers could take a look at this userstyle and work together to get it running with the Stylus addon?

Maybe the current (old) web code (incl. text sizes) could be SAVED and made available as an updated userstyle?

https://forum.duolingo.com/comment/24634938/Lessons-Userstyle-to-get-some-things-of-the-old-look-back

March 28, 2019

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

Simply save the web pages of which you want to preserve the styles? Then you always have access to extract the CSS later on.

I'm quite clueless :P the "True Dark" thing I've been creating is the only larger CSS project I've ever done. But hey, it works! xD

March 28, 2019

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

To be honest, I do not see the point in that. Here is some reasons:

  • They may change class names for html elements. Actually, they do it from time to time.
  • They may fully change the current html layout. This also happened in the past.
  • With the mass distribution of the same design, there may be copyright problems. Did you remember the case with duolingo.eu domain?
March 28, 2019

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

'1. Can confirm - would require changes + many updates over time.

'3. I don't think you should worry about that too much for a theme. If it's just a style that benefits users, doesn't cause any kind of negative side-effect and clearly is marked as being unofficial, then you should probably be fine. I haven't received any complaints from Duolingo yet while my dark mode for the site essentially also could be perceived as containing copyright material.

March 28, 2019

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

I think that you misunderstood me: if your script replaces duolingo's CSS with yours own CSS in a user's browser, they will tell you nothing, but I'm not sure that they will be silent when you save their HTML, CSS, and images, and begin to destribute these data to users by including them into your own script in case they delete obsolete data from their servers.

Sorry, English is not my native language.

p.s. A little hint: in order to get this:

1. item1
3. item3

you should write:

1\. item1 <-- add two spaces here.
3\. item3

March 28, 2019

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

No, I don't know such a person.

March 28, 2019

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

Thank you. I'll try this when my headache dies down. rubbing own eyes

March 28, 2019

https://www.duolingo.com/profile/Rowlena-L

I cannot thank you enough for this. You've given me my motivation to use Duolingo back. Thank you a million times over!!!!

30+ lingots for you!!!!

March 31, 2019

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

On macOS, for Step 2 in both methods, the keystrokes needed to open the Console are ⌥⌘K (Option+Command+K) for Firefox and ⌥⌘J (Option+Command+J) for Chrome respectively.

March 28, 2019

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

When I looked at the console (before entering the command), I saw the following error:

XML Parsing Error: syntax error Location: https://excess.duolingo.com/batch Line Number 1, Column 1:

The error was repeated after entering the command.

March 29, 2019

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

The content of https://excess.duolingo.com/batch is a status message, e.g. “Event Receiver is online”. For some reason, your browser is interpreting that status message as an XML document, and since plain English text is never a valid XML document, your browser’s console is reporting an XML parsing error. As FieryCat noted, you need not pay any attention to this error message.

March 30, 2019

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

I think I have the same problem

March 29, 2019

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

Can you show me a screenshot like this one: https://i.imgur.com/R0yBqxa.png ?

March 29, 2019

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

The theme change seems to have started working, but I still get the same error: https://prnt.sc/n52vzz

March 30, 2019

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

I just checked it on my FireFox. I have the same error... even when I turns my script off (I do not see this error on Chromium). Do not pay any attention to this.

March 30, 2019

https://www.duolingo.com/profile/greenq
  • 1243

This script has probably stopped working, is there any other way to keep the old font and design?

April 4, 2019

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

At this writing [2019-04-04], it’s still working to change the typeface back to Museo Sans Rounded, but the rest of the design doesn’t change — the new flags mostly cover up part of the XP level numbers.

April 4, 2019

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

You're right, it changes the font in the forums. However, it's not working in the tree at all anymore.

April 4, 2019

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

The forum CSS files that are currently being served are different from the ones that were served a week ago.

April 4, 2019

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

whyyyyy did duo disable this workaround?

April 4, 2019

[deactivated user]

    Apparently they don't like customers or common sense...

    April 5, 2019

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

    Brilliant! Thanks!

    March 28, 2019

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

    Thanks, now I can see what all the fuss is about since I haven't been updated to the new version yet.

    I don't mind it too much but it does seem less smooth. I like the button look more on phones where you're actually pressing it, but it doesn't make much sense with a keyboard and mouse. And the brightness is a bit painful.

    March 28, 2019

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

    Great post FieryCat! Thanks so much for this info. I'm enjoying the old look again.

    March 28, 2019

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

    I tried to disable this new look with the code but it doesn't work :( I don't know why. The only thing it changes is the background (it becomes grey) but the format doesn't change :/

    Does someone know why?

    March 28, 2019

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

    It's a shame that Duolingo users have to do this

    March 30, 2019

    [deactivated user]

      Thank God! I can actually see the words better! Why did Duo even update to that anyway? This original is much better. Thanks, FieryCat!

      March 30, 2019

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

      Hi FieryCat,

      it seems like they have "fixed" it. It worked for a week, but today I am only getting

      XML Parsing Error: syntax error Location: https://excess.duolingo.com/batch Line Number 1, Column 1:

      as an error message.

      April 4, 2019

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

      Yes, you are right. It does not work for me too.

      April 4, 2019

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

      See ISpeakAlien’s thread above regarding this error message.

      April 4, 2019

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

      Wow this is very smart!

      So now if someone doesn't like the new look they take it off. Which I have seen many complaints, which honestly kind of annoys me because I love the new looks!

      Now our forums can be complaint free due to your very helpful post ^-^

      Thanks for this!

      March 27, 2019

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

      I don't not like how the new look looks(1). It gives me a splitting headache, though, making the site impossible to use. :/

      (1) I mean, it's not my cup of tea, but I don't care one way or another about the site's design past usability.

      March 28, 2019

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

      Very cool, I used to change the colors and fonts of my online math course for fun. I used the same basic concept but not to this extent. Again, very cool.

      March 27, 2019

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

      This is ingenious! That's such an interesting idea, but I'm not sure about "read an recipe bellow?"...

      March 27, 2019

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

      Thank you. I fixed it.

      March 27, 2019

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

      Happy to help. Great idea!

      March 28, 2019

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

      Will have to try this!

      March 28, 2019

      [deactivated user]

        May good fortune bless you

        March 29, 2019

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

        Thanks for that FieryCat!

        March 29, 2019

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

        Thanks for the share! I had to suffer for a while trying to squint up Chinese characters and just gave up halfway, sigh..

        March 29, 2019

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

        Thanks for the script, it makes it very easy to compare the two versions side by side. Now I see I like the old version better except in one point - I like the grey background of the new version, but nothing else about it. I think they should give us the old version with the grey background, and that would suit me just fine.

        March 30, 2019

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

        thank you sooo much! I can finally use Duo again :P

        March 30, 2019

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

        @Fierycat, in my case, I'll activate the new design, because I definitely need to have an idea if I'm going to adapt with the new styling. Thank you for taking the time to contribute with this much-needed information.

        God bless you!

        March 30, 2019

        https://www.duolingo.com/profile/Thomas.Heiss

        @FieryCat

        Hi,

        I created this thread for a developer question (and I am not sure right now if I may have asked you this already): https://forum.duolingo.com/comment/31473203

        Best regards

        March 28, 2019

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

        I tried both, but both have lost all of my work on all of the sections, & I had reached Level 5 on all of the French sections, & was up to Level 4 in Adjectives 3!! Wahhh!! What to do?? I cannot start all over again from Basics 1!! HELP HELP HELP...SO DISCOURAGING!!!! Posted May 28, 2019. PLEASE HELP ME GET MY LEVELS BACK!! Merci.

        March 28, 2019

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

        Likely you have received the new French tree. Have a look at this thread: https://forum.duolingo.com/comment/31483256

        March 28, 2019

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

        it gives me this :

        VM265:1 Uncaught TypeError: Cannot read property 'click' of null at :1:190 at :1:259

        June 21, 2019

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

        Unfortunately, since 2018-04-04 this recipe no longer works. Sorry.

        June 24, 2019

        https://www.duolingo.com/profile/Corbyn-Besson12

        what's with the "Happy learning" -_-?

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