Solved flickering bug for dark mode and added script to head

[fredtux]

Description

There was a flickering issue when dark mode was selected and the page was refreshed or opened.

I've added a function that creates a style element with the theme colors and can switch from lightmode to darkmode. I've used this as a source: StackOverflow

In order to fully resolve the flickering issue, the script must be included in the head element

Motivation and Context

Flickering issue described here: Github issue

How Has This Been Tested?

The changes can be tested by running index.html

Types of changes

• [x] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

• [x] My code follows the code style of this project.

[coliff]

Thanks for the PR! It's great that the flickering stops with this fix. I think it's important that the dark-mode styles should be stored in a separate CSS file though and not hard-coded within the JavaScript. Users may wish to define different shades of grey and change the color different components for dark mode etc so I'm keen for this to load a CSS. Do you think you could adapt this PR to load a 'dark-mode' CSS file?

[fredtux]

I've amended the PR. Now the js file must be included right after loading bootstrap. The drawback of this approach is that the user will get the occasional flickering if the dark-mode.css file wasn't loaded on time but it won't be every time like in the original project.

[lgtm-com[bot]]

This pull request introduces 1 alert when merging 2d00c890f81429c2f3d733c37c6b3edf8a0e455f into 00e0ed339aca6938063f87ce398055259755410e - view on LGTM.com

new alerts:

• 1 for Missing variable declaration

[coliff]

heya @fredtux - thanks for the work on this PR. By adding <link rel="preload" href="dark-mode.css" as="style"> in the head it removes all white-page/flickering issue!

However, I think users may choose to put the dark-mode CSS rules within their main style sheet - or they might have the CSS in the projects root or in a /css/ or /assets/css/ directory etc... but right now this PR requires the CSS to be called 'dark-mode.css' and be in the projects root.

I think we should add the data attribute data-theme="dark" if dark-mode is on, like we have with v1 of this. I think that would make things simpler and would be less code too. That way users are free to load the CSS as they wish. What do you think?

[fredtux]

Hi! Sorry for the late response. If an attribute is used, then it will have to be added from the backend directly in the html code to avoid flickering, which from what I understand is currently used by most people to bypass the flickering problem. I generally prefer to not add attributes from the backend as it is mostly a hack, not a solution. But what you're saying is true, the user will have to change the css file path, which makes my solution not work out of the box. I guess both solutions have shortcomings, it's for you to decide whether to use this or not.

[Jerakin]

If I am not missing something it doesn't look like this solution works, at least not with modified .css

Here is how it looks when I enable it. (This is how it should look) files

But after I refresh the webpage it looks like this (a simply F5 will do).

This last image is how it pretty much looks like without my edits to the .css file.