change themes or skins with bootstrap-4

Question

I have an usecase where on button toggle, i need to change my skins/themes. I am not sure how to properly achieve them in bootstrap 4(have gone through their docs). My skins/themes changes involve btn-colors, fonts, background-color, hover-color, box-shadow and active-color. I have one idea: To create sass functions for these property and return them based on css-selector. Like I could have dark and light selectors attached to it, and get proper values returned.(Inspired from Angular Material). Or is there any other way to properly do it?

sunsetsurf sunsetsurf · Accepted Answer · 2018-04-17T11:17:22

One direction you could go is JS/jQuery. This isn't pointing to Bootstrap 4 but can be modified to do so.

I did find a related question with SASS you might find relevant, switching bootstrap theme dynamically for the entire website .

The basic flow is...

Give your link to your CSS an ID:

<link href="css/bootstrap.min.css" rel="stylesheet" id="ref-css">

You could use a checkbox toggle:

<input type="checkbox" id="toggle-event" data-toggle="toggle" data-on="Light" data-off="Dark">

Write some jQuery to toggle the css file on change:

  $(function() {
      $('#toggle-event').change(function() {
        if ($(this).prop('checked')) {
          $("#ref-css").attr("href", "https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/united/bootstrap.min.css");
        }else{
          $("#ref-css").attr("href", "https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/slate/bootstrap.min.css");
        }
      })
    })

Here's the complete HTML & jQuery so you have something to work with. It also has a dropbox in the top right corner to choose from various styles:

jQuery(function($) {
  $('#theme-button ul a').click(function() {
    if ($(this).attr('name') != 'current') {
      var urlbeg = 'https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/'
      var urlend = '/bootstrap.min.css'
      var themeurl = urlbeg + $(this).text().toLowerCase() + urlend;
      var link = $('link[rel="stylesheet"][href$="/bootstrap.min.css"]').attr('href', themeurl);

      $('#theme-button ul a[name="current"]').text($(this).text());
    }
  });
});

$(function() {
  $('#toggle-event').change(function() {
    if ($(this).prop('checked')) {
      $("#ref-css").attr("href", "https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/united/bootstrap.min.css");
    } else {
      $("#ref-css").attr("href", "https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/slate/bootstrap.min.css");
    }
  })
})

<html lang="en">

<head>
  <!-- To switch themes, go to https://www.bootstrapcdn.com/bootswatch/?theme=0 -->
  <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" id="ref-css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
  <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
</head>

<body>
  <div class="navbar navbar-default navbar-static-top">
    <div class="container-fluid">
      <a class="navbar-brand">Bootswatch Theme Changer</a>
      <div class="nav navbar-nav pull-right">
        <li id="theme-button" class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Change Theme <b class="caret"></b></a>
          <ul class="dropdown-menu ">
            <li><a href="#" name="current">Cerulean</a></li>
            <li class="divider"></li>
            <li><a href="#" name="cerulean">Cerulean</a></li>
            <li><a href="#" name="cosmo">Cosmo</a></li>
            <li><a href="#" name="cyborg">Cyborg</a></li>
            <li><a href="#" name="darkly">Darkly</a></li>
            <li><a href="#" name="flatly">Flatly</a></li>
          </ul>
        </li>
      </div>
    </div>
  </div>

  <a href="#" class="btn btn-primary">Sample Btn</a>
  <br><br>
  <input type="checkbox" id="toggle-event" data-toggle="toggle" data-on="Light" data-off="Dark">

  <div class="box effect1">
    <h1>Lorem ipsum</h1>
  </div>

  <p>Vestibulum sit amet ipsum lacus. Aliquam nisl enim&hellip; tristique tempus placerat at, posuere in lectus. Suspendisse potenti cras molestie, risus a enim convallis vitae luctus libero lacinia. Nulla vel magna sit amet dui <a href='#'>lobortis</a>    commodo vitae vel nulla. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Aliquam tincidunt velit sit amet <a href='#'>ante hendrerit</a> tempus. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium
    sem orci aliquet mauris. </p>
  <div class="box">
    <p>Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Vestibulum sit amet ipsum lacus… Suspendisse potenti. Nulla auctor eleifend 23rd of May turpis consequat pharetra.</p>
  </div>
  <p>Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, <a href='#'>iaculis pretium</a> sem orci aliquet mauris. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Curabitur consectetur; faucibus
    nisl ac varius. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Nulla lobortis tempus commodo. </p>
  <h2>Curabitur consectetur</h2>
  <p>Nulla lobortis tempus commodo? Suspendisse potenti. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh (iaculis pretium sem orci aliquet mauris). Suspendisse potenti H<sub>2</sub>0. </p>
  <ul>
    <li>Sed dapibus, lectus sit amet adipiscing egestas</li>
    <li>Sed dapibus, lectus sit amet adipiscing egestas</li>
    <li>Vestibulum sit amet ipsum lacus</li>
  </ul>
  <h2>Purus lectus venenatis urna</h2>
  <p>Nulla lobortis tempus commodo? Nulla lobortis tempus <strong>commodo</strong>. Fusce ac sodales <code>.generate()</code> magna. Donec tempus tempus tellus, ac lacinia turpis mattis ac. Maecenas sit <q cite='http://www.heydonworks.com'>amet tellus nec mi gravida posuere</q>    non pretium magna. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Nulla vel magna sit &mdash; amet dui lobortis commodo &mdash; vitae vel nulla. </p>

</body>

</html>

change themes or skins with bootstrap-4

1 Answers