Search code examples
javascriptyoutubebookmarklet

Bookmarklet to turn on Dark Theme on Youtube


Sorry for posting an unsophisticated question.

I'd like to use Youtube with Dark Mode always on, but sometimes the configurations are reset and I have to click the icon button, Appearance and then Dark theme.
I hope there could be a bookmarklet for this procedure.
And I guess it's not so complicated, only if I had a bit of knowledge.

According to my imagination, the code should look like blow. How could it be improved? With what search phrase could I find information?

javascript:(function()<br>
{document.getElementById("[ID of Account Menu]").click();}<br>
{document.getElementById("[ID of Appearance]".click();}<br>
{document.getElementById("[ID of Dark theme]".click();}<br>
)();

Thanks.

Solution

  • Note: the bookmarklet seems to not do the job if the time is too short so play with the timeouts

    javascript: (() => {
  document.getElementById("avatar-btn").click();
  setTimeout(() => {
    document.querySelector(".ytd-toggle-theme-compact-link-renderer").click();
    setTimeout(() => {
      document.querySelectorAll(".ytd-compact-link-renderer").forEach(yt => {
        if (yt.textContent === "Dark theme") yt.click();
      });
    }, 1000)
  }, 1000)
})()

    That said, there is a "Use device theme" you might want to use instead