ForumActif Dark Mode (JavaScript)
3 posters
Page 1 of 1
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:
My dark theme code:
I thought maybe someone could help. Thanks in advance.
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
Aileena- Forumember
- Posts : 37
Reputation : 1
Language : English, Russian
Re: ForumActif Dark Mode (JavaScript)
Hi,
You could read this topic where this question was already answered
https://help.forumotion.com/t155127-dark-mode-theme-button
Greetings.
You could read this topic where this question was already answered
https://help.forumotion.com/t155127-dark-mode-theme-button
Greetings.
Guest- Guest
Re: ForumActif Dark Mode (JavaScript)
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 :
and add this line of JS after it :
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.
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.
Re: ForumActif Dark Mode (JavaScript)
@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.
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.
Aileena- Forumember
- Posts : 37
Reputation : 1
Language : English, Russian
Re: ForumActif Dark Mode (JavaScript)
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.
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.
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);
}
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.
Re: ForumActif Dark Mode (JavaScript)
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.
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.
Aileena- Forumember
- Posts : 37
Reputation : 1
Language : English, Russian
Re: ForumActif Dark Mode (JavaScript)
Are you clearing your browser's cache and history?
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: ForumActif Dark Mode (JavaScript)
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).
Aileena- Forumember
- Posts : 37
Reputation : 1
Language : English, Russian
Re: ForumActif Dark Mode (JavaScript)
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.
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.
Re: ForumActif Dark Mode (JavaScript)
@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!
Aileena- Forumember
- Posts : 37
Reputation : 1
Language : English, Russian
Re: ForumActif Dark Mode (JavaScript)
Problem solved & topic archived.
|
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Similar topics
» dark mode code
» [JUST A TOPIC] ForumActif Features
» Dark mode for Forumotion forums
» Admin Control Panel Dark Mode
» Dark/Light mode plugin not working
» [JUST A TOPIC] ForumActif Features
» Dark mode for Forumotion forums
» Admin Control Panel Dark Mode
» Dark/Light mode plugin not working
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum