Loading...

bS Dark Mode

This plugin adds a dark mode to bootScore. Click the switch in the navbar to activate.

Installation

  1. Buy plugin
  2. In your admin panel, go to Plugins > and click the Add New button.
  3. Click Upload Plugin and Choose File, then select the Plugin’s .zip file. Click Install Now.
  4. Click Activate to use your new Plugin right away.

Usage

Use shortcode

[bs-dark-mode]

to show the switch where you want.

How it works

By clicking the switch, which is driven by a checkbox, two things happen:

  1. The class .dark-theme is added to the body
  2. A cooke is set which keeps the body class and switch checkbox checked until uncheck the switch or deleting cookies. The dark mode remains active during page reload until it is switched off.

With the body class it is possible to create a new color scheme.

body.dark-theme {
    color: var(--bs-light);
    background-color: var(--bs-dark);
}

Bootstrap uses !important in utilities.

.bg-light {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

To override we need the !important rule as well.

.dark-theme .bg-light {
    background-color: var(--bs-dark) !important;
}

Dark theme

A theme is an individual thing. This means that this dark theme fits here for bootScore, but maybe not work with your theme creation. The body class .dark-theme can be used to create completely new color schemes, for example to change colors from red to green.

Dequeue dark-theme.css

If the plugin dark-theme.css does not match your theme, you can deactivate it with following snippet in functions.php:

// Dequeue dark-theme style
function dequeue_bs_dark_mode_style(){
    wp_dequeue_style( 'dark-theme' );
}
add_action( 'wp_enqueue_scripts', 'dequeue_bs_dark_mode_style', 999 );

Now create your own CSS by using the .dark-theme class.

Multicolor logo

The default dark-theme.css uses filter: brightness(100); to switch the logo to light color. This doesn’t work if you want to use a multicolor logo.

Add following CSS to your child-theme to disable the filter:

/* Disable filter for multicolor logo */
.dark-theme .logo {
  filter: none;
}

Create a light version of your logo, name it for example logo-light.svg and copy it to your child img/logo/logo-light.svg.

Copy following jQuery to your child custom.js and change URL in lines 7, 9 and 15 to your logo path. Use absolute URL.

// 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-child-main/img/logo/logo-light.svg');
    } else {
      $('.logo').attr('src', 'https://yourdomain/wp-content/themes/bootscore-child-main/img/logo/logo.svg');
    }
  });

  // Keep logo via body class
  if ($('body').hasClass("dark-theme")) {
    $('.logo').attr('src', 'https://yourdomain/wp-content/themes/bootscore-child-main/img/logo/logo-light.svg');
  }

});

Dark-theme as default

If you want to set the dark-theme as default, copy following jQuery to your child custom.js. Dark-theme is activated on first load and users can switch dark-mode off by clicking the switch (thanks to Pavel Lazarev for this script).

jQuery(document).ready(function ($) {

  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, '/');
  }

});

35 Comments on “bS Dark Mode”

  • Daniel Munoz Rey

    says:

    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

      says:

      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

        says:

        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

        says:

        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

          says:

          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

        says:

        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

          says:

          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

        says:

        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.

    • Pavel Lazarev

      says:

      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

        says:

        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, '/');
        }
        
  • Daniel Munoz Rey

    says:

    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

      says:

      Everything here is for developers and not for end users. Clients should pay you to develop a site and customize plugins.

  • Bart Boerendans

    says:

    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

      says:

      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

      says:

      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

    says:

    Is it an idea to add the modalbox in darkmode too for a future version?

    • Basti

      says:

      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


  • Manuel Lamer

    says:

    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

      says:

      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

        says:

        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

          says:

          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/contact/

          • Manuel Lamer

            says:

            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.

  • ramis can

    says:

    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

      says:

      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.css by 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

        says:

        Thank you so much. Worked. Have a nice day.

  • ramis can

    says:

    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

      says:

      Hi ramis,

      caching files is what a caching plugin do. Why do you want to exclude dark-mode files from caching?

  • ramis can

    says:

    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

      says:

      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

        says:

        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.

        • Basti

          says:

          Hi ramis,

          I am absolutely sure that you do not have to change anything in the dark mode or caching plugin.

          cookieStorage.setCookie(‘bS-Dark-Mode’, ‘true;secure;SameSite=Lax’, 2628000000, ‘/’);

          That looks for me that you are trying to setup a reCaptcha on your computers localhost.

Leave a Comment

Cookies help us deliver our services. By using our services, you agree to our use of cookies. More Information