ForumActif Dark Mode (JavaScript)

Go down

Solved ForumActif Dark Mode (JavaScript)

Post by Aileena on April 3rd 2018, 2:40 pm

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.


Last edited by Aileena on April 6th 2018, 5:01 pm; edited 3 times in total
avatar
Aileena
New Member

Posts : 6
Reputation : 1
Language : English, Russian

http://www.makemysimsreal.com

Back to top Go down

Solved Re: ForumActif Dark Mode (JavaScript)

Post by mpelmmc on April 3rd 2018, 3:44 pm

Hi,

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

Greetings.
avatar
mpelmmc
Helper
Helper

Male Posts : 541
Reputation : 72
Language : Spanish and English
Location : Spain

http://asistencia.foroactivo.com/forum

Back to top Go down

Solved Re: ForumActif Dark Mode (JavaScript)

Post by Ange Tuteur on April 3rd 2018, 4:17 pm

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. :rose:
avatar
Ange Tuteur
Forumaster

Male Posts : 13202
Reputation : 2918
Language : EN, JA, FR
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: ForumActif Dark Mode (JavaScript)

Post by Aileena on April 3rd 2018, 10:48 pm

@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. Heart eyes

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

Posts : 6
Reputation : 1
Language : English, Russian

http://www.makemysimsreal.com

Back to top Go down

Solved Re: ForumActif Dark Mode (JavaScript)

Post by Ange Tuteur on April 3rd 2018, 11:12 pm

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. Think
avatar
Ange Tuteur
Forumaster

Male Posts : 13202
Reputation : 2918
Language : EN, JA, FR
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: ForumActif Dark Mode (JavaScript)

Post by Aileena on April 4th 2018, 4:00 pm

Thank you so much for your help, @Ange Tuteur. I think everything works fine now Smile 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.
avatar
Aileena
New Member

Posts : 6
Reputation : 1
Language : English, Russian

http://www.makemysimsreal.com

Back to top Go down

Solved Re: ForumActif Dark Mode (JavaScript)

Post by SLGray on April 4th 2018, 7:54 pm

Are you clearing your browser's cache and history?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43665
Reputation : 3104
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Solved Re: ForumActif Dark Mode (JavaScript)

Post by Aileena on April 5th 2018, 4:25 am

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).
avatar
Aileena
New Member

Posts : 6
Reputation : 1
Language : English, Russian

http://www.makemysimsreal.com

Back to top Go down

Solved Re: ForumActif Dark Mode (JavaScript)

Post by Ange Tuteur on April 5th 2018, 4:47 am

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.
avatar
Ange Tuteur
Forumaster

Male Posts : 13202
Reputation : 2918
Language : EN, JA, FR
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: ForumActif Dark Mode (JavaScript)

Post by Aileena on April 6th 2018, 5:01 pm

@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!
avatar
Aileena
New Member

Posts : 6
Reputation : 1
Language : English, Russian

http://www.makemysimsreal.com

Back to top Go down

Solved Re: ForumActif Dark Mode (JavaScript)

Post by SLGray on April 6th 2018, 8:05 pm

Problem solved & topic archived.
Please read our forum rules:  ESF General Rules


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43665
Reputation : 3104
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum