"Bootswatch Theme Picker - Auto Updated - Version 2.3.2"
Bootstrap 2.3.2 Snippet by detain

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Bootswatch Theme Picker - Auto Updated - Version 2.3.2</h2> <p>I was looking to create a theme picker that always updated when Bootswatch updated their files. So I created this gem. Now when bootswatch updates this will update.</p> </div> </div> <div class="container"> <div class="row"> <div class="form-group theme-control"> <label for="text" style="float:left;margin-right:5px; padding-top:5px; font-weight: normal;">Theme <a href="#" class="tip" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="You can preview snippets using a theme from Bootswatch"><span class="glyphicon glyphicon-question-sign"></span></a></label> <div class="input-group"> <select class="form-control" name="bootstrap-theme" id="theme_chooser" data-toggle="selectpicker"></select> </div> </div> </div> </div>
.input-group { position: relative; display: table; border-collapse: separate; }
// Custom String.Format used for quick text replacement String.format = function() { var str = arguments[0]; for (var i = 1; i < arguments.length; i++) { str = str.replace(RegExp("\\{" + (i - 1) + "\\}", "gm"), arguments[i]); } return str; }; // Version of Bootstrap var version = 0; $(document).ready(function() { // Get stylesheet that contains Bootstrap Theme var $link = $('head link[rel="stylesheet"]').eq(0); // Set Bootstrap Version var strip = { 0: '//maxcdn.bootstrapcdn.com/bootstrap/', 1: '//netdna.bootstrapcdn.com/twitter-bootstrap/', 2: '/css/bootstrap.min.css', 3: '/css/bootstrap-combined.min.css' } version = $link.attr('href'); $.each(strip, function(key, val) { version = version.replace(val, ''); }); // Bind Theme Chooser on Change event to load selected Bootstrap Theme $('#theme_chooser').on('change', function(event) { var $selected = $(this).find('option:selected'); $link.attr('href', $selected.val()); }); }); $(document).ready(function() { console.log(version); var bootswatchAPI = 'http://api.bootswatch.com/' + version.split('.')[0], optionTemplate = '<option value="{0}">{1}</option>'; var boostrapTheme = { cssMin: '//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css'.replace('/latest/', '/'+version+'/'), name: 'Bootstrap' } $('#theme_chooser').append(String.format(optionTemplate, boostrapTheme.cssMin, boostrapTheme.name)); $.getJSON(bootswatchAPI, function(data) { var themes = data.themes; themes.forEach(function(value, index) { var cssCdn = value.cssCdn.replace('/latest/', '/'+version+'/'); $('#theme_chooser').append(String.format(optionTemplate, cssCdn, value.name)); }); }) })

Related: See More


Questions / Comments: