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

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

https://old.thelemmy.club/

Unfortunately with Lemmy 1.0 MLMYM (the software used to provide this UI) will have to be shutdown, unless the MLMYM dev re-appears or someone forks and maintains it.

the thumbnails now are even more clearly 4-pixel potatoes

pictrs's thumbnail parameter uses dumb raw pixel sampling -- which leaves something to be desired... It has other sampling options implemented (with resize, according to the docs), but they don't seem to accessible on my instance. You can remove thumbnail=96 if you want to get the image without that thumbnail sampling, at least.

make everything zoom 150%

I do this with my browser's UI (ctrl-plus keyboard shortcut in FF-based browsers works for me).

e.g. right side bar

[...document.querySelectorAll(".side")].forEach(sidebar => sidebar.remove())

You could also just adblock the element with class side.

Is it electron? I can't seem to find it outside of Mac, iOS and a test for Android