mirror of
https://github.com/fverdugo/XM_40017.git
synced 2025-12-30 10:48:31 +01:00
build based on 87684b2
This commit is contained in:
@@ -1,20 +1,17 @@
|
||||
// Small function to quickly swap out themes. Gets put into the <head> tag..
|
||||
function set_theme_from_local_storage() {
|
||||
// Intialize the theme to null, which means default
|
||||
// Initialize the theme to null, which means default
|
||||
var theme = null;
|
||||
// If the browser supports the localstorage and is not disabled then try to get the
|
||||
// documenter theme
|
||||
if(window.localStorage != null) {
|
||||
if (window.localStorage != null) {
|
||||
// Get the user-picked theme from localStorage. May be `null`, which means the default
|
||||
// theme.
|
||||
theme = window.localStorage.getItem("documenter-theme");
|
||||
theme = window.localStorage.getItem("documenter-theme");
|
||||
}
|
||||
// Check if the browser supports user color preference
|
||||
var darkPreference = false;
|
||||
// Check if the users preference is for dark color scheme
|
||||
if(window.matchMedia('(prefers-color-scheme: dark)').matches === true) {
|
||||
darkPreference = true;
|
||||
}
|
||||
var darkPreference =
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches === true;
|
||||
// Initialize a few variables for the loop:
|
||||
//
|
||||
// - active: will contain the index of the theme that should be active. Note that there
|
||||
@@ -24,43 +21,64 @@ function set_theme_from_local_storage() {
|
||||
//
|
||||
// - disabled: style sheets that should be disabled (i.e. all the theme style sheets
|
||||
// that are not the currently active theme)
|
||||
var active = null; var disabled = []; var darkTheme = null;
|
||||
var active = null;
|
||||
var disabled = [];
|
||||
var primaryLightTheme = null;
|
||||
var primaryDarkTheme = null;
|
||||
for (var i = 0; i < document.styleSheets.length; i++) {
|
||||
var ss = document.styleSheets[i];
|
||||
// The <link> tag of each style sheet is expected to have a data-theme-name attribute
|
||||
// which must contain the name of the theme. The names in localStorage much match this.
|
||||
var themename = ss.ownerNode.getAttribute("data-theme-name");
|
||||
// attribute not set => non-theme stylesheet => ignore
|
||||
if(themename === null) continue;
|
||||
if (themename === null) continue;
|
||||
// To distinguish the default (primary) theme, it needs to have the data-theme-primary
|
||||
// attribute set.
|
||||
var isprimary = (ss.ownerNode.getAttribute("data-theme-primary") !== null);
|
||||
// Check if the theme is primary dark theme
|
||||
var isDarkTheme = (ss.ownerNode.getAttribute("data-theme-primary-dark") !== null);
|
||||
// If ss is for dark theme then set the value of darkTheme to the name of the theme
|
||||
if(isDarkTheme) darkTheme = themename;
|
||||
if (ss.ownerNode.getAttribute("data-theme-primary") !== null) {
|
||||
primaryLightTheme = themename;
|
||||
}
|
||||
// Check if the theme is primary dark theme so that we could store its name in darkTheme
|
||||
if (ss.ownerNode.getAttribute("data-theme-primary-dark") !== null) {
|
||||
primaryDarkTheme = themename;
|
||||
}
|
||||
// If we find a matching theme (and it's not the default), we'll set active to non-null
|
||||
if(themename === theme) active = i;
|
||||
if (themename === theme) active = i;
|
||||
// Store the style sheets of inactive themes so that we could disable them
|
||||
if(themename !== theme) disabled.push(ss);
|
||||
if (themename !== theme) disabled.push(ss);
|
||||
}
|
||||
if(active !== null) {
|
||||
var activeTheme = null;
|
||||
if (active !== null) {
|
||||
// If we did find an active theme, we'll (1) add the theme--$(theme) class to <html>
|
||||
document.getElementsByTagName('html')[0].className = "theme--" + theme;
|
||||
// and (2) disable all the other theme stylesheets
|
||||
disabled.forEach(function(ss){
|
||||
ss.disabled = true;
|
||||
});
|
||||
document.getElementsByTagName("html")[0].className = "theme--" + theme;
|
||||
activeTheme = theme;
|
||||
} else {
|
||||
// If we did _not_ find an active theme, then we need to fall back to the primary theme
|
||||
// which can either be dark or light, depending on the user's OS preference.
|
||||
var activeTheme = darkPreference ? primaryDarkTheme : primaryLightTheme;
|
||||
// In case it somehow happens that the relevant primary theme was not found in the
|
||||
// preceding loop, we abort without doing anything.
|
||||
if (activeTheme === null) {
|
||||
console.error("Unable to determine primary theme.");
|
||||
return;
|
||||
}
|
||||
// When switching to the primary light theme, then we must not have a class name
|
||||
// for the <html> tag. That's only for non-primary or the primary dark theme.
|
||||
if (darkPreference) {
|
||||
document.getElementsByTagName("html")[0].className =
|
||||
"theme--" + activeTheme;
|
||||
} else {
|
||||
document.getElementsByTagName("html")[0].className = "";
|
||||
}
|
||||
}
|
||||
else if(darkTheme !== null && darkPreference === true) {
|
||||
// If we did find an active theme, we'll (1) add the theme--$(theme) class to <html>
|
||||
document.getElementsByTagName('html')[0].className = "theme--" + darkTheme;
|
||||
// and (2) disable all the other theme stylesheets
|
||||
disabled.forEach(function(ss){
|
||||
if (ss.ownerNode.getAttribute("data-theme-name") !== darkTheme) {
|
||||
ss.disabled = true;
|
||||
}
|
||||
});
|
||||
for (var i = 0; i < document.styleSheets.length; i++) {
|
||||
var ss = document.styleSheets[i];
|
||||
// The <link> tag of each style sheet is expected to have a data-theme-name attribute
|
||||
// which must contain the name of the theme. The names in localStorage much match this.
|
||||
var themename = ss.ownerNode.getAttribute("data-theme-name");
|
||||
// attribute not set => non-theme stylesheet => ignore
|
||||
if (themename === null) continue;
|
||||
// we'll disable all the stylesheets, except for the active one
|
||||
ss.disabled = !(themename == activeTheme);
|
||||
}
|
||||
}
|
||||
set_theme_from_local_storage();
|
||||
|
||||
Reference in New Issue
Block a user