Description
CSS seems to be one* proper solution to get rid of the "theme-flickering" problem (see for instance mui/material-ui#12827). You load twice as much theme-related CSS, but at least your first render of the page is coherent with the user-selected theme.
There is at least one standard way of handling this in CSS, via the media query (prefers-color-scheme: dark), but this only handles following the underlying system's theme. There are also custom CSS classes or HTML attributes (which can be queried via CSS), for instance in MUI the <html> root element gets an extra attribute data-mui-color-scheme="dark" (see https://mui.com/material-ui/experimental-api/css-theme-variables/customization/#custom-styles-per-mode). These allow more complex behaviors such as manually setting the theme, independently of the underlying system's theme.
* Request headers parsing could also work to some extent but that's not the subject here.
Describe the solution you'd like
react-syntax-highlighter should provide some styles that are "dynamic", in that they take into account the CSS solutions mentioned above. For instance we could have a generic function to combine one light style and one dark style into one dynamic style. Or we could have a mui style that specifically handles the MUI way of defining the current theme.
Describe alternatives you've considered
One can write their own ad-hoc dynamic highlight style. But that takes time or involves redundant copy-pasting.