explainpowershell Suggestion: Support for Dark Mode

I assume this repo doesn't get checked much given the age of issues and the last activity, but just in case — Basically what the title says. Similar to its influence, explainshell.com, obviously. I assume this would be fairly trivial to implement.

Or, even do something like what Notepad++ does, i.e. programatically invert the colors (if it doens't look terrible):

HTML

<html>
  <head>
    <!-- etc -->
    <style id="inverter" media="screen">html { filter: invert(100%) }
        * { background-color: inherit }
        img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%); background-color:#000 }
    </style>
  </head>
  <body>
    <!-- main content -->
    <label for="themer">
      dark theme: <input type="checkbox" id="themer" class="vh">
      <span aria-hidden="true"></span>
    </label>
  </body>
</html>

JavaScript

/* Switch and persist theme */
(function () {
  function CSSSupported (property, value) {
    var prop = property + ':',
        el = document.createElement('test'),
        mStyle = el.style;
    el.style.cssText = prop + value;
    return mStyle[property];
  }

  var checkbox = document.getElementById('themer');
  var inverter = document.getElementById('inverter');

  if (!CSSSupported('filter', 'invert(100%)')) {
    checkbox.parentNode.hidden = true;
    return;
  }

  function darkTheme(media) {
    inverter.setAttribute('media', media);
    inverter.textContent = inverter.textContent.trim();
    localStorage.setItem('darkTheme', media);
  }

  checkbox.addEventListener('change', function () {
    darkTheme(this.checked ? 'screen' : 'none');
  });

  window.addEventListener('DOMContentLoaded', function () {
    if ('filter' in document.body.style) {
      if (localStorage.getItem('darkTheme') === 'screen') {
        checkbox.click();
      }
    }
  });
}());

Feb 21 '25 17:02 TMA-2

Hi! Thanks for your issue!

Feb 21 '25 17:02 github-actions[bot]

Hi Jon,

Thanks, I agree, fair suggestion. And you are right, this repo has not received much attention lately. This should not be too hard to do though. Seeing your suggestions, would you be open to providing a PR? I may not be able to get to this myself just now because of a home renovation project.

Kind regards,

Jos

Van: Jon D. @.> Verstuurd: vrijdag, februari 21, 2025 6:24:06 p.m. Aan: Jawz84/explainpowershell @.> CC: Subscribed @.***> Onderwerp: [Jawz84/explainpowershell] Suggestion: Support for Dark Mode (Issue #98)

I assume this repo doesn't get checked much given the age of issues and the last activity, but just in case — Basically what the title says. Similar to its influence, explainshell.com, obviously. I assume this would be fairly trivial to implement.

Or, even do something like what Notepad++https://notepad-plus-plus.org/ does, i.e. programatically invert the colors (if it doens't look terrible):

HTML

dark theme:

JavaScript

/* Switch and persist theme */ (function () { function CSSSupported (property, value) { var prop = property + ':', el = document.createElement('test'), mStyle = el.style; el.style.cssText = prop + value; return mStyle[property]; }

var checkbox = document.getElementById('themer'); var inverter = document.getElementById('inverter');

if (!CSSSupported('filter', 'invert(100%)')) { checkbox.parentNode.hidden = true; return; }

function darkTheme(media) { inverter.setAttribute('media', media); inverter.textContent = inverter.textContent.trim(); localStorage.setItem('darkTheme', media); }

checkbox.addEventListener('change', function () { darkTheme(this.checked ? 'screen' : 'none'); });

window.addEventListener('DOMContentLoaded', function () { if ('filter' in document.body.style) { if (localStorage.getItem('darkTheme') === 'screen') { checkbox.click(); } } }); }());

— Reply to this email directly, view it on GitHubhttps://github.com/Jawz84/explainpowershell/issues/98, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AGJ5E5LNUB6WIZJPCA3GAQT2Q5OLHAVCNFSM6AAAAABXTW76OGVHI2DSMVQWIX3LMV43ASLTON2WKOZSHA3DSNRRGUYTMNY. You are receiving this because you are subscribed to this thread.Message ID: @.***>

[TMA-2]TMA-2 created an issue (Jawz84/explainpowershell#98)https://github.com/Jawz84/explainpowershell/issues/98

I assume this repo doesn't get checked much given the age of issues and the last activity, but just in case — Basically what the title says. Similar to its influence, explainshell.com, obviously. I assume this would be fairly trivial to implement.

Or, even do something like what Notepad++https://notepad-plus-plus.org/ does, i.e. programatically invert the colors (if it doens't look terrible):

HTML

dark theme:

JavaScript

/* Switch and persist theme */ (function () { function CSSSupported (property, value) { var prop = property + ':', el = document.createElement('test'), mStyle = el.style; el.style.cssText = prop + value; return mStyle[property]; }

var checkbox = document.getElementById('themer'); var inverter = document.getElementById('inverter');

if (!CSSSupported('filter', 'invert(100%)')) { checkbox.parentNode.hidden = true; return; }

function darkTheme(media) { inverter.setAttribute('media', media); inverter.textContent = inverter.textContent.trim(); localStorage.setItem('darkTheme', media); }

checkbox.addEventListener('change', function () { darkTheme(this.checked ? 'screen' : 'none'); });

window.addEventListener('DOMContentLoaded', function () { if ('filter' in document.body.style) { if (localStorage.getItem('darkTheme') === 'screen') { checkbox.click(); } } }); }());

— Reply to this email directly, view it on GitHubhttps://github.com/Jawz84/explainpowershell/issues/98, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AGJ5E5LNUB6WIZJPCA3GAQT2Q5OLHAVCNFSM6AAAAABXTW76OGVHI2DSMVQWIX3LMV43ASLTON2WKOZSHA3DSNRRGUYTMNY. You are receiving this because you are subscribed to this thread.Message ID: @.***>

Feb 21 '25 23:02 Jawz84

Hi Jon,

Thanks, I agree, fair suggestion. And you are right, this repo has not received much attention lately. This should not be too hard to do though. Seeing your suggestions, would you be open to providing a PR? I may not be able to get to this myself just now because of a home renovation project.

Kind regards,

Jos …

I'm unfortunately not much of a developer — my area is PowerShell (big surprise), but I haven't had time to parlay that knowledge into HTML/CSS/JS or even C#/.NET, so I'm somewhat doubtful I'd be able to implement this myself. However, I can certainly look at the repo and (likely with some Copilot help) possibly figure something simple out, because this is the exact sort of project I'd love to contribute to.

I only discovered your project yesterday when I also discovered explainshell.com and literally thought, "someone should really do this for PowerShell! ...Oh!" You have sites like regexr and regex101 which graphically explain regular expressions, and while the scope of bash and PS is much larger, the same principle applies. So, awesome job!

Feb 22 '25 21:02 TMA-2