Simple console commands to add a bootswatch theme switcher to top of page

BootswatchThemeSwitcher.js

// I switched a basic bootstrap template site over to using bootswatch,
// but I wanted to swap the themes on it so i could see some of the colors and
// font sizes as i still had some items from the old theme in there.
// There are probably lots of ways to do this, but this is how I did it

// Go to https://www.bootstrapcdn.com/bootswatch and then you can run this on the
// page with all of the cdn links to copy and use with hashes, etc
//var vals = [...document.querySelectorAll('input[id*="html_"]')].map(x => [x.id.replace('html_', ''), x.value]).reduce(
//    (acc, val) => (acc[val[0]] = val[1], acc), {}
//);
//console.log(JSON.stringify(vals))
//the above will give you the values to copy/paste below for the theme list,
// ,but note i have added 'media="none"' to the end of each link. you can add
// that to the code above, i simply did a search and replace as this media
// swapping was a later revision.

// start copying below this line
var themes = {
    "cerulean": "<link href=\"https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/cerulean/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-b+jboW/YIpW2ZZYyYdXczKK6igHlnkPNfN9kYAbqYV7rNQ9PKTXlS2D6j1QZIATW\" crossorigin=\"anonymous\" media=\"none\">",
    "cosmo": "<link href=\"https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/cosmo/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-9/chHLTCcBULgxOFoUyZXSgEF0uFXs+NrQqzcy/DXqcR+Sk8C1l4EgmUXAEzTb92\" crossorigin=\"anonymous\" media=\"none\">",
    "cyborg": "<link href=\"https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/cyborg/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-GKugkVcT8wqoh3M8z1lqHbU+g6j498/ZT/zuXbepz7Dc09/otQZxTimkEMTkRWHP\" crossorigin=\"anonymous\" media=\"none\">",
    "darkly": "<link href=\"https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/darkly/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-Bo21yfmmZuXwcN/9vKrA5jPUMhr7znVBBeLxT9MA4r2BchhusfJ6+n8TLGUcRAtL\" crossorigin=\"anonymous\" media=\"none\">",
    "flatly": "<link href=\"https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/flatly/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-mhpbKVUOPCSocLzx2ElRISIORFRwr1ZbO9bAlowgM5kO7hnpRBe+brVj8NNPUiFs\" crossorigin=\"anonymous\" media=\"none\">",
    "journal": "<link href=\"https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/journal/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-vjBZc/DqIqR687k5rf6bUQ6IVSOxQUi9TcwtvULstA7+YGi//g3oT2qkh8W1Drx9\" crossorigin=\"anonymous\" media=\"none\">",
    "litera": "<link href=\"https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/litera/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-Gr51humlTz50RfCwdBYgT+XvbSZqkm8Loa5nWlNrvUqCinoe6C6WUZKHS2WIRx5o\" crossorigin=\"anonymous\" media=\"none\">",
    "lumen": "<link href=\"https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/lumen/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-VMuWne6iwiifi8iEWNZMw8sDatgb6ntBpBIr67q0rZAyOQwfu/VKpnFntQrjxB5W\" crossorigin=\"anonymous\" media=\"none\">",
    "lux": "<link href=\"https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/lux/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-smnSwzHqW1zKbeuSMsAM/fMQpkk7HY11LuHiwT8snL/W2QBoZtVCT4H5x1CEcJCs\" crossorigin=\"anonymous\" media=\"none\">",
    "materia": "<link href=\"https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/materia/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-uKLgCN8wZ+yo4RygxUNFhjywpL/l065dVTzvLuxys7LAIMmhZoLWb/1yP6+mF925\" crossorigin=\"anonymous\" media=\"none\">",
    "minty": "<link href=\"https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/minty/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-HqaYdAE26lgFCJsUF9TBdbZf7ygr9yPHtxtg37JshqVQi6CCAo6Qvwmgc5xclIiV\" crossorigin=\"anonymous\" media=\"none\">",
    "pulse": "<link href=\"https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/pulse/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-t87SWLASAVDfD3SOypT7WDQZv9X6r0mq1lMEc6m1/+tAVfCXosegm1BvaIiQm3zB\" crossorigin=\"anonymous\" media=\"none\">",
    "sandstone": "<link href=\"https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/sandstone/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-ztQCCdmKhYHBDMV3AyR4QGZ2/z6veowJBbsmvDJW/sTuMpB9lpoubJuD0ODGSbjh\" crossorigin=\"anonymous\" media=\"none\">",
    "simplex": "<link href=\"https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/simplex/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-6ge4b1Lr1zrvyGvm5pdAkc3NMa97XYhFPBWsZsT6O3eOU+hqURR1bQEMm11Grf3a\" crossorigin=\"anonymous\" media=\"none\">",
    "sketchy": "<link href=\"https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/sketchy/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-NkI/Nlr1DZ5rUXWWdnuZb97FQRgCCcwC66DC+HUCY0oVx6BgBHUfPcwL1vwp93JZ\" crossorigin=\"anonymous\" media=\"none\">",
    "slate": "<link href=\"https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/slate/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-idNH3UIOiZbCf8jxqu4iExnH34y5UovfW/Mg8T5WfNvoJolDvknoNqR69V2OexgF\" crossorigin=\"anonymous\" media=\"none\">",
    "solar": "<link href=\"https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/solar/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-iDw+DjLp94cdk+ODAgTY4IZ6d9aaRpG9KHr168TPxrfQ9wv/DTVC+cWyojoxjHBT\" crossorigin=\"anonymous\" media=\"none\">",
    "spacelab": "<link href=\"https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/spacelab/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-sIQOcNYer0kt7oTyFe/YrGzKMFP/qxsJbXTxq0/uiZQgpwXwEu41sVz2M61lWbai\" crossorigin=\"anonymous\" media=\"none\">",
    "superhero": "<link href=\"https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/superhero/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-rvwYMW9Z/bbxZfgxHQEKx6D91KwffWAG+XnsoYNCGWi/qL1P9dIVYm1HBiHFqQEt\" crossorigin=\"anonymous\" media=\"none\">",
    "united": "<link href=\"https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/united/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-Uga2yStKRHUWCS7ORqIZhJ9LIAv4i7gZuEdoR1QAmw6H+ffhcf7yCOd0CvSoNwoz\" crossorigin=\"anonymous\" media=\"none\">",
    "yeti": "<link href=\"https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/yeti/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-chJtTd1EMa6hQI40eyJWF6829eEk4oIe7b3nNtUni7VxA3uHc/uIM/8ppyjrggfV\" crossorigin=\"anonymous\" media=\"none\">"
}

