a smol miscellanea

Switching Dark/Light Mode for Socials

I've started the most basic of tinkering on my blog, and thanks to Jedda's wonderful post detailing how to implement a dark/light mode toggle on Bearblog, I too can switch modes!

Satisfied for approximately five minutes, I then decided I wanted my social links in the footer to be represented by icons. These needed to be visible no matter which mode the blog is shown in, and that meant modifying the JavaScript written by Jedda. Bearing in mind that I know very little JavaScript, and what I did know, I've forgotten, I nevertheless blithely made an attempt.

In Settings -> Header and footer directives -> Head Directive I added the script unchanged apart from a comment noting what it does, and a link to who wrote it/where I found it.

Unchanged Head Directive

<script>
// Dark/Light Mode Respect Preference - https://notes.jeddacp.com/darklight-mode-toggle-on-bearblog/
  (function() {
    const savedTheme = localStorage.getItem('theme');
    const htmlElement = document.documentElement;
    let initialTheme;

    if (savedTheme) {
      initialTheme = savedTheme;
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      initialTheme = 'dark';
    } else {
      initialTheme = 'light';
    }

    htmlElement.style.setProperty('color-scheme', initialTheme);
  })();
</script>

For the footer I had to do some fiddling, and testing, and for all I know this doesn't actually work, and I just think it does. I also muddled myself up with the naming, so for reference: The "darkicons" show up in Light Mode, and "lighticons" are visible in Dark Mode.

Obviously make sure to change the {link to social account ##} part with the actual link to your social media account you're linking, and replace the {social icon ##} part with the SVG code.

The Light/Dark Mode Social Icons Code

<span id="darkicons"> 
<a href="https://{link to social account #1}"><svg {social icon #1} /></svg></a> <a href="https://{link to social account #2}"><svg {social icon #2} /></svg></a> <a href="https://{link to social account #3}"><svg {social icon #3} /></svg></a></span><span id="lighticons">
<a href="https://{link to social account #1}"><svg {social icon #1} /></svg></a> <a href="https://{link to social account #2}"><svg {social icon #2} /></svg></a> <a href="https://{link to social account #3}"><svg {social icon #3} /></svg></a></span>

To implement the colour switch of the social icons I added a few lines of code to the original. I've commented the modifications I made, and I'm sure anyone who knows JavaScript will immediately see my code is bad, and possibly has redundancies. This was trial and error by me, and I take no responsibility for it, because as mentioned, I don't know JavaScript!

<script>
// Dark/Light Mode Toggle  - https://notes.jeddacp.com/darklight-mode-toggle-on-bearblog/
  function switchMode(mode) {
    const htmlElement = document.documentElement;
    const preferDarkLink = document.getElementById('preferdark');
    const preferLightLink = document.getElementById('preferlight');
// The following two lines are my additions
    const preferDarkIcons = document.getElementById('darkicons'); 
    const preferLightIcons = document.getElementById('lighticons');
    if (mode === 'dark') {
      htmlElement.style.setProperty('color-scheme', 'dark');
      preferDarkLink.style.display = 'none';
      preferLightLink.style.display = 'inline-block';
// The following two lines are my additions
      preferDarkIcons.style.display = 'none';
      preferLightIcons.style.display = 'inline-block';
      localStorage.setItem('theme', 'dark');
    } else {
      htmlElement.style.setProperty('color-scheme', 'light');
      preferDarkLink.style.display = 'inline-block';
      preferLightLink.style.display = 'none';
// The following two lines are my additions
      preferDarkIcons.style.display = 'inline-block';
      preferLightIcons.style.display = 'none';
      localStorage.setItem('theme', 'light');
    }
  }

  document.addEventListener('DOMContentLoaded', () => {
    const currentAppliedTheme = document.documentElement.style.getPropertyValue('color-scheme');
    if (currentAppliedTheme === 'dark') {
        document.getElementById('preferdark').style.display = 'none';
        document.getElementById('preferlight').style.display = 'inline-block';
// The following two lines are my additions
        document.getElementById('darkicons').style.display = 'none';
        document.getElementById('lighticons').style.display = 'inline-block';
    } else {
        document.getElementById('preferdark').style.display = 'inline-block';
        document.getElementById('preferlight').style.display = 'none';
// The following four lines are my additions
        document.getElementById('lighticons').style.display = 'none';
        document.getElementById('darkicons').style.display = 'inline-block';
        document.getElementById('lighticons').style.display = 'none';
        document.getElementById('darkicons').style.display = 'inline-block';
    }
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
    prefersDark.addEventListener('change', (event) => {
      if (!localStorage.getItem('theme')) {
        if (event.matches) {
          switchMode('dark');
        } else {
          switchMode('light');
        }
      }
    });
  });
</script>

This post is licensed under CC BY-NC-SA 4.0

#BearBlog #Blog Post