[ADD] - Toggle for Dark/Light mode.

[VerzatileDev]

Description:

Currently the Repository is permanently set to "Dark Mode", which might not be everyone's go to version that they would like to see as well as it might intervene with their "Dark-Reader" and or other plugins, which would make it even darker than it should be limiting the accessibility of the user reading the documentation.

Proposed Solution:

I propose, that a toggle would be implemented globally to the Website, which would indicate if it is " Light " or "Dark Mode" and upon that do the required changes.

Currently there is a way to implement the toggle as shown in the example Here, which uses the built in theme example of a button and changes affected such as

<button class="btn js-toggle-dark-mode">Preview dark color scheme</button>

<script>
const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');

jtd.addEvent(toggleDarkMode, 'click', function(){
  if (jtd.getTheme() === 'dark') {
    jtd.setTheme('light');
    toggleDarkMode.textContent = 'Preview dark color scheme';
  } else {
    jtd.setTheme('dark');
    toggleDarkMode.textContent = 'Return to the light side';
  }
});
</script>

The following would produce the following:

The code should be Split up so that it can be called globally as well as the changes reflected each time page is changed (Saving the current mode) and displaying it on the button.

Alternatives:

• None.

Additional Context

-None.

[VerzatileDev]

References:

https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#toggling-themes

https://github.com/just-the-docs/just-the-docs/pull/1086/

https://github.com/VerzatileDev/just-the-docs/tree/automatic-color-schemes-addressing-changes

[VerzatileDev]

A branch is now available that adds the feature see #78

[VerzatileDev]

78 Closes the following issue.