nkss-dev / node-modules

The front-end repository for NKSS
https://nkss.getpsyched.dev
GNU General Public License v3.0
2 stars 2 forks source link

Add light mode dark mode toggle #8

Open GetPsyched opened 1 year ago

GetPsyched commented 1 year ago

A theme toggle will be a good to have.

tymnec commented 1 year ago

This typically involves adding CSS styles for both the light mode and dark mode, and using JavaScript to toggle between them using the switch. Another option is to use a plugin, such as the "Dark Mode Toggle" WordPress plugin, which allows you to easily add a dark mode toggle switch button to your website . It is also possible to use CSS media queries to dynamically switch between light and dark mode based on the user's system preferences. CSS frameworks like Bootstrap also offer built-in support for light and dark color modes.

tymnec commented 1 year ago

Would you like to assign this to me?

GetPsyched commented 1 year ago

Hey, @tymnec! I don't think we would need any significant amount of JavaScript in our project since we use TailwindCSS for styling. All we need to do is add a new palette, and then use the dark:some-colour variant on each of our elements.

Ref: https://github.com/NIT-KKR-Student-Support-System/website/blob/e9d43a21b1dbbb7b01af33d5ade85a916c8e7478/tailwind.config.js#L19-L29