How to invoke the dark theme selection on Google's search page?

Question

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:

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="">
</label>

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.

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:

document.querySelector('div.de2Dud:nth-child(2)').click();

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.