The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

ForumActif Dark Mode (JavaScript)

3 posters

Go down

Solved ForumActif Dark Mode (JavaScript)

Post by Aileena 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
Forumember

Posts : 37
Reputation : 1
Language : English, Russian

Back to top Go down

Solved Re: ForumActif Dark Mode (JavaScript)

Post by Guest 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
Guest
Guest


Back to top Go down

Solved Re: ForumActif Dark Mode (JavaScript)

Post by Ange Tuteur 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:
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: ForumActif Dark Mode (JavaScript)

Post by Aileena 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
Forumember

Posts : 37
Reputation : 1
Language : English, Russian

Back to top Go down

Solved Re: ForumActif Dark Mode (JavaScript)

Post by Ange Tuteur 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
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: ForumActif Dark Mode (JavaScript)

Post by Aileena 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 ForumActif Dark Mode (JavaScript) 2764

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
Forumember

Posts : 37
Reputation : 1
Language : English, Russian

Back to top Go down

Solved Re: ForumActif Dark Mode (JavaScript)

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

Are you clearing your browser's cache and history?


ForumActif Dark Mode (JavaScript) Slgray10

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

Male Posts : 51520
Reputation : 3523
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: ForumActif Dark Mode (JavaScript)

Post by Aileena 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
Forumember

Posts : 37
Reputation : 1
Language : English, Russian

Back to top Go down

Solved Re: ForumActif Dark Mode (JavaScript)

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

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: ForumActif Dark Mode (JavaScript)

Post by Aileena 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
Forumember

Posts : 37
Reputation : 1
Language : English, Russian

Back to top Go down

Solved Re: ForumActif Dark Mode (JavaScript)

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

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


ForumActif Dark Mode (JavaScript) Slgray10

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

Male Posts : 51520
Reputation : 3523
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

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