You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
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 attributedata-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.Describe the solution you'd like
react-syntax-highlightershould 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 amuistyle 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.
The text was updated successfully, but these errors were encountered: