For each user preference query have the following hierarchy:
start at the bottom. If the default is no preference, check the next level and so on until a recorded preference is returned and then use that as the preference in media queries. I’m going to use light/dark mode for examples but it could be any preference.
At the site level a dark mode toggle would cause a dark mode media query to match so there’d be no need to either duplicate the dark mode code or to check the media query in js and set a class to trigger dark mode which then only allows users with js enabled to select dark mode.
At the extension level this would allow an extension to pin dark mode or light mode for some sites that may not work as well with the users default preference.
The browser level would let preferences be stated even if the OS does not natively support the preference in question. This may be unnecessary as an extension could equally fill this role.