mirrors/django
1
0
Fork 0
mirror of https://github.com/django/django.git synced 2024-12-23 01:25:58 +00:00
Code Issues 25 Releases Wiki Activity

Fixed #34033 -- Improved accessibility of switch button for dark mode in the admin.

Browse Source 
Bug in bc7aa2a5e9.

Thanks Thibaud Colas for the report and review.
This commit is contained in:
Florian Perucki 2022-09-23 15:51:30 +02:00 committed by Mariusz Felisiak
parent 0f31d10c7c
commit 2c7c22f94d
2 changed files with 27 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
django/contrib/admin/static/admin/css/dark_mode.css
View File

@ -83,6 +83,26 @@ html[data-theme="dark"] {
display: none;
}
/*
Fully hide screen reader text so we only show the one matching the current
theme.
*/
.theme-toggle .visually-hidden {
display: none;
}
html[data-theme="auto"] .theme-toggle .theme-label-when-auto {
display: block;
}
html[data-theme="dark"] .theme-toggle .theme-label-when-dark {
display: block;
}
html[data-theme="light"] .theme-toggle .theme-label-when-light {
display: block;
}
/* ICONS */
.theme-toggle svg.theme-icon-when-auto,
.theme-toggle svg.theme-icon-when-dark,

11
django/contrib/admin/templates/admin/color_theme_toggle.html
View File

@ -1,12 +1,15 @@
{% load i18n %}
<button class="theme-toggle">
<div class="visually-hidden">Toggle Light / Dark / Auto color theme</div>
<svg class="theme-icon-when-auto">
<div class="visually-hidden theme-label-when-auto">{% translate 'Toggle theme (current theme: auto)' %}</div>
<div class="visually-hidden theme-label-when-light">{% translate 'Toggle theme (current theme: light)' %}</div>
<div class="visually-hidden theme-label-when-dark">{% translate 'Toggle theme (current theme: dark)' %}</div>
<svg aria-hidden="true" class="theme-icon-when-auto">
<use xlink:href="#icon-auto" />
</svg>
<svg class="theme-icon-when-dark">
<svg aria-hidden="true" class="theme-icon-when-dark">
<use xlink:href="#icon-moon" />
</svg>
<svg class="theme-icon-when-light">
<svg aria-hidden="true" class="theme-icon-when-light">
<use xlink:href="#icon-sun" />
</svg>
</button>