Yesterday:

<nav script="dropdown.js" style="dropdown.css">
  <button onclick="toggleDropdown()">Menu</button>
</nav>

Today:

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './global.css';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

// App.jsx
import Dropdown from './components/Dropdown';
import './App.css';

export default function App() {
  return (
    <main>
      <Dropdown />
      <p>Hello, world!</p>
    </main>
  );
}

// components/Dropdown.jsx
import { useState } from 'react';
import styles from './Dropdown.module.css';
import ArrowIcon from '../assets/icons/ArrowIcon.jsx';

export default function Dropdown() {
  const [open, setOpen] = useState(false);
  return (
   <div className={styles.dropdown}>
      <button onClick={() => setOpen(!open)}>Menu <ArrowIcon /></button>
      {open && (
        <ul>
          <li>Option 1</li>
          <li>Option 2</li>
        </ul>
      )}
    </div>
  );
}

Voting

You could support this by making vote buttons submit a form if JS isn't enabled. (That's what mlmym does.)

Can't manually switch between dark and light mode

Hmm... There are some pretty nifty things you can do with a hidden checkbox, label, and some clever CSS (e.g. html:has(#element:checked) + CSS variables -- though FYI :has is baseline 2023.)

Making it persistent would require some more effort -- e.g. form + cookies + server side style sheet selection, most likely. mlmym lets users change their theme w/o JS by submiting a form on the setting page. I'd have to think a bit if there's a good way to make it persistent across multiple requests for logged out users with a CDN caching things in between though...

only automatically based on browser settings

Doesn't actually work for me in a FF138-based browser w/ JS blocked via NoScript -- I always get light mode despite having a dark mode preference set. (Where do you have your prefers-color-scheme media query?)

Also, FYI I had to manually override font restriction -- otherwise all your buttons end up as tofu characters. (I think NoScript is being kind of unreasonably strict there by blocking first party fonts.) That's a papercut kind of issue, but figured I'd point it out in case it might save you some debugging time if you get confused NoScript users in the future.

I'll try to play with it next time I'm on desktop. Thanks!