I've been tackling the challenge of creating a style switcher for my website. Through utilizing .append() and if and else statements, I managed to make it work successfully. Take a look at the code below:
HTML
<select name="active_style" id="lol" class="dropdownselect" >
<option value="default" selected="selected">Default</option>
<option value="dark" selected="selected">Dark</option>
</select>
Javascript
$(document).ready(function() {
var item = window.localStorage.getItem('active_style');
$('select[name=active_style]').val(item);
$('select[name=active_style]').change(function() {
window.localStorage.setItem('active_style', $(this).val());
});
if (item == "dark") {
$("head").append('<link rel="stylesheet" type="text/css" id="gdgt-dark" href="LINK");
};
});
While the current setup functions properly, it has a slight drawback. Upon page load, there is a delay in loading the CSS which leads to a momentary display of the default styling to the user. Is there a more efficient way to preload the CSS before rendering the page for a quicker and smoother experience?
Your insights and assistance would be greatly appreciated.