(Feature Request) Addition of button for Dark Mode toggle

Dimitris-Provatas commented 1 year ago

The idea is to simply have a dark_mode.css file in the same directory as the ArchWikiOffline.css and a button in each page to toggle between light and dark mode. I am not suggesting to try and copy what the live wiki site does, but rather just append some lines of code to each file.

I have extracted and written the CSS file needed and a JS function to do that with no page reloads. The code also saves the preference to local storage, so it will persist over closing and opening the browser. Unfortunately, I don't have the time currently to get into the project and make a pull request. I will provide the CSS and JS below for anyone who wants to undertake this.

*.html

<head>
  ...
  <!-- Link to the stylesheet location -->
  <link rel="stylesheet" type="text/css" href="dark_mode.css" id="darkModeLink">
  ...
</head>

...
<!-- The button that will toggle the mode -->
<button id="toggleDarkLightModeButton" onclick="toggleDarkLightMode()"></button>
...

<!-- Make the script defer to make sure the elements exist -->
<!-- Another way make sure the elements are loaded is document.addEventListener('DOMContentLoaded', () => {}) -->
<script defer>
// reference to the link tag
const darkModeLinkTag = document.getElementById('darkModeLink');

// load the preference of the user
darkModeLinkTag.disabled = localstorage.getItem('wantsDarkMode') == 'true';

// reference to the toggle button
const toggleDarkLightModeButton = document.getElementById('toggleDarkLightModeButton');
// set the initial text of the button based on the state of the tag
toggleDarkLightModeButton.innerText = darkModeLinkTag.disabled ? "Dark Mode" : "Light Mode";

function toggleDarkLightMode() {
  // check for the current state of the link tag
  if (darkModeLinkTag.disabled) {
    // enable the link tag and update the button text to say that by clicking it you will go to light mode
    darkModeLinkTag.disabled = false;
    toggleDarkLightModeButton.innerText = "Light Mode";
  } else {
    // disable the link tag and update the button text to say that by clicking it you will go to dark mode
    darkModeLinkTag.disabled = true;
    toggleDarkLightModeButton.innerText = "Dark Mode";
  }

  // store the preference of the user
  localstorage.setItem('wantsDarkMode', darkModeLinkTag.disabled ? 'false' : 'true');
}
</script>

dark_mode.css

body
{
    color: white;
    background-color: black;
}
.sidebar-toc
{
    background-color: #161617;
}
#footer, .mw-footer li
{
    color: #bbbbbb;
}
body.skin-vector div.mw-page-container, #content
{
    background-color: black;
}
#content pre:not([class*="CodeMirror"]), #content code, #content tt
{
    background-color: #131314;
}
.wikitable, .wikitable > * > tr > th
{
    background-color: #0d0d0c;
}
td[data-sort-value="1"]
{
    background-color: #f44 !important;
}
td[data-sort-value="3"]
{
    background-color: #ff4 !important;
}
td[data-sort-value="5"]
{
    background-color: #4d4 !important;
}
td[data-sort-value]
{
    color: #2a2a2a !important;
}
#content table, #content h1, #content h2, #content h3, #content h4, #content h5, #content pre, #content code, #content tt
{
    color: #cccccc;
}
.catlinks
{
    background-color: #181819;
}

dawidpotocki commented 1 year ago

Why wouldn't you just use @media (prefers-color-scheme: dark)?

Dimitris-Provatas commented 1 year ago

Did not think of that tbh... Haven't tested it, but if it works then it would be a much better and simpler solution! :smiley:

fadkeabhi commented 1 year ago

@Dimitris-Provatas is this issue still open. If yes I would like to work on it.

Dimitris-Provatas commented 1 year ago

Yes, I never got around on implementing this. Go ahead and work on in if you like. If you need any more input from my side, feel free to ping me!

Good coding and have fun!

lahwaacz / arch-wiki-docs

(Feature Request) Addition of button for Dark Mode toggle #32