mirror of
https://github.com/rjNemo/fastapi
synced 2026-06-11 13:06:43 +00:00
📝 Add dark mode auto switch to docs based on OS preference (#4869)
This commit is contained in:
parent
0f7de452dd
commit
15dd12629e
18 changed files with 72 additions and 36 deletions
|
|
@ -5,13 +5,15 @@ theme:
|
||||||
name: material
|
name: material
|
||||||
custom_dir: overrides
|
custom_dir: overrides
|
||||||
palette:
|
palette:
|
||||||
- scheme: default
|
- media: "(prefers-color-scheme: light)"
|
||||||
|
scheme: default
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
icon: material/lightbulb
|
icon: material/lightbulb
|
||||||
name: Switch to light mode
|
name: Switch to light mode
|
||||||
- scheme: slate
|
- media: "(prefers-color-scheme: dark)"
|
||||||
|
scheme: slate
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,15 @@ theme:
|
||||||
name: material
|
name: material
|
||||||
custom_dir: overrides
|
custom_dir: overrides
|
||||||
palette:
|
palette:
|
||||||
- scheme: default
|
- media: "(prefers-color-scheme: light)"
|
||||||
|
scheme: default
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
icon: material/lightbulb
|
icon: material/lightbulb
|
||||||
name: Switch to light mode
|
name: Switch to light mode
|
||||||
- scheme: slate
|
- media: "(prefers-color-scheme: dark)"
|
||||||
|
scheme: slate
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,15 @@ theme:
|
||||||
name: material
|
name: material
|
||||||
custom_dir: overrides
|
custom_dir: overrides
|
||||||
palette:
|
palette:
|
||||||
- scheme: default
|
- media: "(prefers-color-scheme: light)"
|
||||||
|
scheme: default
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
icon: material/lightbulb
|
icon: material/lightbulb
|
||||||
name: Switch to light mode
|
name: Switch to light mode
|
||||||
- scheme: slate
|
- media: "(prefers-color-scheme: dark)"
|
||||||
|
scheme: slate
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,15 @@ theme:
|
||||||
name: material
|
name: material
|
||||||
custom_dir: overrides
|
custom_dir: overrides
|
||||||
palette:
|
palette:
|
||||||
- scheme: default
|
- media: "(prefers-color-scheme: light)"
|
||||||
|
scheme: default
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
icon: material/lightbulb
|
icon: material/lightbulb
|
||||||
name: Switch to light mode
|
name: Switch to light mode
|
||||||
- scheme: slate
|
- media: "(prefers-color-scheme: dark)"
|
||||||
|
scheme: slate
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,15 @@ theme:
|
||||||
name: material
|
name: material
|
||||||
custom_dir: overrides
|
custom_dir: overrides
|
||||||
palette:
|
palette:
|
||||||
- scheme: default
|
- media: "(prefers-color-scheme: light)"
|
||||||
|
scheme: default
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
icon: material/lightbulb
|
icon: material/lightbulb
|
||||||
name: Switch to light mode
|
name: Switch to light mode
|
||||||
- scheme: slate
|
- media: "(prefers-color-scheme: dark)"
|
||||||
|
scheme: slate
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,15 @@ theme:
|
||||||
name: material
|
name: material
|
||||||
custom_dir: overrides
|
custom_dir: overrides
|
||||||
palette:
|
palette:
|
||||||
- scheme: default
|
- media: "(prefers-color-scheme: light)"
|
||||||
|
scheme: default
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
icon: material/lightbulb
|
icon: material/lightbulb
|
||||||
name: Switch to light mode
|
name: Switch to light mode
|
||||||
- scheme: slate
|
- media: "(prefers-color-scheme: dark)"
|
||||||
|
scheme: slate
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,15 @@ theme:
|
||||||
name: material
|
name: material
|
||||||
custom_dir: overrides
|
custom_dir: overrides
|
||||||
palette:
|
palette:
|
||||||
- scheme: default
|
- media: "(prefers-color-scheme: light)"
|
||||||
|
scheme: default
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
icon: material/lightbulb
|
icon: material/lightbulb
|
||||||
name: Switch to light mode
|
name: Switch to light mode
|
||||||
- scheme: slate
|
- media: "(prefers-color-scheme: dark)"
|
||||||
|
scheme: slate
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,15 @@ theme:
|
||||||
name: material
|
name: material
|
||||||
custom_dir: overrides
|
custom_dir: overrides
|
||||||
palette:
|
palette:
|
||||||
- scheme: default
|
- media: "(prefers-color-scheme: light)"
|
||||||
|
scheme: default
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
icon: material/lightbulb
|
icon: material/lightbulb
|
||||||
name: Switch to light mode
|
name: Switch to light mode
|
||||||
- scheme: slate
|
- media: "(prefers-color-scheme: dark)"
|
||||||
|
scheme: slate
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,15 @@ theme:
|
||||||
name: material
|
name: material
|
||||||
custom_dir: overrides
|
custom_dir: overrides
|
||||||
palette:
|
palette:
|
||||||
- scheme: default
|
- media: "(prefers-color-scheme: light)"
|
||||||
|
scheme: default
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
icon: material/lightbulb
|
icon: material/lightbulb
|
||||||
name: Switch to light mode
|
name: Switch to light mode
|
||||||
- scheme: slate
|
- media: "(prefers-color-scheme: dark)"
|
||||||
|
scheme: slate
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,15 @@ theme:
|
||||||
name: material
|
name: material
|
||||||
custom_dir: overrides
|
custom_dir: overrides
|
||||||
palette:
|
palette:
|
||||||
- scheme: default
|
- media: "(prefers-color-scheme: light)"
|
||||||
|
scheme: default
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
icon: material/lightbulb
|
icon: material/lightbulb
|
||||||
name: Switch to light mode
|
name: Switch to light mode
|
||||||
- scheme: slate
|
- media: "(prefers-color-scheme: dark)"
|
||||||
|
scheme: slate
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,15 @@ theme:
|
||||||
name: material
|
name: material
|
||||||
custom_dir: overrides
|
custom_dir: overrides
|
||||||
palette:
|
palette:
|
||||||
- scheme: default
|
- media: "(prefers-color-scheme: light)"
|
||||||
|
scheme: default
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
icon: material/lightbulb
|
icon: material/lightbulb
|
||||||
name: Switch to light mode
|
name: Switch to light mode
|
||||||
- scheme: slate
|
- media: "(prefers-color-scheme: dark)"
|
||||||
|
scheme: slate
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,15 @@ theme:
|
||||||
name: material
|
name: material
|
||||||
custom_dir: overrides
|
custom_dir: overrides
|
||||||
palette:
|
palette:
|
||||||
- scheme: default
|
- media: "(prefers-color-scheme: light)"
|
||||||
|
scheme: default
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
icon: material/lightbulb
|
icon: material/lightbulb
|
||||||
name: Switch to light mode
|
name: Switch to light mode
|
||||||
- scheme: slate
|
- media: "(prefers-color-scheme: dark)"
|
||||||
|
scheme: slate
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,15 @@ theme:
|
||||||
name: material
|
name: material
|
||||||
custom_dir: overrides
|
custom_dir: overrides
|
||||||
palette:
|
palette:
|
||||||
- scheme: default
|
- media: "(prefers-color-scheme: light)"
|
||||||
|
scheme: default
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
icon: material/lightbulb
|
icon: material/lightbulb
|
||||||
name: Switch to light mode
|
name: Switch to light mode
|
||||||
- scheme: slate
|
- media: "(prefers-color-scheme: dark)"
|
||||||
|
scheme: slate
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,15 @@ theme:
|
||||||
name: material
|
name: material
|
||||||
custom_dir: overrides
|
custom_dir: overrides
|
||||||
palette:
|
palette:
|
||||||
- scheme: default
|
- media: "(prefers-color-scheme: light)"
|
||||||
|
scheme: default
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
icon: material/lightbulb
|
icon: material/lightbulb
|
||||||
name: Switch to light mode
|
name: Switch to light mode
|
||||||
- scheme: slate
|
- media: "(prefers-color-scheme: dark)"
|
||||||
|
scheme: slate
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,15 @@ theme:
|
||||||
name: material
|
name: material
|
||||||
custom_dir: overrides
|
custom_dir: overrides
|
||||||
palette:
|
palette:
|
||||||
- scheme: default
|
- media: "(prefers-color-scheme: light)"
|
||||||
|
scheme: default
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
icon: material/lightbulb
|
icon: material/lightbulb
|
||||||
name: Switch to light mode
|
name: Switch to light mode
|
||||||
- scheme: slate
|
- media: "(prefers-color-scheme: dark)"
|
||||||
|
scheme: slate
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,15 @@ theme:
|
||||||
name: material
|
name: material
|
||||||
custom_dir: overrides
|
custom_dir: overrides
|
||||||
palette:
|
palette:
|
||||||
- scheme: default
|
- media: "(prefers-color-scheme: light)"
|
||||||
|
scheme: default
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
icon: material/lightbulb
|
icon: material/lightbulb
|
||||||
name: Switch to light mode
|
name: Switch to light mode
|
||||||
- scheme: slate
|
- media: "(prefers-color-scheme: dark)"
|
||||||
|
scheme: slate
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,15 @@ theme:
|
||||||
name: material
|
name: material
|
||||||
custom_dir: overrides
|
custom_dir: overrides
|
||||||
palette:
|
palette:
|
||||||
- scheme: default
|
- media: "(prefers-color-scheme: light)"
|
||||||
|
scheme: default
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
icon: material/lightbulb
|
icon: material/lightbulb
|
||||||
name: Switch to light mode
|
name: Switch to light mode
|
||||||
- scheme: slate
|
- media: "(prefers-color-scheme: dark)"
|
||||||
|
scheme: slate
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,15 @@ theme:
|
||||||
name: material
|
name: material
|
||||||
custom_dir: overrides
|
custom_dir: overrides
|
||||||
palette:
|
palette:
|
||||||
- scheme: default
|
- media: "(prefers-color-scheme: light)"
|
||||||
|
scheme: default
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
icon: material/lightbulb
|
icon: material/lightbulb
|
||||||
name: Switch to light mode
|
name: Switch to light mode
|
||||||
- scheme: slate
|
- media: "(prefers-color-scheme: dark)"
|
||||||
|
scheme: slate
|
||||||
primary: teal
|
primary: teal
|
||||||
accent: amber
|
accent: amber
|
||||||
toggle:
|
toggle:
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue