?? ??? light-dark() ?? ??? ??? Prefers-color-scheme ??? ??? ???? ? Bear ???? ??/??? ?? ???? ??????.

?? ? ??? ??? ????.

1??: CSS ??

CSS? ?? ? ? ?? light-dark() ?? ??? ???? ? ?? ?? ? ??? ?????. ? ??? ???? ?? ??? ? ?? ??(?? ??? ??? ??)? ??? ? ????.

?? ?? ??? ?? ????? ????, ??? ????? ????? ????? ??? ?? ?????.

body {
  background-color: light-dark(#fff, #000);
}

?? ??? ??? ???? ??? ??? ??? ?? ??? ? ?? ??? ??????.

2??: HTML ????

?? ???? ???, ??? ??, ???? ?? ?? ?? ???? ??????. ?? ??? ???? ???? ??? ??? ???? ?????. ?? ??? ??? ??? ???? ??? ?? ???? ???? ?? ??? ???? ???? ?????.

onclick ???? ?? ??? ??? ?? ??? ??? ???? switchMode() ??? ?????(??? ??? ??). HTML ??? ??? ????.

<a id="preferdark" onclick="switchMode('dark')" style="display: none;">
  <!-- Icon for switching to dark mode. -->
</a>
<a id="preferlight" onclick="switchMode('light')">
  <!-- Icon for switching to light mode. -->
</a>

3??: JavaScript ??

JavaScript? ? ?? ?? ??? ?????.

1. ???? ???? ???? ?? ??? ??? ??? ?????.
2. ???? ?? ?? ??? localStorage? ???? ?? ?? ? ???? ?????.

??????? ? ???? ????. ??? ?? ? ??? ???? ???? ??? ??? ? ??? ???????.

? Bear?? ?? > ??? ? ??? ???.

?????? ??

? ??? ??? ?? ?? ????? ??? ??? ??? ?????. ??? ??? ???? ????? OS? ?? ?? ?? ??? ??? ????? ?????. ?? ??? ??? ? ?? ?? ????? ??? ??? ?????. ?? ?? ?? ??? :root ??(?, ?? ??)? ?????.

const storedScheme = localStorage.getItem("color-scheme");
const preferredScheme = storedScheme 
  ? storedScheme 
  : window && 
    window.matchMedia && 
    window.matchMedia('(prefers-color-scheme: light)').matches ? "light" : "dark";

document.querySelector(':root').style.setProperty("color-scheme", preferredScheme);

?????? ??

? ??? ??? ? ??? PreferredScheme ??? ???? ??? ???? ?????. switchMode() ??? ??? ??? ??????, :root ? ???? ????, ? ?? ??? ?? ???? ?????.

document.querySelector("#preferlight").style.display = preferredScheme === "light" 
  ? "none" 
  : "";
document.querySelector("#preferdark").style.display = preferredScheme === "light" 
  ? "" 
  : "none";

function switchMode(mode) {
  document.getElementById("preferlight").style.display = mode === "light" 
  ? "none" 
  : "";
  document.getElementById("preferdark").style.display = mode === "light" 
  ? "" 
  : "none";
  document.querySelector(':root').style.setProperty("color-scheme", mode);
  localStorage.setItem("color-scheme", mode);
}

??? ?? ?????. Bear ???? ?? ??/??? ?? ??????!

? ??? Bear ???? ???/?? ??? ?? ??? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!