Build a twitter clone with Flask and React | PART 4

#webdev #react #javascript #python

Remember when I said this was going to be a 3-part series? Well, if you wanted each part to be ten hours long, then yes :P
This part will be short, because we'll only work on one feature - Dark Theme.

So what we need to do is add a class to the body called dark if dark theme is enabled. And then, we can change all of the color classes. I'll be using the Material color picker to pick my colors.

Let's implement the theme colors in 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;
}

So you can see, I've overridden the w3-color classes to set my colors. This way, we don't have to remove and add classes, and our code can be much simpler. Now, we need to implement this.

Adding a theme button

I'll add a button in Navbar.jsx to toggle themes.

// 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 (
        <div className="w3-bar w3-black">
            <a className="w3-bar-item w3-button" href="/">
                Quickr
            </a>
            <div style={{float: "right"}}>
                <button className="w3-bar-item w3-btn" onClick={() => {
                    if (theme === "dark") {
                        localStorage.setItem("theme", "light");
                        setTheme("light")
                    } else {
                        localStorage.setItem("theme", "dark");
                        setTheme("dark")
                    }
                }}>{theme === "dark" ? "🔆" : "🌙"}</button>
                <a className="w3-bar-item w3-button" href={a.link}>
                    {a.name}
                </a>
                <a className="w3-bar-item w3-button" href={b.link}>
                    {b.name}
                </a>
            </div>
        </div>
    );
}

export default Navbar;

And now, when you click the sun/moon button on the navbar, it should now change the theme. Also, I've added the theme to the local storage, so, even if the user refreshes the page, the theme will stay the same.

Deploying

Now, we have to deploy it again. So, build it and then put the build folder in the quickr folder. Remember, the quickr folder is a copy of the backend folder. We're using this folder so that we don't do anything catastrophic in the backend.

Once you've built and copied the folder, commit and push it to heroku. Make sure you're in the quickr folder, because we have a git repository(if you cloned the repo from github) in the main folder too. You can delete the main repository if you want.

And we've added a dark theme to the website!