search

Phlow / feeling-responsive

»Feeling Responsive« is a free flexible theme for Jekyll built on Foundation framework. You can use it for your company site, as a portfolio or as a blog.
http://phlow.github.io/feeling-responsive/
MIT License
901 stars 1.34k forks source link

Please add a Light/Dark toggle button #237

Closed SageofPHY6Paths closed 3 years ago

SageofPHY6Paths commented 3 years ago

An example is shown here: https://varun.ca/dark-mode/

I searched and found in many places how to implement it, but they all were related to CSS. I couldn't found how to do it using SCSS.

Can this option be added to feeling responsive? It should look like this: (the toggle icon can be just right to the CONTACT in the nav bar ) image

These days dark mode is increasingly becoming popular, so please try to add it.

For CSS these articles explain. Maybe these can be useful to implement in SCSS:

https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8

https://derekkedziora.com/blog/dark-mode-revisited

SageofPHY6Paths commented 3 years ago

It doesn't look all that complicated. Are there any problems with this feature? Like will the website become slow or something like that?

Also most websites are using a curved rectangular box as toggle. But to be consistent with this theme the toggle should probably be a rectangle with sharp edges. It should look like

⬜⬛

Maybe with a tick on whatever theme is currently active.

SageofPHY6Paths commented 3 years ago

Incase anyone knows how to do that please post here an example code. I know that feeling-responsive/_sass/_01_settings_colors.scss is the file which contains the information related to colours.

Phlow commented 3 years ago

Hello @0lelouch – I am sorry, you have to try it yourself. Or you should ask a webdesign who can design it for you. Greetings, mo.

SageofPHY6Paths commented 3 years ago

@Phlow is there any chance that this project will upgrade from foundation version 5.5.0 to the current 6.7.3? I managed to get the dark mode toggle work. But often times the navbar dropdown is not working in dark mode and is giving an error.

That error was discussed here https://github.com/foundation/foundation-sites/issues/5486 and it was apparently resolved in foundation version 6 released on 2015

SageofPHY6Paths commented 3 years ago

After trying to manually upgrade foundation myself, I understood that it looks like very hard and lengthy process. So it might not be possible for you. Ok then, I am removing the dark mode toggle for now.