mirror of https://github.com/msberends/AMR.git
61 lines
2.4 KiB
JavaScript
61 lines
2.4 KiB
JavaScript
|
$(document).ready(function(){
|
||
|
|
|
||
|
|
// Update the toggle button based on current color scheme
|
||
|
|
function updateDarkToggleButton() {
|
||
|
|
$dark = (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches);
|
||
|
|
$("#css-toggle-btn").prop( "checked", $dark );
|
||
|
|
}
|
||
|
|
// Update on first load.
|
||
|
|
updateDarkToggleButton();
|
||
|
|
// and every time it changes
|
||
|
|
if (window.matchMedia) window.matchMedia("(prefers-color-scheme: dark)").addListener( updateDarkToggleButton );
|
||
|
|
|
||
|
|
// Color Scheme toggle botton
|
||
|
|
|
||
|
|
// function to initialise the css
|
||
|
|
function init_color_scheme_css($id, $mode) {
|
||
|
|
if ($("#"+$id)) $("#"+$id).remove(); // remove exitsing 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
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|