//add all of the themes but with the media set to none, this makes switching themes faster vs just swapping out the live link html
Object.keys(themes).forEach(x=>$('head').append(themes[x]));

//tack a div on top to put the theme links in, i picked the alert-light because of the initial
//theme i was starting with since it was grey and kind of easy to see. you don't really
//need one at all, but i also thought it was nice to see how these items changed as i didn't
//use any a tags or alert classes on my page anyway
$('body').prepend(`<div class="alert-light text-center" style="width:100%" id="themepicker">`);

//you can simply use object.keys in the map down below to put the links in,
//but when i did this it was a little bit too long so i just split it as below
//$('#themepicker').append(Object.keys(themes).map(x=> `<a href="#" id="${x}">${x}</a>`).join("&bull;&nbsp;"));
var yourArray = Object.keys(themes);
var m = Math.floor(yourArray.length/2);
var [leftSide,rightSide] = [yourArray.slice(0,m), yourArray.slice(m,yourArray.length)];
$('#themepicker').append(leftSide.map(x=> `<a href="#" id="${x}">${x}</a>`).join("&bull;&nbsp;"));
$('#themepicker').append('<br/>');
$('#themepicker').append(rightSide.map(x=> `<a href="#" id="${x}">${x}</a>`).join("&bull;&nbsp;"));

//function to swap the theme, basically disable all of the bootstrap css, then enable the one
// with the matching id for the button that was clicked. in an older version of this
// i simply replaced the outerHTML with the new link html, but this way speeds up theme switching
// as the themes are preloaded and you are just swapping them. better for my purposes anyway.
var swaptheme = (e) => {
    document
        .querySelectorAll('link[href*="bootstrap.min.css"]')
        .forEach(n => n.media = 'none')
    document
        .querySelectorAll(`link[href*="${e.target.id}"]`)
        .forEach(n => n.media = '')
}

//add event for clicks, originally i put this in the anchors, but seems like chrome protects
//you from adding in line script on the buttons so i did this instead. understandable as this
//*is* kind of janky, but it does work. =)
Object.keys(themes).forEach(x=>document.getElementById(x).addEventListener("click", swaptheme))
//stop copying above this line, then you can just paste into a console
//alternatively, you can simply copy/paste the lines into the console:
//var gist = 'https://gist.githubusercontent.com/royashbrook/2cf0f71859ee28dd9aedfc7aad6bad60/raw';
//fetch(gist).then(x=>x.text()).then(x=>eval(x));
//please note, never do this unless you 100% know what's at the other end of that fetch. =)