https://docs.rxinfer.com/stable/assets/themeswap.js

1// Small function to quickly swap out themes. Gets put into the <head> tag..
2function 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}
84set_theme_from_local_storage();