DimX/content.js at main · chapelsoftware/DimX · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
/*
 * Dim for X — Content script
 *
 * X.com still ships the full Dim theme CSS variables under :root[data-theme="dim"],
 * but only lets users pick "dark" (Lights Out). This script flips the attribute
 * to "dim" on both <html> and <body> and keeps it there despite X's JS resetting it.
 *
 * Two elements need fixing because X uses two theme scoping mechanisms:
 *   - <html data-theme> — drives :root CSS custom properties + Tailwind dark: classes
 *   - <body data-theme> — drives jetfuel/creator studio component themes
 */

(function () {
  "use strict";

  var TARGET_THEME = "dim";

  function applyDim(el) {
    if (el && el.getAttribute("data-theme") !== TARGET_THEME) {
      el.setAttribute("data-theme", TARGET_THEME);
    }
  }

  // Apply to <html> immediately (runs at document_start, before X's JS)
  applyDim(document.documentElement);

  // Watch <html> for data-theme resets
  var htmlObserver = new MutationObserver(function (mutations) {
    for (var i = 0; i < mutations.length; i++) {
      if (mutations[i].attributeName === "data-theme") {
        applyDim(document.documentElement);
      }
    }
  });

  htmlObserver.observe(document.documentElement, {
    attributes: true,
    attributeFilter: ["data-theme"],
  });

  // Fix <body> once it exists: clear inline styles and set data-theme="dim"
  function fixBody() {
    if (!document.body) return;

    document.body.style.backgroundColor = "";
    document.body.style.scrollbarColor = "";
    applyDim(document.body);

    // Watch <body> for data-theme resets (jetfuel pages set this separately)
    var bodyThemeObserver = new MutationObserver(function (mutations) {
      for (var i = 0; i < mutations.length; i++) {
        if (mutations[i].attributeName === "data-theme") {
          applyDim(document.body);
        }
      }
    });

    bodyThemeObserver.observe(document.body, {
      attributes: true,
      attributeFilter: ["data-theme"],
    });
  }

  // Body doesn't exist yet at document_start, so wait for it
  if (document.body) {
    fixBody();
  } else {
    var bodyObserver = new MutationObserver(function () {
      if (document.body) {
        fixBody();
        bodyObserver.disconnect();
      }
    });
    bodyObserver.observe(document.documentElement, { childList: true });
  }
})();