'How to dynamically change themes after clicking a drop down menu of themes with vanilla javascript

enter image description hereI'm using bootstrap for the interface of the website I'm developing. I am also planning to integrate the bootswatch themes to my site. I have created a dropdown menu containing the different themes of bootswatch. My problem is how can I switch themes when I click one of the themes in the dropdown menu? Note that I want to do this with raw JavaScript without any special framework

javascripthtmlcssbootstrap-4etldata-warehousedimensional-modelingstar-schemastar-schema-datawarehouse


Solution 1:[1]

Set your link with an id:

<link rel="stylesheet" id="dynamicCSS" type="text/css" href="mystyle1.css" />

Apply an onchange event to your select list:

<select id="myDropdownList" onchange="swapCSS()">
  <option>mystyle1.css</option>
  <option>mystyle2.css</option>
  <option>mystyle3.css</option>
</select>

Add your Javascript function:

const swapCSS = function()
{
  let selection = document.getElementById("myDropdownList").selectedOptions[0];
  document.getElementById("dynamicCSS").href = selection.value;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Matthew M.

Related Questions