Setelah pembacaan ini di sisi gelap aplikasi Anda akan.

Kedengarannya seperti pengulangan di header tapi tidak. Meskipun ini adalah tutorial bereaksi, fungsionalitas intinya tidak akan benar-benar bereaksi secara spesifik. Ini berarti Anda dapat menggunakan logika pada aplikasi Angular, Vue.js dan HTML / CSS / JS sederhana.

Idealnya Anda harus menindaklanjuti dengan react, tetapi jika Anda cukup pintar Anda dapat membuat kode langsung di aplikasi Angular atau Vue.js Anda.

Kode

Kode lengkap dari cerita ini tersedia di repositori git ini , Anda dapat menariknya secara langsung dan melanjutkan karena hanya bagian penting dari kode yang akan dijelaskan.

Memulai

$ yarn create react-app dark-mode
// Add node-sass
$ cd dark-mode

Tambahkan yang berikut ini di App Anda. (Jsx / tsx) dan impor serta impor useEffect dan useState dari react.

const DarkSwitch: React.FC<unknown> = () => {
const [theme, setTheme] = useState(localStorage.getItem(“theme”));
useEffect(() => {
  if (!theme) {
    const dark = window.matchMedia(“(prefers-color-scheme: dark)”).matches;
    if (dark) document.documentElement.classList.add(“dark”);
  } else if (theme === “dark”) {
    document.documentElement.classList.add(“dark”);
  }
});
const toggleDark = () => {
  document.documentElement.classList.toggle(“dark”);
  const newTheme = theme === “dark” ? “light” : “dark”;
  localStorage.setItem(“theme”, newTheme);
  setTheme(newTheme);
};
return (
  <label className=”dark-switch”>
  <input checked={theme === “dark”} type=”checkbox” onChange={toggleDark} />
  <span className=”slider”>🌞</span>
  </label>
  );
};

...
  Learn React
</a>
<DarkSwitch />
</header>
...

:root{
  --app-bg: #282c34;
  --txt-color: white
}
:root.dark{
  --app-bg: #fff;
  --txt-color: black;
}
.App {
  text-align: center;
}
.App-logo {
  height: 40vmin;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}
.App-header {
  background-color: var(--app-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: var(--txt-color);
}
.App-link {
  color: #61dafb;
}
@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.dark-switch {
  position: relative;
  display: inline;
  width: 52px;
  height: 26px;
  margin: 15px;
}
input {
  opacity: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 34px;
  background-color: var(--txt-color);
  font-size: 17px;
  padding: 2px 3px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

Tema gelap ada di dalam tapi apa yang kita lakukan?

Semuanya terjadi di App.tsx dan App.css. Anda dapat menggunakan petunjuk berikut di proyek web frontend JS apa pun kerangka kerja, pustaka, atau javascript asli. Berikut ini menjelaskan inti cara mencapai pengalihan tema.

1. Dalam App.tsx

• Uji apakah tema browser default gelap (mengembalikan boolean)

window.matchMedia(“(prefers-color-scheme: dark)”).matches;

document.documentElement.classList.toggle(“dark”)

• Di App.scss
• Buat variabel CSS pada pemilih elemen root dan balikkan warna ketika nama kelas "gelap" ada di atasnya.

:root{
  --app-bg: #282c34;
  --txt-color: white
}
:root.dark{
  --app-bg: #fff;
  --txt-color: black;
}

.App-header {
  background-color: var(--app-bg);
  ...
  ...
  color: var(--txt-color);
}

Mungkin saya melewatkan sesuatu dalam penjelasan saya yang mungkin telah kehilangan Anda; Mohon beri tahu saya di komentar sehingga saya dapat mengedit dan membuatnya lebih berguna.

Jika Anda menggunakan komponen bergaya, Anda masih dapat menggunakan ini atau Anda dapat menggunakan

Semoga kekuatan itu menyertai Anda.