ForumActif Dark Mode (JavaScript)

Hello, I was wondering if someone could help me.

A while ago, I asked for a code to change my Forumactif forum to dark mode by default. @Ace 1 kindly provided the code (thank you very much!) However, the code never worked for me and then the support forum got closed. Now I am trying to address this problem again.

I tried many things, but nothing worked. I managed to impove it slightly, but I am still having a problem with the light theme. The problem is that it is displaying the dark theme background colour in the body of the forum when I switch to light:
Picture

My current default theme code:

Code:

// Dark Mode Default
(function() {
var footer = '.footer-links.left',
      customCSS = '#page-body { background:#333; }';

  my_setcookie('fae_light-switch-mode', 'light', true);
  if (window.sessionStorage && window.sessionStorage.DarkDefault) {
    $('head').append('<style type="text/css" id="dark-mode-css">' + window.sessionStorage.DarkDefault + customCSS + '</style>');
  } else {
    $.get('https://raw.githubusercontent.com/SethClydesdale/forumactif-edge/master/css/dark-mode/dark-mode.min.css', function(d) {
      $('head').append('<style type="text/css" id="dark-mode-css">' + d + '</style>');
      if (window.sessionStorage) window.sessionStorage.DarkDefault = d;
    });
  }
})();

My dark theme code:

Code:

(function() {
  window.fae_lightSwitchMode = my_getcookie('fae_light-switch-mode') || 'dark';
 
  document.write('<style type="text/css">#fae_light-switch-container{margin:6px 0}#fae_light-switch-label{font-weight:700;vertical-align:middle}#fae_light-switch{background-color:rgba(0,0,0,.25);vertical-align:middle;display:inline-block;position:relative;height:26px;width:56px;border-radius:20px;cursor:pointer;overflow:hidden}#fae_light-switch>input{display:none}#fae_light-switch>div{background-color:rgba(255,255,255,.5);position:absolute;top:3px;left:3px;height:20px;width:20px;border-radius:20px;transition:.4s;font-size:13px;font-weight:700;line-height:22px}#fae_light-switch>div:before{content:"ON";margin-left:-24px;color:transparent;transition:.4s}#fae_light-switch>div:after{content:"OFF";margin-left:30px;color:rgba(255,255,255,.5);transition:.4s}#fae_light-switch>input:checked+div{background-color:#FFF;left:33px}#fae_light-switch>input:checked+div:before{color:#FFF}#fae_light-switch>input:checked+div:after{color:transparent}</style>');
 
  var footer = '.footer-links.left',
      customCSS = '#page-body { background:#333; }',
      light = '#pagebody { background:#ffffff; }',
 
      cookie = my_getcookie('fae_light-switch'),
      rgb,
      button,
      container,
 
      changeTheme = function (cookie) {
        var button = document.querySelector('#fae_light-switch input');
 
        if ((button && button.checked) || cookie == 'on') {
          my_setcookie('fae_light-switch', 'on', true);
 
          if (window.sessionStorage && window.sessionStorage.faeLightSwitch) {
            $('head').append('<style type="text/css" id="fae_light-switch-css">' + window.sessionStorage.faeLightSwitch + customCSS + '</style>');
          } else {
            $.get('https://raw.githubusercontent.com/SethClydesdale/forumactif-edge/master/css/dark-mode/' + fae_lightSwitchMode + '-mode.min.css', function (d) {
              $('head').append('<style type="text/css" id="fae_light-switch-css">' + d + customCSS + '</style>');
 
              if (window.sessionStorage) {
                window.sessionStorage.faeLightSwitch = d;
              }
            });
          }
 
        } else {
          var css = document.getElementById('fae_light-switch-css');
 
          my_setcookie('fae_light-switch', 'off', true);
 
          if (css) {
            document.head.removeChild(css);
          }
        }
      };
 
  cookie && changeTheme(cookie);
 
  $(function() {
    if (!my_getcookie('fae_light-switch-mode')) {
      rgb = window.getComputedStyle(document.body, null).getPropertyValue('background-color').replace(/rgb\(|\)|\s/g, '').split(',');
      fae_lightSwitchMode = Math.round(((parseInt(rgb[0]) * 299) + (parseInt(rgb[1]) * 587) + (parseInt(rgb[2]) * 114)) /1000) > 125 ? 'dark' : 'light';
 
      my_setcookie('fae_light-switch-mode', fae_lightSwitchMode, true);
    }
 
    footer = document.querySelector(footer);
 
    if (footer) {
      button = document.createElement('LABEL');
      button.id = 'fae_light-switch';
      button.innerHTML = '<input type="checkbox" ' + (cookie == 'on' ? 'checked="true"' : '') + '/><div></div>';
      button.firstChild.onchange = changeTheme;
 
      container = document.createElement('DIV');
      container.id = 'fae_light-switch-container';
      container.innerHTML = '<span id="fae_light-switch-label">' + (fae_lightSwitchMode == 'dark' ? 'Dark Mode : ' : 'Light Mode : ') + '</span>';
 
      container.appendChild(button);
      footer.appendChild(container);
    }
  });
}());

