Making a toggle switch button for dark theme/light theme constant in the footer

Question

Making a toggle switch button for dark theme/light theme constant in the footer

bhuwan1998 opened this issue a year ago · comments

I want to create a toggle switch using a component and add it to the footer so its easier to switch between the themes. Can someone suggest anyway it can implemented in this gatsby theme

Konstantin Münster · Answer 1 · Mon Jun 19 2023 14:11:46 GMT+0800 (China Standard Time)

Hey @bhuwan1998, you'd have to override the Footer component which you find here: https://github.com/konstantinmuenster/gatsby-theme-portfolio-minimal/blob/main/gatsby-theme-portfolio-minimal/src/components/Footer/index.tsx

You can learn more about theme shadowing and overriding components in Gatsby's documentation: https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/shadowing

Bhuwan Bansal · Answer 2 · Tue Jun 20 2023 07:52:00 GMT+0800 (China Standard Time)

Hey @bhuwan1998, you'd have to override the Footer component which you find here: https://github.com/konstantinmuenster/gatsby-theme-portfolio-minimal/blob/main/gatsby-theme-portfolio-minimal/src/components/Footer/index.tsx

You can learn more about theme shadowing and overriding components in Gatsby's documentation: https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/shadowing

Thanks I will try that

Hans Pasaribu · Answer 3 · Wed Oct 18 2023 10:42:29 GMT+0800 (China Standard Time)

Anyone got the code for this implementation? I know how to shadow it, but I don't know all the files needed to change to make this work, I'm new to JS and react

Konstantin Münster · Answer 4 · Sun Oct 22 2023 19:56:56 GMT+0800 (China Standard Time)

@hnsmchl If you want to include the toggle in the Footer, you'd only need to shadow and adapt the Footer component 👍