Installation
- Buy plugin
- In your admin panel, go to Plugins > and click the Add New button.
- Click Upload Plugin and Choose File, then select the Plugin’s .zip file. Click Install Now.
- Click Activate to use your new Plugin right away.
Shortcodes
If the plugin is installed and activated, dark mode is already active and follows the OS settings. Additionally, there are two templates available that allow visitors to overwrite the OS settings using a switch/dropdown via shortcode in a widget position.
Switch template
To enable the Switch template, use the
[bs-dark-mode]shortcode on any widget position where you want to show the switch. The plugin will automatically detect the OS’s dark/light theme and switch accordingly when the user clicks on the switch.
Wrap shortcode in a div with Bootstrap font-size classes to adjust the size:
<div class="fs-1">
[bs-dark-mode]
</div>Dropdown template
To enable the Dropdown template, use the
[bs-dark-mode-dropdown]shortcode on any widget position where you want to show the dropdown toggler. The dropdown has options for light, dark, and auto mode.
Filters
Use filters to change classes, texts and icons in child-theme’s functions.php:
/**
* Change dark mode btn class
*/
function dark_mode_button_class() {
return "btn btn-light";
}
add_filter('bootscore/class/dark-mode/dropdown/button', 'dark_mode_button_class', 10, 2);/**
* Remove dropdown button text `visually-hidden` class
*/
function dark_mode_dropdown_button_text_class() {
return "";
}
add_filter('bootscore/class/dark-mode/dropdown/button/text', 'dark_mode_dropdown_button_text_class', 10, 2);/**
* Change dropdown button text
*/
function dark_mode_dropdown_button_text() {
return "My text";
}
add_filter('bootscore/dark-mode/dropdown/button/text', 'dark_mode_dropdown_button_text', 10, 2);
/**
* Change dark-mode dropdown-menu class
*/
function change_dark_mode_dropdown_menu_class() {
return 'dropdown-menu-end shadow';
}
add_filter('bootscore/class/dark-mode/dropdown/menu', 'change_dark_mode_dropdown_menu_class');/**
* Change dark-mode sun icon
*/
function change_dark_mode_sun_icon() {
return '<i class="fa-solid fa-lightbulb"></i>';
}
add_filter('bootscore/icon/sun', 'change_dark_mode_sun_icon');/**
* Change dark-mode moon icon
*/
function change_dark_mode_moon_icon() {
return '<i class="fa-solid fa-cloud-moon"></i>';
}
add_filter('bootscore/icon/moon', 'change_dark_mode_moon_icon');/**
* Change dark-mode auto icon
*/
function change_dark_mode_auto_icon() {
return '<i class="fa-solid fa-star-half-stroke"></i>';
}
add_filter('bootscore/icon/circle-half-stroke', 'change_dark_mode_auto_icon');/**
* Change dark-mode dropdown-item description class
*/
function change_dark_mode_dropdown_description_class() {
return 'text-danger bg-success';
}
add_filter('bootscore/class/dark-mode/dropdown/item/description', 'change_dark_mode_dropdown_description_class');Overriding templates via theme
Template files can be found within the /bs-dark-mode/templates/ plugin directory.
Edit files in an upgrade-safe way using overrides. Copy the template into a directory within your theme named bs-dark-mode keeping the same file structure but removing the templates subdirectory. Path must be your-theme/bs-dark-mode/[file].php.
The copied file will now override the bs Dark Mode template file. Change HTML as you want.
Templates that can be overridden
sc-switch.phpsc-dropdown.php
Custom HTML togglers
Instead of using predefined shortcode togglers, the plugin also supports custom HTML togglers such as checkboxes, radios and button groups.
Checkbox
Provide visitors with a simple choice between the light and dark themes with a checkbox:
<div class="dark-mode-switch form-check">
<label class="form-check-label">
<input class="bs-theme-switcher form-check-input" type="checkbox">
Dark theme?
</label>
</div>Checkbox with button
Using the checkbox toggle button.
<div class="dark-mode-switch mb-3">
<label class="btn btn-primary">
<input class="bs-theme-switcher btn-check" type="checkbox">
<span class="d-td-none"><i class="fa-solid fa-sun"></i></span><span class="d-tl-none"><i class="fa-solid fa-moon"></i></span>
</label>
</div>Radios
Option to set the theme to “auto” using radios:
<div class="dark-mode-radio">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="theme-radio" data-bs-theme-value="light">
Light
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="theme-radio" data-bs-theme-value="dark">
Dark
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="theme-radio" data-bs-theme-value="auto">
Let the system decide that
</label>
</div>
</div>Buttons
Buttons with icons in a btn-group:
<div class="dark-mode-btn btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-primary" data-bs-theme-value="auto">
<i class="fa-solid fa-display"></i>
</button>
<button type="button" class="btn btn-outline-primary" data-bs-theme-value="light">
<i class="fa-solid fa-sun"></i>
</button>
<button type="button" class="btn btn-outline-primary" data-bs-theme-value="dark">
<i class="fa-solid fa-moon"></i>
</button>
</div>Logo
The logo isn’t part of Bootstrap’s dark mode because it depends on the type of logo being used. Bootscore/Child have 2 logos stored in folder /assets/img/logo/:
logo.svgis the default logo and displayed ifdata-bs-themeis set tolightandautoas well.logo-theme-dark.svgis displayed ifdata-bs-themeis set todark.
Replace them with your own svg images.
Changelog
Currently bs Dark Mode v6.1.0
A detailed changelog can be found in the plugin’s readme.txt file. It can also be accessed in the WordPress backend by navigating to Plugins > bs Dark Mode > View details > Changelog tab.
Daniel Munoz Rey
With the Dark mode plugin, how can I have dark mode as dark as default (not light) without clicking in the button?
Thank you.
Basti
Yes, that is possible thinking the other way. Make a dark theme as default and the dark-theme as light.
1. Dequeue plugin dark-theme.css as described in the article above
2. Add CSS to make body dark
body { background-color: var(--bs-gray-dark) !important; color: var(--bs-light) !important; }3. Copy header.php and footer.php to child theme.
Change classes in these files from bg-light to bg-dark.
Change class navbar-light to navbar-dark.
Add class text-light to footer. Now you should have a dark theme.
4. Create you new light-theme by using the dark-theme body class.
body.dark-theme { color: var(--bs-dark) !important; background-color: #fff !important; } .dark-theme .bg-dark { background-color: var(--bs-light) !important; } .dark-theme .navbar-dark .navbar-nav .nav-link { color: rgba(0,0,0,.55); } .dark-theme .text-light { color: #212529!important; }5. Change icons in switch
.form-switch .form-check-input::before { content: "\f185 "; } .form-switch .form-check-input::after { content: "\f186"; }Daniel Munoz Rey
Cannot this just be an option in the plugin?… deciding the default?… like activating the button to be dark on load?… just a thought… Thank you.
Basti
That would mean that the cookie is set and will be removed when the switch is clicked. At the moment I don’t see any reason why that should be the case.
Daniel Munoz Rey
OK… I just like more the dark mode than the light mode and would like that as default or option in admin area, but I understand… Thank you Basti.
Basti
All plugins here, except bS Isotope do not have any backend settings. The only thing what the dark mode do is setting a cookie, add a class to body and keep both until you switch it off. With the body class, you can do whatever you want.
Daniel Munoz Rey
Could it be done by adding a parameter to the shortcode?… juts a thought:
[bs-dark-mode default="dark"]
[bs-dark-mode default="light"]
Daniel.
Basti
Maybe yes, but I don’t really see the point. You have to adjust your themes anyway. So, make your default theme dark and change to the light one by clicking the switch. The easiest and best method.
Nathan Hardwick
Hi Basti – I’ve just tried this method with the updated theme and plugin but it no longer works for everything. My widget areas are still retaining the original light theme backgrounds. Any ideas on how to fix? Thanks.
Nathan Hardwick
I’ve found the the issuse is that in tag there is data-bs-theme=”light” but can’t seem to find how to override this? I added data-bs-theme=”dark” to me header templates but that doesn’t work – it just reverts back to data-bs-theme=”light”
Basti
Hi Nathan,
I have to check this on your site. Please send WP admin and ftp here https://bootscore.me/private-info-form/. Which theme and plugin version are you using?
Asking this because dark-mode has been refactored and uses included dark-mode since Bootstrap 5.3.
Pavel Lazarev
Hi, I know, that’s too late to answer, but if it can be useful for anybody, why not…
I wrote a simple script for Jquery that simulates pressing a button only once and writes it to cookie:
if(!cookieStorage.getCookie(‘dark_mode_custom’)) {
$(‘body’).addClass(‘dark-theme’);
$(‘#dark-mode’).addClass(‘active’);
$(‘#dark-mode’).prop(‘checked’, true);
cookieStorage.setCookie(‘dark_mode_custom’, ‘true’, 2629000000, ‘/’);
cookieStorage.setCookie(‘bS-Dark-Mode’, ‘true’, 2628000000, ‘/’);
}
Basti
Hi Pavel,
it’s never too late, thank you for this script. Maybe we’ll add it to the documentation. Changed the
’to'and works fine.if (!cookieStorage.getCookie('dark_mode_custom')) { $('body').addClass('dark-theme'); $('#dark-mode').addClass('active'); $('#dark-mode').prop('checked', true); cookieStorage.setCookie('dark_mode_custom', 'true', 2629000000, '/'); cookieStorage.setCookie('bS-Dark-Mode', 'true', 2628000000, '/'); }Ersin Koray Gonce
where to paste this code?
Basti
To child’s custom.js. But this code won’t work with new dark-mode anymore, it was for the old version.
Daniel Munoz Rey
The main point is for clients who are not developers so they can decide easily the default mode, in a way your plugin would have more options which is always good… but I will try to do it the developer way… Thank you.
Daniel.
Basti
Everything here is for developers and not for end users. Clients should pay you to develop a site and customize plugins.
Bart Boerendans
So for i really enjoy these plugins. Maybe you can add a feature in an upcoming release? Just fire a Google analytics event if a user enabled Dark mode. Would love to see how many users just change to dark mode.
Basti
Hello Bart,
tracking will not be part of the project, but you can setup your own. Try something like this:
$('#dark-mode').click(function () { console.log('testing google anayltics custom event'); //you should first check if ga is set if (typeof ga !== 'undefined') { ga('send', 'event', 'Dark-Mode', 'Switch is checked'); } //check if _gaq is set too if (typeof _gaq !== 'undefined') { _gaq.push(['_trackEvent', 'Dark-Mode', 'Switch is checked']); } });https://stackoverflow.com/questions/18696998/ga-or-gaq-push-for-google-analytics-event-tracking
Bryan
You can actually do it purely with Google Tag Manager, and that seems preferable. No need to add the additional JS to your site and maintain it with future changes. Plus, if you’re using GA4 or UA, I don’t believe ga and _gaq.push work for them. Just use click event triggers and attach them to tags (two triggers, two tags).
1. Enable the Click ID and Click Classes variables in the Variables link in the sidebar of GTM (“Configure” button under Built-In Variables and select them).
2. Go to Triggers and click on New. Click on Trigger Configuration and then select All Elements under the Click section. Select the “Some Clicks” radio button and add two fields to match the items below. Repeat this step once more for the second set of triggers.
`Click ID ‘EQUALS’ dark-mode` and
`Click Classes ‘EQUALS’ form-check-input btn-toggle position-relative active`
`Click ID ‘EQUALS’ dark-mode` and
`Click Classes ‘DOES NOT EQUAL’ form-check-input btn-toggle position-relative active`
Name the triggers whatever is easiest for you to remember. Mine are `Clicks – Dark Mode Switch Off` and `Clicks – Dark Mode Switch On`.
3. Add the Tags as GA4 Events and attach the above triggers to each one (be sure to use your GA4 Measurement ID as the Configuration Tag). The Event Name is what gets sent to Analytics, so name them to make it easier for yourself. I named my events `dark_mode_switch_dark` and `dark_mode_switch_light` to indicate which one was switched on — easy enough to tell in Analytics.
4. Go to Analytics and create a custom dimension to be able to save these new events. Without the custom dimension, you’ll only be able to see them in the Realtime overview. Simply name it what you want and input the event name from step 3 as the Event Parameter. Do it for both events.
Bart
Is it an idea to add the modalbox in darkmode too for a future version?
Basti
Hi Bart,
there is a new version with a dark theme to modal. Download the plugin via the dashboard https://bootscore.me/account/downloads/ and update via the plugin uploader.
Please check
Modal title
Manuel Lamer
Hello, how is it possible to use another file as a logo for dark mode? For example, „logo-light.svg“ and „logo-dark.svg“.
Because it doesn’t work as it should with filters for multicolor logos and it’s an image file in dark mode instead of an SVG file. Thank you for your help.
Basti
Hello Manuel,
1. Remove logo filter in dark-theme.css line 70 to 73
2. Add jQuery to js/custom.js in child-theme or in any .js file you want
// Change dark-mode logo. Use full URL jQuery(document).ready(function ($) { // Toggle logo on click dark-mode switch $(".btn-toggle").click(function () { if ($(this).is(":checked")) { $('.logo').attr('src', 'https://yourdomain/wp-content/themes/bootscore-5-child/img/logo/logo-dark-theme.svg'); } else { $('.logo').attr('src', 'https://yourdomain/wp-content/themes/bootscore-5-child/img/logo/logo-light-theme.svg'); } }); // Keep logo via body class if ($('body').hasClass("dark-theme")) { $('.logo').attr('src', 'https://yourdomain/wp-content/themes/bootscore-5-child/img/logo/logo-dark-theme.svg'); } });That should work
Manuel Lamer
Hello, thank you for the quick answer. However, I still have one problem: when I switch to dark mode with the switch, it changes the logo. However, if I switch to another side in dark mode, only the alt-Tag comes from the logo.
Basti
HeIlo Manuel,
it seems that the path to the second part “// Keep logo via body class” is not correct. But I cannot say something without checking your site. Please share a link to your site, if you do not want to share public, you can send me the link via the contact form https://bootscore.me/support/
Manuel Lamer
Oh dear, it was the path to the file that was incorrect. How embarrassing =)
It works fine now, thanks for your quick and easy help, really great.
Basti
👍 You‘re welcome
Bart
How to achieve that if no cookie is placed (user did not switch manually), choose the darkmode switch based on the device mode. Maybe with a media query like https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme?
That if the user uses dark mode on the device, bs-darkmode is automatically enabled too.
Basti
Hi Bart,
basically yes, but you need a cookie to keep body class and remove it if you switch to light mode. In case to provide both options, theme selected by OS and switching manually, the plugin has to be rewritten with a new approach. Please check here https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/
ramis can
Dear admin, thank you for this nice plugin. Is it possible to change the colors of links (a) only when switching to dark mode? I tried a few things, it didn’t work. Thank you in advance for your help.
Basti
Hi ramis,
of course, that’s possible.
1. If you haven’t done already, update theme and child to latest version as described here https://bootscore.me/blog/bootstrap/bootstrap-source-in-theme/.
2. Dequeue
dark-theme.cssby adding the code snippet in article above to functions.php.3. Add following CSS to
_bscore_custom.scss.dark-theme a { color: red; }ramis can
Thank you so much. Worked. Have a nice day.
ramis can
Dear Manager; Thank you again for this great theme.
I am using wordpress.org/plugins/w3-total-cache/ on my wordpress website. I wonder what should I do to prevent the dark-mode plugin and the selected preferences from being cached? Thank you in advance for your help.
Basti
Hi ramis,
caching files is what a caching plugin do. Why do you want to exclude dark-mode files from caching?
ramis can
You are right. to block the cache; That’s why I asked if there is a cookie or other method used by the plugin. While the w3 total cache plugin is active, it does not work when you return to the same page and switch to light mode. that is, the cache shows which one (dark or light) is cached. If it is cached while dark mode is active; light doesn’t work when I switch to view.
Basti
Hi ramis,
a link to your site will be very helpful to reproduce the issue.
Plugin uses a cookie to store the body class to prevent flickering while reloading the page. Once loaded, all CSS and JS files are cached, that’s what a caching plugin do.
Here on bootscore.me Autoptimize plugin is used for caching https://wordpress.org/plugins/autoptimize/. This does exactly the same as W3 Total Cache. Please check if the issue is on bootscore.me the same as on your site in the same use case.
Here, all files are cached. I’m sure there is a field in Backend where you can exclude files from caching in plugin settings. But usually you do not need that.
ramis can
Nice person; Thank you for your help and interest. I understood what you said. I will define cookie information and block it. Thanks again, regards.
ramis can
Also, because we use https; warning in browsers. samesite=none and the secure event. I changed this line to:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite
cookieStorage.setCookie(‘bS-Dark-Mode’, ‘true;secure;SameSite=Lax’, 2628000000, ‘/’);
Good day, regards.
Basti
Hi ramis,
I am absolutely sure that you do not have to change anything in the dark mode or caching plugin.
That looks for me that you are trying to setup a reCaptcha on your computers localhost.
Derrick Boddie
Dear admin, The plugin is not working on mobile devices like iPhones. It looks like the javascript is not running on mobile devices. Any idea how I can fix this problem?
Basti
Hi Derrick,
we need a link to your project to check this. If you do not want to share public, simply send a mail through the support form https://bootscore.me/support/.
Additionally, it would be very helpful if you could provide the version numbers of both the theme and plugin. Both of them received an update last week (see https://bootscore.me/blog/bootstrap/bootscore-5-3-0/). It’s possible that you may be using the new plugin version with an earlier theme version, or vice versa.
Thank you!
Murat Esgin
Hello Basti. Thank you again for the new version of bootscore theme. Now I’m trying the 5.3 version trial on localhost. I set the link color #00bc8c in the dark theme. In light theme, I want to #d13241. However, even though I made additions to the _bscore_variables.scss file under the scss folder, there is no change when I refresh the theme. Without using the _bscore_custom.scss file. In summary, I want to change the default value of link colors on bootstrap. I’ll be glad, if you help me.
Basti
Hi Murat,
please post this in a new discussion because this has nothing to do with the plugin, it’s a general Bootstrap thing. Sharing code snippets on GitHub is much more better than here in the comments. Will help you out there.
Murat Esgin
I am sorry. Comments were closed in the 5.3 version news in the blog section. I also wrote here. Ok, I’m going to the discussion section. Thank you very much. Enjoy your work.