Помните, когда я сказал, что это будет сериал из 3 частей? Ну, если вы хотите, чтобы каждая часть была десять часов длиной, то да: P Эта часть будет короткими, потому что мы будем работать только над одной особенностью – темной темой.
Так что нам нужно сделать, это добавить класс к Тело называется темно Если темная тема включена. А потом мы можем изменить все цвета классов. Я буду использовать Материал цветовой сборщик выбрать мои цвета.
Давайте реализуем темы цвета в Theme.Css :
/* src/components/theme.css */
body.dark {
background-color: #333;
color: #fff;
}
body.dark .w3-blue {
background-color: #494949 !important;
color: #fff !important;
}
body.dark .w3-card, body.dark .w3-card-4 {
background-color: #6d6d6d !important;
color: #fff !important;
}
body.dark .w3-light-gray {
background-color: #102027 !important;
color: #fff !important;
}
body.dark button.w3-pink {
background-color: #512da8 !important;
color: #fff !important;
}
Так что вы можете видеть, я переопределил W3-цвет классы, чтобы установить мои цвета. Таким образом, нам не нужно удалять и добавлять классы, и наш код может быть намного проще. Теперь нам нужно реализовать это.
Добавление темы
Я добавлю кнопку в Navbar.jsx чтобы переключить темы.
// src/components/Navbar.jsx
import React from "react";
function Navbar() {
let [theme, setTheme] = React.useState(localStorage.getItem("theme") || "light");
React.useEffect(() => {
if (theme === "dark") {
document.body.classList.add("dark");
} else {
document.body.classList.remove("dark");
}
}, [theme])
let x = localStorage.getItem("token");
let a = {name: x ? "Settings" : "Login", link: x ? "/settings" : "/login"}
let b = {name: x ? "Logout" : "Register", link: x ? "/logout" : "/register"}
return (
);
}
export default Navbar;
И теперь, когда вы нажимаете на кнопку Солнца/Луна на Navbar, теперь она должна изменить тему. Кроме того, я добавил тему в локальное хранилище, поэтому, даже если пользователь обновляет страницу, тема останется прежней.
Теперь мы должны развернуть его снова. Итак, постройте его, а затем положите папку сборки в Quickr папка. Помните, Quickr Папка – копия Backend папка. Мы используем эту папку, чтобы мы ничего не делали катастрофии на бэкэнде.
Как только вы построили и скопировали папку, совершите и подтолкните ее к Heroku. Убедитесь, что вы находитесь в папке QuickR, потому что у нас есть репозиторий Git (если вы клонируете REPO из GitHub) в главной папке. Вы можете удалить основной репозиторий, если хотите.
И мы добавили темную тему на сайт!
Оригинал: “https://dev.to/arnu515/build-a-twitter-clone-with-flask-and-react-part-4-4fcb”