https://julialang.org/libs/detectdark.js

1(function () {
2  var STORAGE_KEY = 'julia-theme';
3  var root = document.documentElement;
4
5  function getPreferredTheme() {
6    var stored = localStorage.getItem(STORAGE_KEY);
7    if (stored === 'dark' || stored === 'light') return stored;
8    // Fall back to OS preference
9    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
10      return 'dark';
11    }
12    return 'light';
13  }
14
15  function applyTheme(theme) {
16    root.setAttribute('data-theme', theme);
17    updateLogo(theme === 'dark');
18  }
19
20  function changeFilePath(originalPath, newFileName) {
21    var pathArray = originalPath.split('/');
22    pathArray[pathArray.length - 1] = newFileName;
23    return pathArray.join('/');
24  }
25
26  function updateLogo(isDark) {
27    var julialogo = isDark ? 'logo-dark.svg' : 'logo.svg';
28    var imgElements = document.getElementsByClassName('navbarjulialogo');
29    for (var i = 0; i < imgElements.length; i++) {
30      imgElements[i].src = changeFilePath(imgElements[i].src, julialogo);
31    }
32  }
33
34  // Apply theme immediately to prevent flash
35  applyTheme(getPreferredTheme());
36
37  document.addEventListener('DOMContentLoaded', function () {
38    // Re-apply after DOM is ready (ensures logo is updated)
39    applyTheme(getPreferredTheme());
40
41    var toggle = document.getElementById('dark-mode-toggle');
42    if (toggle) {
43      toggle.addEventListener('click', function () {
44        var current = root.getAttribute('data-theme');
45        var next = current === 'dark' ? 'light' : 'dark';
46        localStorage.setItem(STORAGE_KEY, next);
47        toggle.classList.remove('spin');
48        void toggle.offsetWidth;
49        toggle.classList.add('spin');
50        applyTheme(next);
51        setTimeout(function () { toggle.classList.remove('spin'); }, 450);
52      });
53    }
54
55    // Listen for OS preference changes (only applies if no stored preference)
56    if (window.matchMedia) {
57      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
58        if (!localStorage.getItem(STORAGE_KEY)) {
59          applyTheme(getPreferredTheme());
60        }
61      });
62    }
63
64    // Watch for DarkReader extension changes
65    var observer = new MutationObserver(function (mutations) {
66      for (var i = 0; i < mutations.length; i++) {
67        if (mutations[i].attributeName === 'data-darkreader-scheme') {
68          if (!localStorage.getItem(STORAGE_KEY)) {
69            var isDarkReader = root.getAttribute('data-darkreader-scheme') === 'dark';
70            applyTheme(isDarkReader ? 'dark' : getPreferredTheme());
71          }
72        }
73      }
74    });
75    observer.observe(root, { attributes: true, childList: false, subtree: false });
76  });
77})();