1 files changed, 45 insertions, 0 deletions
diff --git a/browser/components/pocket/content/panels/js/style-guide/entry.js b/browser/components/pocket/content/panels/js/style-guide/entry.js
new file mode 100644
index 0000000000..56ecbc0aef
--- /dev/null
+++ b/browser/components/pocket/content/panels/js/style-guide/entry.js
@@ -0,0 +1,45 @@
+/* global PKT_PANEL:false */
+
+function onDOMLoaded() {
+  if (!window.thePKT_PANEL) {
+    var thePKT_PANEL = new PKT_PANEL();
+    /* global thePKT_PANEL */
+    window.thePKT_PANEL = thePKT_PANEL;
+    thePKT_PANEL.initStyleGuide();
+  }
+  window.thePKT_PANEL.overlay.create();
+
+  setupDarkModeUI();
+}
+
+function setupDarkModeUI() {
+  let isDarkModeEnabled = window?.matchMedia(
+    `(prefers-color-scheme: dark)`
+  ).matches;
+  let elDarkModeToggle = document.querySelector(`#dark_mode_toggle input`);
+  let elBody = document.querySelector(`body`);
+
+  function setTheme() {
+    if (isDarkModeEnabled) {
+      elBody.classList.add(`theme_dark`);
+      elDarkModeToggle.checked = true;
+    } else {
+      elBody.classList.remove(`theme_dark`);
+      elDarkModeToggle.checked = false;
+    }
+  }
+
+  setTheme();
+
+  elDarkModeToggle.addEventListener(`click`, function (e) {
+    e.preventDefault;
+    isDarkModeEnabled = !isDarkModeEnabled;
+    setTheme();
+  });
+}
+
+if (document.readyState != `loading`) {
+  onDOMLoaded();
+} else {
+  document.addEventListener(`DOMContentLoaded`, onDOMLoaded);
+}