Closed AMS003010 closed 5 months ago
@AMS003010 is attempting to deploy a commit to the Abhijeet's projects Team on Vercel.
A member of the Team first needs to authorize it.
@abhijeetnishal please do review This PR is for the Issue #132
Hey @AMS003010, use state management library (zustand) to implement this toggle. The current code is not efficient. Also it will be valid for every page.
The themeStore code looks like:
import {create} from 'zustand';
interface ThemeState {
theme: 'light' | 'dark';
toggleTheme: () => void;
}
const useThemeStore = create<ThemeState>((set) => ({
theme: 'light',
toggleTheme: () => set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light' })),
}));
export default useThemeStore;
Use this store to get and set the theme like this:
const theme = useThemeStore((state) => state.theme);
Hey @abhijeetnishal, needed some help 😅 Are we using zustand to manage the theme state here instead of next-themes here because if zustand is being used along with next-themes then that would simply make it redundant.
Thank you
So should we remove next-themes completely
Hey @abhijeetnishal, needed some help 😅 Are we using zustand to manage the theme state here instead of next-themes here because if zustand is being used along with next-themes then that would simply make it redundant.
Thank you
Hey @AMS003010, you are right. We will remove next-theme and we will use zustand only, as we need state management later also so it's better to use this.
@abhijeetnishal I have made a PR. Please do review.
The changes made are:
dark
as a selector and implemented custom classes in case more themes are to be implemented in the future. Right now dark
and light
themes are implemented.
Revert PR https://github.com/abhijeetnishal/URLShortener/pull/143 The theme issue has been solved
Please do check the Link ↗️ to the demo of the application
Please do assign the gssoc label Please do assign the necessary label