This is for Firefox. I know there are extensions for dark themes, but I don't want to use it because it messes up certain websites and doesn't get back to normal even after removing the extension.

What I want to do:
Instead, I want to create a script which can be run with GreaseMonkey or an equivalent.
On Google's search page, there's a gear icon for "Quick Settings". On clicking it, these options are shown:
enter image description here

Instead of having to manually click it, I want a script to auto-detect that I opened a Google page, and automatically click that "Dark theme" radio button.

What I tried:
Found the div:

<label class="GZcH3e LZTko" jsname="I7WXBf" style="display:flex" data-ved="2ahUKEwiY_7-G9ZCAAxWT-jgGHdrgDFoQ9ZsIegQIIBAN">
<div class="UCGAnb">Dark theme</div>
<img class="UCAEse" src="https://www.gstatic.com/ui/v1/menu/dark_thumbnail2.png" alt="">

Assuming that clicking the radio button invokes a JavaScript function, I searched for I7WXBf and found this:

class\x3d\x22GZcH3e LZTko\x22 jsname\x3d\x22I7WXBf\x22 style\x3d\x22display:flex\x22 data-ved\x3d\x222ahUKEwiY_7-G9ZCAAxWT-jgGHdrgDFoQ9ZsIegQIIBAN\x22\x3e\x3cdiv class\x3d\x22UCGAnb\x22\x3eDark theme\x3c/div\x3e\x3cimg 

But I find it hard to figure out how it'd get invoked.
I also asked ChatGPT to create a GreaseMonkey script based on the class names from the relevant HTML, but the script didn't work.

  • Using ChatGPT for programming/scripting is generally a waste of time. It can be right, but often you have to guide it onto correct path yourself and it's hard to do that if you lack knowledge about a specific topic.
    – Destroy666
    Jul 22 at 1:34

1 Answer 1


You're overcomplicating things for no reason. Just click on the <div> element that you mentioned, you don't have to invoke anything. You need to narrow it down with a better selector then, also. E.g. this works for me:


The CSS selector means 2nd child div with class de2Dud, which is the "random" class name of all the radio divs.

Note, especially for future readers: the class name could easily be renamed as it seems to be perhaps autogenerated by some JS library. Or perhaps even it may differ per language/country.

Here's one which is class-name independent:

document.querySelector('div[role="dialog"] g-radio-button-group:nth-of-type(1) > div:nth-child(2)').click();

It selects the popup menu, then the 1st g-radio-button-group inside and lastly the 2nd div which is a direct child.

  • Thanks, but it doesn't work for me: Uncaught TypeError: document.querySelector(...) is null. I pressed F12 and entered the command in the Console. May I know how you figured out the class is "de2Dud"? I used Ctrl+u and searched. I saved the google page to disk and used grep to search, but I couldn't find de2Dud.
    – Nav
    Jul 23 at 6:32
  • On which link exactly (paste full one please) did you test?
    – Destroy666
    Jul 23 at 10:44
  • Example link: google.com/search?client=firefox-b-lm&q=hello. I type the search query ("Hello") in the address bar (this is in Firefox, with 'do not remember history' enabled. I also have adblock and uBlock origin installed).
    – Nav
    Jul 24 at 2:03
  • Works for me under these cirmunstances, except Adblock one, but that shouldn't matter. Maybe it differs per language/country or browser version.
    – Destroy666
    Jul 24 at 11:38
  • 1
    Ok. Thank you. btw, I just found out that Greasemonkey isn't being actively maintained. Using TamperMonkey now.
    – Nav
    Jul 24 at 16:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.