Material for MkDocs implements colors using CSS variables (custom properties). Material for MkDocs will now change the color palette each time the operating system switches between light and dark appearance, even when the user doesn't reload the site. different colors for light and dark mode. You can also define separate settings for primary and accent per color palette, i.e.Theme : palette : # Palette toggle for automatic mode - media : "(prefers-color-scheme)" toggle : icon : material/brightness-auto name : Switch to light mode # Palette toggle for light mode - media : "(prefers-color-scheme: light)" scheme : default # (1)! toggle : icon : material/brightness-7 name : Switch to dark mode # Palette toggle for dark mode - media : "(prefers-color-scheme: dark)" scheme : slate toggle : icon : material/brightness-4 name : Switch to system preference Simply add a media property next to the scheme definition in mkdocs.yml: System preference ¶Įach color palette can be linked to the user's system preference for light and dark appearance by using a media query. This property is used as the toggle's title attribute and should be set to a discernable name to improve accessibility. + – material/lightbulb + material/lightbulb-outline.+ – material/eye + material/eye-outline.+ – material/weather-night + material/weather-sunny. + – material/toggle-switch + material/toggle-switch-off-outline.+ – material/brightness-7 + material/brightness-4.This property must point to a valid icon path referencing any icon bundled with the theme, or the build will not succeed. The following properties must be set for each toggle: icon Note that you can also define separate settings for primary and accent per color palette. This configuration will render a color palette toggle next to the search bar.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |