// function to initialise the css
function init_color_scheme_css($id, $mode) {
if ($("#"+$id)) $("#"+$id).remove(); // remove existing id
$("#"+$id+"-"+$mode).attr( {
"data-href-light": $("#"+$id+"-light").attr("href"), // store the light CSS url
"data-href-dark": $("#"+$id+"-dark").attr("href"), // store the dark CSS url
"data-color-scheme": $mode, // store the mode, so that we don't re-initalise
"media": "all", // drop the media filter
"id": $id // rename the id (drop the `-{mode}` bit)
} );
$other = ($mode == 'dark') ? 'light' : 'dark';
$("#"+$id+"-"+$other).remove();
}
// function to toggle the CSS
function toggle_color_scheme_css($id, $mode) {
// grab the new mode css href
$href = $("#"+$id).data("href-"+$mode); // use `.data()` here, leverage the cache
// set the CSS to the mode preference.
$("#"+$id).attr( {
"href": $href,
"data-color-scheme": $mode,
});
}
// toggle button click code
$("#css-toggle-btn").bind("click", function() {
// get current mode
// don't use `.data("color-scheme")`, it doesn't refresh
$mode = $("#css").attr("data-color-scheme");
// test if this is a first time click event, if so initialise the code
if (typeof $mode === 'undefined') {
// not defined yet - set pref. & ask the browser if alt. is active
$mode = 'light';
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) $mode = 'dark';
init_color_scheme_css("css", $mode);
init_color_scheme_css("css-code", $mode);
// `init_color_scheme_css()` any other CSS
}
// by here we have the current mode, so swap it
$new_mode = ($mode == 'dark') ? 'light' : 'dark';
toggle_color_scheme_css("css", $new_mode);
toggle_color_scheme_css("css-code", $new_mode);
// `toggle_color_scheme_css()` any other CSS
// Saving user's preference to the localStorage
localStorage.setItem("theme", $new_mode);
});