I thought maybe someone could help. Thanks in advance.

Hi,

You could read this topic where this question was already answered
https://help.forumotion.com/t155127-dark-mode-theme-button

Greetings.

Hello @Aileena,

Try disabling the default dark mode script Ace provided. Once you've done that, go to JavaScript codes management and edit the [FA EDGE] ALL.JS javascript file. Find the script comment for dark mode :

Code:

/* -- 11. dark mode -- */

and add this line of JS after it :

Code:

if (!my_getcookie('fae_light-switch')) {
  /* turn on the light switch by default */
  my_setcookie('fae_light-switch', 'on', true);
}

Save the script and then clear your cookies. (you can use this link on your forum) Once you've done this, refresh the page and dark mode should be turned on by default.

The little line of code I had you add checks if the light switch has been turned on or off before. If it has, it'll return the value 'on' or 'off', meaning we wont force dark mode on because the user has set their preference. If it hasn't been turned on or off before, it'll return 'null', in which case dark mode will be turned on by default.

You can also change your forum theme over to a dark version via Theme Management in the FAE Control Panel, but importing the dark theme WILL overwrite your old CSS, so I'd recommend backing it up if you ever plan on doing that. The method above should work nicely, nonetheless.

If any issues, let us know. Have a good day.

@Ange Tuteur thank you so much, Ange! I am so pleased to hear from you, I thought you were not active at all anymore :c

The theme now works fine, thank you very much! The only thing is that the switch now says Light mode on when the dark mode is actually applied. Is there any way to change that?

Thanks in advance.

@mpelmmc Thanks for your reply, but it's not what I was looking for.

You're welcome. I stop by once in awhile when I'm not too busy.

You're right ; I didn't notice that. Change the JS snippet I gave you to the following instead.

Code:

if (!my_getcookie('fae_light-switch')) {
  /* turn on the light switch by default */
  my_setcookie('fae_light-switch', 'on', true);
  my_setcookie('fae_light-switch-mode', 'dark', true);
}

You'll need to clear your cookies when you update the script once again.

It adds the second cookie which indicates the light switch mode; 'dark' or 'light'. Since you want it for dark mode, I set it to 'dark'. Light mode is actually for dark themes -- I think the auto-detection got fooled when we forced dark mode on without setting the mode type.

Thank you so much for your help, @Ange Tuteur. I think everything works fine now I am still hoping that FMDesign reopens and you will release that award system someday. In any case, all the best to you. Thanks for the help

EDIT: No, I was wrong. The background is white in dark mode - https://i.imgur.com/sSbYJRU.png (cookies cleared). I am afraid I need help again @Ange Tuteur. Right after I clean the cookies it seems to be fine, but then it breaks.

Are you clearing your browser's cache and history?

Yes, @SLGray. It happens after a couple of page reloads. So I clear my cookies, everything works well, then I open the forum again and the background is gone (as pictured).

Hi again,

The dark theme CSS is saved to session storage to reduce network requests, so I'm assuming it might be an issue with that, maybe. Could you answer a few questions ?

1. What browser are you using ?
2. What device are you using ? (Desktop, mobile, etc..)

From what I've tested (currently using chrome) I haven't been able to replicate the issue.

@Ange Tuteur, I gave it a couple of days of testing, after clearing the cookies for several times. I think it works, I don't know what the issue was, as I cleared the cookies before. Thanks!