ELI5

I

am pretty sure that a lot of people, including me, are huge fans of color theming. Although every single device that I own is set to the dark mode I love that feeling of being able to choose rather than being forced to use that bright white theme at the 3:48 AM day before the release. (I love you stripe ❤)

Disclaimer

I’m not going to go in depths with context, typescript, or styled-components, I will just guide you through one of many solutions that I find comfortable using.

---

Let’s start by creating the app first. I’m going to do the minimal setup of the project, that said I’m just going to use the good old “create-react-app”.

If you don’t trust me about this part just go through the docs or skip the next part.

$ npx create-react-app auto-theme --template typescript

I sincerely suggest you using eslint and prettier with typescript because it’s a killer combo.

As far as styled-components are concerned I’ll follow through their official documentation as well.

You start by adding

$ yarn add styled-components

And because we’re doing this with typescript we’re going to have to add types as well.

$ yarn add -D @types/styled-components

Okay, so you should’ve ended up with something like this

Now we’ll be removing the CSS files and that test, you can just paste the command in the root of your project and it’ll do it for you.

$ rm -rf src/App.css src/App.test.tsx src/index.css src/logo.svg

#styled-components #react-context #react #typescript #programming