[Feature Request] Light and dark theme

[Angeltheesoto]

Description

Light and dark theme

Feature:

We could create a simple light and dark mode for the user to toggle between.

Possible Solution:

• We can create two icons at the footer so it is not to distracting with all the other elements in the hero/header. We can use react icons to display a sun and moon as the buttons and highlight whichever is active.
• We can use localstorage to save the users preference for the light and dark mode. In order for the theme to be accessible across the whole application, we can utilize "useContext" that will wrap our app in the index.js file and provide a "theme" and "setTheme" as props in a context file. The context file can contain the following as a possible implementation:

import React, { useContext, useState } from "react";

const ThemeContext = React.createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState(true);

  const toggleTheme = (isLight) => {
    setTheme(isLight);
    setLocalTheme(isLight)
  };

const setLocalTheme = async (value) => {
      try {
        await localStorage.setItem("theme", value.toString());
      } catch (err) {
        console.log("Error setting local theme: ", err);
      }
    };

  return (
    <ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => {
  return useContext(ThemeContext);
};

• And then in the index.js we simply wrap our context like so:

import { ThemeProvider } from "./context/ThemeContext"; // new line

... morecode

<ThemeProvider> // new line
  <React.StrictMode>
     <RouterProvider router={router} />
  </React.StrictMode>
</ThemeProvider> // new line

... more code

• Now that our theme variable can be accessible throughout our whole application all we have to do is run the "toggleTheme" or "setTheme" to toggle the light/dark theme:

import { useTheme } from "./context/ThemeContext";

function ExampleComponent() {
     const { theme, setTheme, toggleTheme } = useTheme();

   ... more code
}

• As for the localstorage, we can initialize a default theme in the app.js like so:

  const initializeLocalStorage = async () => {
    try {
      const localTheme = await localStorage.getItem("theme");
      if (!localTheme) {
        localStorage.setItem("theme", JSON.stringify(theme));
      } else {
        const parsedTheme = JSON.parse(localTheme);
        setTheme(parsedTheme);
      }
    } catch (error) {
      console.log("Error initializing LocalStorage:", error);
    }
  };

  useEffect(() => {
    initializeLocalStorage();
  }, []);

• When changing the color of the application we can use css custom properties:

div[data-theme="light"] {
   color: "black",
   background-color: "white"
}

div[data-theme="dark"] {
   color: "white",
   background-color: "black"
}

• In the components where we want the styles to be applied, all we have to do is add the following:

import { useTheme } from "../../context/ThemeContext";

function ExampleComponent() {
const { theme, setTheme, toggleTheme } = useTheme();

... more code

<div data-theme={theme ? "light" : "dark"}> 
... more code
</div>
}

... more code

• In summary, this should allow the user to toggle the light/dark theme and save the following theme in the localstorage so that when the user leaves and returns to the application, they will still have their preferred theme.

Screenshots

No response

Checklist

• [X] I have checked for duplicate issues
• [X] I have read the Contribution Guidelines
• [X] I am willing to work on this issue (optional)

[joyboy-reincarnated]

Hi I can try to do this

[XanderRubio]

Hi @Angeltheesoto !

Excellent angel! I'm currently traveling and haven't looked to closely at the code you provided. I love the idea of a light and dark mode. Go for it and I will go ahead and assign. Have a nice day and happy developing!

[XanderRubio]

Nice and thank you for your thourugh explaination in your open issue. I appreciate your documentation and the issue is assigned to you @Angeltheesoto. Have a great Sunday and thank you for your initiative👏🏻

[XanderRubio]

Hi I can try to do this

Thanks @joyboy-reincarnated for your enthusiasm! The issue has already been assigned. Take a look at the ReadMe of the repo and you can contribute right away to the project with sharing what you want to do before you die. Have a nice day!

[Angeltheesoto]

@XanderRubio, Thank you I will start working on it! And hope you have a great weekend as well 😊

[XanderRubio]

@XanderRubio, Thank you I will start working on it! And hope you have a great weekend as well 😊

Great and thank you @Angeltheesoto!

[benjamindotdev]

Hey everyone. If this hasn't been completed, I can jump on it