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.

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>
  );
}