Allow user to select from pre-determined colour themes

[n-maido]

We propose adding a feature that let's the user (portfolio owner) choose from different colour palettes for their portfolio (e.g. warm-light, warm-dark, cool-light, cool-dark).

[carlosricov]

Hey @wrussell1999 can u assign us to this? Ty!

[carlosricov]

Nvm on this issue @wrussell1999, this feature might conflict with the dark mode proposed by another group. Sorry for the trouble!

[wrussell1999]

I'd recommend working with that team and splitting the work up. I think your stuff still has value along side a dark theme! @carlosricov

[wrussell1999]

Combine this here https://github.com/MLH-Fellowship/portfolio-template/issues/55

[ShrillShrestha]

@carlosricov, yeah we can work together. I am also waiting on my team to review and suggest some changes. Meanwhile, I have encountered a bug. So maybe we can work on this together.

[carlosricov]

@ShrillShrestha Sounds good. My team and I are relatively unexperienced with web dev so any pointers would be much appreciated. For now we're going to add a bio section to the portfolio, but we'll come back to this after we implement that.

[ShrillShrestha]

@carlosricov So, right now I have a toggle button that switches on and off from the dark mode. Assume that, we are in dark mode. Then, we can see the bug when we visit a link(by clicking on resources in the portfolio e.g.sprint1.md page) and come back using the browser's back arrow <-. The toggle button indicates dark mode but the page is not in dark mode.

Note: When the toggle button is on, the js function associated with the button add a darkmode class which make the dark mode happen

This is how dark mode actually looks like:

but if you click the link Flash Card Generator on the project section and use the browser's <- (arrow) button to go back to the previous page:

So, the second image is showing the issue. In order to make it work, I have to toggle it back to off and then on.

P.S. Currently, dark mode is not inherited from other pages.

You can find the code for the dark mode at https://github.com/ShrillShrestha/portfolio-template/tree/dark-mode.

[carlosricov]

@ShrillShrestha

Ah gotcha. I watched this video this topic. The guy explains that in order to stay in your color mode after refreshing/leaving your page, you have to create and reflect that in a javascript file.

https://www.youtube.com/watch?v=AaVxSc11t3Y&t=33s

[ShrillShrestha]

Thanks, @carlosricov, I will take a look at it.

[dev2919]

I love the idea. You can also take a look at this video @ShrillShrestha https://www.youtube.com/watch?v=rXuHGLzSmSE&ab_channel=Fireship

[ShrillShrestha]

Thanks, @dev2919. Using local storage might do the trick. 😄