Dark Mode

Today I'm going to share the way I make the darkmode And if you have another better ways to do one, please let me know (if there are any audiences here)

First, I use styled-component library I feel it's convenient to use, you can put style into Component then use the Layout everywhere you want

In Layout Component, I put a ThemeProvider

// Container.js
import styled, { ThemeProvider } from "styled-components";
import { lightTheme, darkTheme } from "@layouts/theme";

export default function Container({ children, location }) {
  const [theme, setTheme] = useState("dark");
  const isDarkTheme = theme === "dark";
  const toggleTheme = () => setTheme(isDarkTheme ? "light" : "dark");

  return (
    <ThemeProvider theme={isDarkTheme ? darkTheme : lightTheme}>
      <Layout>{children}</Layout>
    </ThemeProvider>
  );
}

so that you can use a state to switch themes

in styled-components ThemeProvider provides theme then you can use the theme in styled it's convenient

// styled

const styled.div`
  color: ${({theme}) => theme.color}
`

// 👆 an example above, ThemeProvider prop theme provided object of darkTheme/lightTheme
// and the object looks like:

lightTheme = {
  color: "#f00037"
}

darkTheme = {
  color: "black"
}

This post is not make in-depth discussion of styled-component and I myself am not really fully understand just having a little bit knowledge about it and maybe in the future, when I have mote understanding of it I will share it

styled-components is what I use at work so I am used to it but, I saw Dcard-team are giving up/aborting this library 😿 so far I'm feel good about this library But, I also think I should try more something new of course I know it should all depends on the project requirments to decide what library should be used and need to understand that library more.

Expect myself to have a open mind and more curiosity to learn more new write down this to encourage myself 💪

this is today's sharing 👋