|
| 1 | +// Small function to quickly swap out themes. Gets put into the <head> tag.. |
| 2 | +function set_theme_from_local_storage() { |
| 3 | + // Initialize the theme to null, which means default |
| 4 | + var theme = null; |
| 5 | + // If the browser supports the localstorage and is not disabled then try to get the |
| 6 | + // documenter theme |
| 7 | + if (window.localStorage != null) { |
| 8 | + // Get the user-picked theme from localStorage. May be `null`, which means the default |
| 9 | + // theme. |
| 10 | + theme = window.localStorage.getItem("documenter-theme"); |
| 11 | + } |
| 12 | + // Check if the users preference is for dark color scheme |
| 13 | + var darkPreference = |
| 14 | + window.matchMedia("(prefers-color-scheme: dark)").matches === true; |
| 15 | + // Initialize a few variables for the loop: |
| 16 | + // |
| 17 | + // - active: will contain the index of the theme that should be active. Note that there |
| 18 | + // is no guarantee that localStorage contains sane values. If `active` stays `null` |
| 19 | + // we either could not find the theme or it is the default (primary) theme anyway. |
| 20 | + // Either way, we then need to stick to the primary theme. |
| 21 | + // |
| 22 | + // - disabled: style sheets that should be disabled (i.e. all the theme style sheets |
| 23 | + // that are not the currently active theme) |
| 24 | + var active = null; |
| 25 | + var disabled = []; |
| 26 | + var primaryLightTheme = null; |
| 27 | + var primaryDarkTheme = null; |
| 28 | + for (var i = 0; i < document.styleSheets.length; i++) { |
| 29 | + var ss = document.styleSheets[i]; |
| 30 | + // The <link> tag of each style sheet is expected to have a data-theme-name attribute |
| 31 | + // which must contain the name of the theme. The names in localStorage much match this. |
| 32 | + var themename = ss.ownerNode.getAttribute("data-theme-name"); |
| 33 | + // attribute not set => non-theme stylesheet => ignore |
| 34 | + if (themename === null) continue; |
| 35 | + // To distinguish the default (primary) theme, it needs to have the data-theme-primary |
| 36 | + // attribute set. |
| 37 | + if (ss.ownerNode.getAttribute("data-theme-primary") !== null) { |
| 38 | + primaryLightTheme = themename; |
| 39 | + } |
| 40 | + // Check if the theme is primary dark theme so that we could store its name in darkTheme |
| 41 | + if (ss.ownerNode.getAttribute("data-theme-primary-dark") !== null) { |
| 42 | + primaryDarkTheme = themename; |
| 43 | + } |
| 44 | + // If we find a matching theme (and it's not the default), we'll set active to non-null |
| 45 | + if (themename === theme) active = i; |
| 46 | + // Store the style sheets of inactive themes so that we could disable them |
| 47 | + if (themename !== theme) disabled.push(ss); |
| 48 | + } |
| 49 | + var activeTheme = null; |
| 50 | + if (active !== null) { |
| 51 | + // If we did find an active theme, we'll (1) add the theme--$(theme) class to <html> |
| 52 | + document.getElementsByTagName("html")[0].className = "theme--" + theme; |
| 53 | + activeTheme = theme; |
| 54 | + } else { |
| 55 | + // If we did _not_ find an active theme, then we need to fall back to the primary theme |
| 56 | + // which can either be dark or light, depending on the user's OS preference. |
| 57 | + var activeTheme = darkPreference ? primaryDarkTheme : primaryLightTheme; |
| 58 | + // In case it somehow happens that the relevant primary theme was not found in the |
| 59 | + // preceding loop, we abort without doing anything. |
| 60 | + if (activeTheme === null) { |
| 61 | + console.error("Unable to determine primary theme."); |
| 62 | + return; |
| 63 | + } |
| 64 | + // When switching to the primary light theme, then we must not have a class name |
| 65 | + // for the <html> tag. That's only for non-primary or the primary dark theme. |
| 66 | + if (darkPreference) { |
| 67 | + document.getElementsByTagName("html")[0].className = |
| 68 | + "theme--" + activeTheme; |
| 69 | + } else { |
| 70 | + document.getElementsByTagName("html")[0].className = ""; |
| 71 | + } |
| 72 | + } |
| 73 | + for (var i = 0; i < document.styleSheets.length; i++) { |
| 74 | + var ss = document.styleSheets[i]; |
| 75 | + // The <link> tag of each style sheet is expected to have a data-theme-name attribute |
| 76 | + // which must contain the name of the theme. The names in localStorage much match this. |
| 77 | + var themename = ss.ownerNode.getAttribute("data-theme-name"); |
| 78 | + // attribute not set => non-theme stylesheet => ignore |
| 79 | + if (themename === null) continue; |
| 80 | + // we'll disable all the stylesheets, except for the active one |
| 81 | + ss.disabled = !(themename == activeTheme); |
| 82 | + } |
| 83 | +} |
| 84 | +set_theme_from_local_storage(); |
0 commit comments