Based on the answers above, this is what I’m using:

// assets/tailwind.config.js
module.exports = {
  ...
  darkMode: 'class',
  ...
}

// assets/js/app.js:
function applyColorSchemePreference() {
    const darkExpected = window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (darkExpected) {
        document.documentElement.classList.add('dark');
        document.documentElement.style.setProperty('color-scheme', 'dark');
    }
    else {
        document.documentElement.classList.remove('dark');
        document.documentElement.style.setProperty('color-scheme', 'light');
    }
}

// set listener to update color scheme preference on change
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
    const newColorScheme = event.matches ? "dark" : "light";
    console.log(newColorScheme);
    applyColorSchemePreference();
});

// check color scheme preference on page load
applyColorSchemePreference();

This doesn’t allow for manual toggling: it defers to the operating system. But it toggles automatically whenever the operating system switches between dark & light modes.

Just pointing up something that can help others: you should use color-scheme: dark; because it sets some CSS standards to dark color like inputs, scrollbars, and so on.

edit: some reference

use the power of AlpineJS?

Here is the tutorial on AlpineJS: https://youtu.be/r5iWCtfltso?t=2218.
here is how to add AlpineJS to Phoenix: How to combine Phoenix LiveView with Alpine.js · FullstackPhoenix (Steps 1 & 2)

I know writing JS is not something Elixir devs can be fan of, but I think implementation of dark/light mode is elegant with the help of AlpineJS. Also in this case, JS is not interacting with server and dealing solely with client-side feature, that makes it even more appropriate to use it in this case instead of making round-trips to the server LiveView way