Greasy Fork is available in English.

Automatic Material Dark-Mode for YouTube

A low-tech solution to a high-tech problem! Automatically clicks YouTube's "Dark Mode" button if dark mode isn't already active.

< Feedback on Automatic Material Dark-Mode for YouTube

Review: Good - script works

Ebb
§
Posted: 21.3.2018
Edited: 25.3.2018

New Design

The script doesn't work with the new design. There is a new button at the top-right corner of youtube. I've been seeing this for a while. I could go back to previous layout by clearing my cookie/cache. I can't do that anymore.

§
Posted: 23.3.2018
Edited: 23.3.2018

Hi. You are using the correct "new layout" (Google calls it "material design"), and that layout is supported. In fact it's the only supported YouTube layout by this script! Look at my attached images. It's the exact same site, and it enables dark mode fine...

Try this, in order:

  1. Sometimes script managers don't auto-update you. Manually download the latest version of this script since you may be using an old version. Just go to the script page and press "Install/reinstall". The new version fully supports the new theme and even warns you if you aren't using the new theme (it tells you to do step 2 below if you are using the old/previous youtube layout).
  2. Go to youtube.com/new to enable the new theme to be 100% sure it's on.
  3. Disable all other browser addons and user scripts. Because I can see that your YouTube page has many other tweaks (some camera "plus" icon and different menu shading etc). One of them may be changing something so severely that it's impossible to find the menu.

One of those should fix it, since the new layout is supported and works for me and others. Please let me know which one of the above fixes it. Good luck. :-)

Ebb
§
Posted: 24.3.2018

I'm using v1.6.4 on Violentmonkey. It did work for me before. I had the up arrow with the underline instead of the camera. Now I don't.

I tried opening youtube on an empty chrome profile. I see the camera icon. It's a dropdown. There are two links. Both go to accounts.google.com for sign-in. Then I tried to use a US VPN. I had the same thing. I believe the changes have not been rolled out to your country. Can you try using a US proxy/VPN?

§
Posted: 24.3.2018
Edited: 24.3.2018

Interesting. I just compared Safari vs Google Chrome. In Google Chrome I get the "camera plus" icon, but in Safari I get the old uparrow. And yes it fails to find the settings menu for me too. I see the problem... To find the menu I do a search for all elements with the type 'ytd-topbar-menu-button-renderer button' and I expect to find 2 elements and click the 2nd one. But on the newer design, the "camera plus" icon matches that search, so it finds 3 buttons and therefore fails.

The current system I use isn't ideal but that's because I actually had lots of problems finding the menu, because YouTube doesn't have any identifying features in the HTML. There's some stuff like "title=Settings" when you hover over the menu icon but that's language-dependent, so I couldn't use that to identify the settings menu. And I can't look at the menu button's icon because it changes when you are logged in (changes to a picture of your account icon).

And I can't really look at the "design" of the icon, because it's not something as simple as "button image = settings.png". It's a complex "svg" graphic:

<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope yt-icon">
        <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" class="style-scope yt-icon"></path>
      </g></svg>

So: I cannot use the title ("Settings") because it's language-dependent. I cannot use the graphics of the button because it's not a normal image, it's a complex "svg" graphic... So that's why I landed on "Search for the 2nd button".

I'll have to see if there IS any other way to identify the settings button... hmm... I'll probably be ready with an update today, but this is a hard problem to solve. Thanks for letting me know about this!

§
Posted: 24.3.2018
Edited: 24.3.2018

Ok, that didn't take long... and the answer is: Nope there is still no way (at all) to identify the settings button. There's the SVG graphic, but it can't be searched for and it changes all the time. And there's the label but it's only "Settings" (english) when that's the selected language...

So I'll have a fix for this in a moment, but sadly still not an ideal way to find the button. I'll make it search for all buttons and if it finds 2, pick the 2nd, and if it finds 3, pick the 3rd... heh. Thankfully, when you log in, they still follow the same rule of having 3 matching buttons and the 3rd is still the correct one... phew. So this update will work. If those 3 "unidentifiable, featureless buttons" had been in a different order when logged in, it would have been the end of this addon, since it would have had no way of knowing which to click... So I hope YouTube doesn't do any more updates to the menu design... ;p

I wish YouTube could just have some stupid internal id="settings-button" on the button so we could always find it, but they don't.

§
Posted: 24.3.2018
Edited: 24.3.2018

Alright I've finished testing and releasing 1.7.0 which now supports both 2-button and 3-button bars, and has been verified in Chrome (3 button) and Safari (2 button) both when logged in and logged out. It's all working again! Enjoy! :-) And please consider leaving a good rating (edit the 1st post of the thread via the button in the top right of that post) if you like it.

Post reply

Sign in to post a reply.