|
|
|
@ -14,7 +14,9 @@ export const DarkModeToggle = (props: {
|
|
|
|
|
return (
|
|
|
|
|
<label
|
|
|
|
|
className={`ToolIcon ToolIcon_type_floating ToolIcon_size_M`}
|
|
|
|
|
title={t("buttons.toggleDarkMode")}
|
|
|
|
|
title={
|
|
|
|
|
props.value === "dark" ? t("buttons.lightMode") : t("buttons.darkMode")
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
className="ToolIcon_type_checkbox ToolIcon_toggle_opaque"
|
|
|
|
@ -23,7 +25,11 @@ export const DarkModeToggle = (props: {
|
|
|
|
|
props.onChange(event.target.checked ? "dark" : "light")
|
|
|
|
|
}
|
|
|
|
|
checked={props.value === "dark"}
|
|
|
|
|
aria-label={t("buttons.toggleDarkMode")}
|
|
|
|
|
aria-label={
|
|
|
|
|
props.value === "dark"
|
|
|
|
|
? t("buttons.lightMode")
|
|
|
|
|
: t("buttons.darkMode")
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
<div className="ToolIcon__icon">
|
|
|
|
|
{props.value === "light" ? ICONS.MOON : ICONS.SUN}
|
|
|
|
|