@@ -184,7 +184,7 @@ theme:
184
184
name: Switch to dark mode
185
185
186
186
# Palette toggle for dark mode
187
- - scheme: slate # (3)!
187
+ - scheme: slate
188
188
toggle:
189
189
icon: material/brightness-4
190
190
name: Switch to light mode
@@ -203,15 +203,9 @@ theme:
203
203
</div>
204
204
</div>
205
205
206
- 3. With __2__ (color schemes) __x 21__ (primary colors) __x 17__ (accent color)
207
- = __714__ combinations, it's impossible to ensure that all configurations
208
- provide a good user experience (e.g. _yellow on light background_). Make
209
- sure that the color combination of your choosing provides enough contrast
210
- and tweak CSS variables where necessary.
211
-
212
206
This configuration will render a color palette toggle next to the search bar.
213
- Note that you can also define separate settings for [`scheme `][palette.scheme],
214
- [`primary`][palette.primary] and [`accent`][palette.accent] per color palette.
207
+ Note that you can also define separate settings for [`primary `][palette.primary]
208
+ and [`accent`][palette.accent] per color palette.
215
209
216
210
The following properties must be set for each toggle :
217
211
@@ -297,7 +291,7 @@ theme:
297
291
298
292
# Palette toggle for light mode
299
293
- media: "(prefers-color-scheme: light)"
300
- scheme: default
294
+ scheme: default #(1)!
301
295
toggle:
302
296
icon: material/brightness-7
303
297
name: Switch to dark mode
@@ -310,6 +304,10 @@ theme:
310
304
name: Switch to system preference
311
305
` ` `
312
306
307
+ 1. You can also define separate settings for [`primary`][palette.primary] and
308
+ [`accent`][palette.accent] per color palette, i.e. different colors for
309
+ light and dark mode.
310
+
313
311
Material for MkDocs will now change the color palette each time the operating
314
312
system switches between light and dark appearance, even when the user doesn't
315
313
reload the site.
0 commit comments