Dark Theme added

[shreyaswikriti]

Issue Description

Added functionality of Theme-switching between Light Extention and Dark extension. Please include a summary of the issue.

• Added a toggle button on Navbar that allows Users to change themes (dark or light) as per their preference.

• Light mode is the previous website theme while a new dark theme is added.

• whatever users prefer theme, that theme will get saved even after closing the browser. Also, they can change themes anytime.

Fixes # (issue) Fixes #1431

Changes Made

• Added a Js file and two CSS files for light and dark mode changes.
• Done some changes in Bootstrap CSS files.

Please describe the changes that you made. Before

• Please check if the PR fulfills these requirements

• [x] PR is descriptively titled and links the original issue above
• [x] Before/after screenshots (if this is a layout change)
• [ ] Details of which platforms the change was tested on (if this is a browser-specific change)
• [x] Context for what motivated the change (if this is a change to some content)

[shreyaswikriti]

Hii @patricoferris, I solved the problem of flicker pages. Thank you so much for your tutorial and time. Also, I apologize for the inconvenience caused by the two different commits. I'll update the PR soon. Again thank you.

[shreyaswikriti]

Hii @patricoferris, I have resolved the issue of the flicker of the web pages while loading. Kindly check the PR.

[patricoferris]

Thanks @shreyaswikriti, this is starting to get in shape :tada:. A few more points and questions:

• Afaict, the toggle button is rendered always as light mode before the JS updates it based on local storage. The problem with this is if the user has set dark-mode then when they arrive at the page there is an awkward and attention-drawing slide of the slider. It would be good to mitigate this. I think there are probably two possible solutions: (a) remove the toggle and replace it with a button that doesn't change based on the theme, for example a simple toggle theme button (it should be obvious to the user what theme they are using!) or (b) a slightly more complicated approach would be to have the JS programmatically add in the button once the local storage has been checked and we know what theme to select.
• On the homepage there are two svgs that barely show up for the dark-mode because they are dark themselves so they'll need to be changed or given a light background or something (this might be the case for other pages, it would be good to check this).
• Have you run an accessibility audit on the changes? Some of the contrasts don't look strong enough to meet the WCAG standards.

This is a fairly big change so this may take a while to get it into a mergeable state but thank you for persevering.

[shreyaswikriti]

For the first point, I would propose using this kind of button. This kind of button does not cause any delay in changing state while page uploading also I think it's more suitable for the OCaml website since the toggle button is kind of animated and we have static pages. Happy to hear your thoughts on it. For the second problem, We have to replace those two svgs with light color. And as far as I know, only the home page has this dark mode svgs that is causing the problem. I have run the WAVE tool on the changes and found no contrast errors.