Dark theme via DarkReader (#595)

* Initial commit for dark theme.

* Use DarkReader.auto() to watch for system theme.

* Tunning default parameters.

* Allow configurable number of recent posts.

* Added invisible element to hack theme initialization.

* Added default value.

* Use Darkreader CDN.

* Cleanup to keep darkreader in as few files as possible.

* Renamed darkmode.js to darkmode-darkreader.js.

* Bring back the initialization.

* Added provider property.

* Added theme selector to the posts navbar.

* Removed extra line breaks.

* Changed darkreader CDN to local copy.

* Renamed to darkMode.

* Fixed CodeQL failures.

* Added icons.

* Renamed function.

* Added SVG inversion.

* Used icons for selection.

* Toggle initial dark only in the dynamic navbar.

Co-authored-by: donfiguerres <donfiguerres@github.com>
Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>

layouts/partials/header.html

@@ -15,6 +15,11 @@
 <!--=================== icons ==============================-->
 <link rel="stylesheet" href="{{ "/fontawesome/css/all.min.css" | relURL }}"/>
 
+<!--=================== dark mode ==========================-->
+{{ if site.Params.darkMode.enable }}
+<link rel="stylesheet" href="{{ "/css/colortheme/colortheme.css" | relURL }}"/>
+{{ end }}
+
 <!--================= fab-icon =========================-->
 {{/* add favicon only if the site author has provided the the favicon */}}
 {{ if site.Params.logo.favicon }}

layouts/partials/navigators/navbar-2.html

@@ -47,6 +47,9 @@
       {{ if .IsTranslated }}
         {{ partial "navigators/lang-selector-2.html" . }}
       {{ end }}
+      {{ if site.Params.darkMode.enable }}
+        {{ partial "navigators/theme-selector.html" . }}
+      {{ end }}
       </ul>
     </div>
   </div>

layouts/partials/navigators/navbar.html

@@ -66,7 +66,7 @@
       <span class="navbar-toggler-icon"></span>
     </button>
 
-    <div class="collapse navbar-collapse" id="top-nav-items">
+    <div class="collapse navbar-collapse dynamic-navbar" id="top-nav-items">
       <ul class="navbar-nav ml-auto">
         <li class="nav-item">
           <a class="nav-link" href="#home">{{ i18n "home" }}</a>
@@ -124,6 +124,9 @@
         {{ if .IsTranslated }}
           {{ partial "navigators/lang-selector.html" . }}
         {{ end }}
+        {{ if site.Params.darkMode.enable }}
+          {{ partial "navigators/theme-selector.html" . }}
+        {{ end }}
       </ul>
     </div>
   </div>

layouts/partials/navigators/theme-selector.html

@@ -0,0 +1,20 @@
+<li class="nav-item dropdown">
+<!-- This is for initializing the color scheme selection for new visitors. See /js/darkmode.js -->
+<div id="theme-initialization" style="display: none;"
+  default-theme="{{ site.Params.darkMode.default }}"></div>
+<a class="nav-link dropdown-toggle"  href="#" id="themeSelector" role="button"
+  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+  <img id="navbar-theme-icon-svg" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20>
+</a>
+<div class="dropdown-menu dropdown-menu-icons-only" aria-labelledby="themeSelector">
+  <a class="dropdown-item nav-link" href="#" onclick="enableLightTheme()">
+    <img class="menu-icon-center" src="{{ "/icons/sun-svgrepo-com.svg" }}" width=20>
+  </a>
+  <a class="dropdown-item nav-link" href="#" onclick="enableDarkTheme()">
+    <img class="menu-icon-center" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20>
+  </a>
+  <a class="dropdown-item nav-link" href="#" onclick="useSystemTheme()">
+    <img class="menu-icon-center" src="{{ "/icons/computer-svgrepo-com.svg" }}" width=20>
+  </a>
+</div>
+</li>

layouts/partials/scripts.html

@@ -5,3 +5,10 @@
 <script type="text/javascript" src="{{ "/js/navbar.js" | relURL }}"></script>
 <script type="text/javascript" src="{{ "/js/plyr.js" | relURL }}"></script>
 <script type="text/javascript" src="{{ "/js/main.js" | relURL }}"></script>
+
+{{ if site.Params.darkMode.enable }}
+{{ if eq site.Params.darkMode.provider "darkreader" }}
+<script type="text/javascript" src="{{ "/js/darkreader.js" | relURL }}"></script>
+<script type="text/javascript" src="{{ "/js/darkmode-darkreader.js" | relURL }}"></script>
+{{ end }}
+{{ end }}

static/css/colortheme/colortheme.css

@@ -0,0 +1,20 @@
+/* Note: No need to invert when the screen is small because the navbar is
+   collapsed to a hamburger menu. */
+@media only screen and (min-width: 1200px) {
+  .dynamic-navbar .navbar-icon-svg-dark {
+    filter: invert(1);
+  };
+}
+
+@media only screen and (min-width: 1200px) {
+  .dropdown-menu-icons-only {
+    width: 25px;
+    min-width: 3rem;
+  }
+}
+
+.menu-icon-center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}

static/icons/computer-svgrepo-com.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 364 364" style="enable-background:new 0 0 364 364;" xml:space="preserve">
+<g>
+	<path d="M350,60.5h-50c-7.72,0-14,6.28-14,14v225c0,7.72,6.28,14,14,14h50c7.72,0,14-6.28,14-14v-225
+		C364,66.78,357.72,60.5,350,60.5z M325.864,166.5c-11.23,0-20.333-9.104-20.333-20.333s9.104-20.333,20.333-20.333
+		s20.333,9.104,20.333,20.333S337.094,166.5,325.864,166.5z"/>
+	<path d="M230,50.5H30c-16.542,0-30,13.458-30,30v149c0,16.542,13.458,30,30,30h79v21.765c0,0.665-0.466,1.235-0.847,1.235H52.351
+		C46.092,282.5,41,287.329,41,293.265v9.235c0,5.962,5.198,11,11.351,11h156.604c6.091,0,11.046-4.935,11.046-11v-9.235
+		c0-6.037-4.852-10.765-11.046-10.765h-55.803c-0.517,0-1.151-0.681-1.151-1.235V259.5h78c16.542,0,30-13.458,30-30v-149
+		C260,63.958,246.542,50.5,230,50.5z M230,80.5l0.017,133H30v-133H230z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

static/icons/moon-svgrepo-com.svg

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 206.622 206.622" style="enable-background:new 0 0 206.622 206.622;" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path d="M155.287,58.38c-6.703-7.189-14.65-12.775-23.62-16.603c-1.299-0.552-2.8-0.291-3.83,0.672
+				c-1.034,0.963-1.4,2.443-0.94,3.777c8.128,23.444,1.654,49.524-16.485,66.441c-18.146,16.918-44.614,21.557-67.43,11.812
+				c-1.288-0.55-2.8-0.291-3.83,0.672c-1.034,0.963-1.4,2.443-0.94,3.777c3.197,9.218,8.215,17.535,14.918,24.72
+				c12.721,13.643,29.996,21.517,48.64,22.168c0.836,0.03,1.668,0.043,2.5,0.043c17.728,0,34.54-6.611,47.571-18.764
+				c13.647-12.724,21.517-29.998,22.168-48.643C174.658,89.807,168.011,72.025,155.287,58.38z M166.883,108.203
+				c-0.585,16.74-7.655,32.251-19.905,43.675c-12.25,11.423-28.223,17.425-44.959,16.809c-16.743-0.583-32.252-7.652-43.674-19.904
+				c-4.21-4.511-7.678-9.519-10.363-14.947c23.47,6.872,49.127,0.987,67.291-15.952c18.167-16.941,25.828-42.13,20.608-66.02
+				c5.23,3.057,9.984,6.867,14.19,11.382C161.496,75.496,167.465,91.464,166.883,108.203z"/>
+			<path d="M167.607,163.757c-1.393-1.393-3.649-1.393-5.042,0s-1.393,3.649,0,5.042l7.563,7.563
+				c0.696,0.696,1.609,1.045,2.521,1.045c0.912,0,1.825-0.348,2.521-1.045c1.393-1.393,1.393-3.649,0-5.042L167.607,163.757z"/>
+			<path d="M170.128,30.259l-7.563,7.565c-1.393,1.393-1.393,3.651,0,5.042c0.696,0.696,1.609,1.045,2.521,1.045
+				s1.825-0.348,2.521-1.045l7.563-7.565c1.393-1.393,1.393-3.651,0-5.042C173.777,28.866,171.521,28.866,170.128,30.259z"/>
+			<path d="M103.311,188.793c-1.971,0-3.566,1.597-3.566,3.566v10.697c0,1.969,1.595,3.566,3.566,3.566
+				c1.971,0,3.566-1.597,3.566-3.566v-10.697C106.877,190.39,105.282,188.793,103.311,188.793z"/>
+			<path d="M201.371,99.745h-10.697c-1.971,0-3.566,1.597-3.566,3.566c0,1.969,1.595,3.566,3.566,3.566h10.697
+				c1.971,0,3.566-1.597,3.566-3.566C204.937,101.342,203.341,99.745,201.371,99.745z"/>
+			<path d="M39.015,42.866c0.696,0.696,1.609,1.045,2.521,1.045s1.825-0.348,2.521-1.045c1.393-1.391,1.393-3.649,0-5.042
+				l-7.563-7.565c-1.393-1.393-3.649-1.393-5.042,0c-1.393,1.391-1.393,3.649,0,5.042L39.015,42.866z"/>
+			<path d="M39.015,163.757l-7.563,7.563c-1.393,1.393-1.393,3.649,0,5.042c0.696,0.696,1.609,1.045,2.521,1.045
+				c0.912,0,1.825-0.348,2.521-1.045l7.563-7.563c1.393-1.393,1.393-3.649,0-5.042C42.664,162.364,40.408,162.364,39.015,163.757z"
+				/>
+			<path d="M103.311,17.829c1.971,0,3.566-1.597,3.566-3.566V3.566c0-1.969-1.595-3.566-3.566-3.566
+				c-1.971,0-3.566,1.597-3.566,3.566v10.697C99.745,16.232,101.34,17.829,103.311,17.829z"/>
+			<path d="M15.949,99.745H5.251c-1.971,0-3.566,1.597-3.566,3.566c0,1.969,1.595,3.566,3.566,3.566h10.697
+				c1.971,0,3.566-1.597,3.566-3.566C19.514,101.342,17.919,99.745,15.949,99.745z"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

static/icons/sun-svgrepo-com.svg

@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<g id="Sun">
+	<path d="M32.1318512,18.2793007c-7.7119007,0-13.9863014,6.2743988-13.9863014,13.9862976
+		s6.2744007,13.9864006,13.9863014,13.9864006s13.9862976-6.274498,13.9862976-13.9864006
+		S39.84375,18.2793007,32.1318512,18.2793007z M32.1318512,44.2793007c-6.6245003,0-12.0137005-5.3897018-12.0137005-12.0137024
+		s5.3892002-12.0135975,12.0137005-12.0135975s12.0136986,5.3895988,12.0136986,12.0135975
+		S38.7563515,44.2793007,32.1318512,44.2793007z"/>
+	<path d="M32.0000496,13.1688995c0.5522003,0,1-0.4471998,1-1V1c0-0.5527-0.4477997-1-1-1c-0.5522995,0-1,0.4473-1,1v11.1688995
+		C31.0000496,12.7216997,31.4477501,13.1688995,32.0000496,13.1688995z"/>
+	<path d="M32.0000496,50.830101c-0.5522995,0-1,0.4472008-1,1V63c0,0.5527,0.4477005,1,1,1c0.5522003,0,1-0.4473,1-1V51.830101
+		C33.0000496,51.2773018,32.5522499,50.830101,32.0000496,50.830101z"/>
+	<path d="M62.263649,30.4452991H51.09375c-0.5522003,0-1,0.4473-1,1s0.4477997,1.0000019,1,1.0000019h11.169899
+		c0.5522995,0,1-0.4473019,1-1.0000019S62.8159485,30.4452991,62.263649,30.4452991z"/>
+	<path d="M13.90625,31.4452991c0-0.5527-0.447794-1-0.999999-1H1.7363508c-0.5523,0-1,0.4473-1,1s0.4477,1.0000019,1,1.0000019
+		H12.906251C13.458456,32.4453011,13.90625,31.9979992,13.90625,31.4452991z"/>
+	<path d="M45.1801491,19.8778992c0.2559013,0,0.5116997-0.097599,0.7070999-0.2929001l7.8988991-7.8984995
+		c0.3906021-0.3905993,0.3906021-1.0233994,0-1.4139996c-0.3905983-0.3907003-1.0234985-0.3907003-1.4140968,0l-7.8989029,7.8984003
+		c-0.3905983,0.3906002-0.3905983,1.0233994,0,1.4140987C44.668457,19.7803001,44.9243507,19.8778992,45.1801491,19.8778992z"/>
+	<path d="M45.887249,45.2030983c-0.3906975-0.3905983-1.0234985-0.3905983-1.4141006,0
+		c-0.3905983,0.3907013-0.3905983,1.0235023,0,1.4141006l7.8989029,7.8973999
+		c0.1952972,0.1954002,0.4511986,0.2929993,0.7070999,0.2929993c0.2557983,0,0.5116997-0.097599,0.7069969-0.2929993
+		c0.3906021-0.3905983,0.3906021-1.0233994,0-1.4139977L45.887249,45.2030983z"/>
+	<path d="M18.112751,19.5849991c0.1954002,0.1953011,0.4511986,0.2929001,0.7070999,0.2929001
+		c0.2558002,0,0.5116997-0.097599,0.7069988-0.2929001c0.3906059-0.3906994,0.3906059-1.0234985,0-1.4140987L11.6289501,10.2725
+		c-0.3906994-0.3907003-1.0234947-0.3907003-1.4140997,0c-0.3906002,0.3906002-0.3906002,1.0234003,0,1.4139996
+		L18.112751,19.5849991z"/>
+	<path d="M19.5712509,45.2700996c-0.0177002-0.0208015-0.024601-0.0471992-0.0444012-0.0670013
+		c-0.3906002-0.3905983-1.0233936-0.3905983-1.4140987,0l-3.9401007,3.9400024l-4.0341949,3.8446999
+		c-0.3999052,0.3811989-0.415205,1.0139008-0.0339994,1.4137993c0.0192947,0.0203018,0.045495,0.0278015,0.066,0.0460014
+		c0.0176945,0.0208969,0.0245943,0.0472984,0.0443945,0.0669975c0.1953001,0.1954002,0.4512005,0.2929993,0.7069998,0.2929993
+		c0.2559004,0,0.5117006-0.097599,0.7070999-0.2929993l3.9401007-3.9398994l4.0341997-3.8446999
+		c0.3999004-0.3811989,0.415205-1.0139008,0.0340004-1.4137993C19.6179504,45.2958984,19.5917511,45.2882996,19.5712509,45.2700996z
+		"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

static/js/darkmode-darkreader.js

@@ -0,0 +1,59 @@
+const DARK = "dark";
+const LIGHT = "light";
+const SYSTEM = "system";
+const COLOR_THEME = "color-theme";
+const DARK_OPTIONS = {
+  brightness: 100,
+  contrast: 100,
+  sepia: 0
+};
+const SVG_INVERT = {invert: ['img[src$=".svg"]']};
+const NAVBAR_ICON_ID = "navbar-theme-icon-svg";
+const DARK_ICON = "/icons/moon-svgrepo-com.svg";
+const LIGHT_ICON = "/icons/sun-svgrepo-com.svg";
+const SYSTEM_ICON = "/icons/computer-svgrepo-com.svg";
+
+function enableDarkTheme() {
+  localStorage.setItem(COLOR_THEME, DARK);
+  DarkReader.enable(DARK_OPTIONS, SVG_INVERT);
+  document.getElementById(NAVBAR_ICON_ID).src = DARK_ICON;
+}
+
+function enableLightTheme() {
+  localStorage.setItem(COLOR_THEME, LIGHT);
+  DarkReader.disable();
+  document.getElementById(NAVBAR_ICON_ID).src = LIGHT_ICON;
+}
+
+function useSystemTheme() {
+  localStorage.setItem(COLOR_THEME, SYSTEM);
+  DarkReader.auto(DARK_OPTIONS, SVG_INVERT);
+  document.getElementById(NAVBAR_ICON_ID).src = SYSTEM_ICON;
+}
+
+function initializeColorTheme() {
+  // We're using the themeInitialization attributes as a 'hack' for setting up
+  // the default color scheme because we don't want to complicate this further
+  // by creating custom javascript output in Hugo.
+  let themeInitialization = document.getElementById("theme-initialization");
+  let defaultColorScheme = themeInitialization.getAttribute('default-theme');
+  // If the user has already selected a preferred theme then use that instead
+  // of the default theme. Also, the default theme gets loaded to localStorage
+  // on the first visit.
+  let colorTheme = localStorage.getItem(COLOR_THEME);
+  if (colorTheme == null || colorTheme.length == 0) {
+    colorTheme = defaultColorScheme;
+  }
+  // Enable the color theme
+  if (colorTheme == DARK) {
+    enableDarkTheme();
+  } else if (colorTheme == SYSTEM) {
+    useSystemTheme();
+  } else {
+    // We use light theme for the two conditions below.
+    // 1. the selected theme is light
+    // 2. no default theme is found - fall back to original behavior
+    enableLightTheme();
+  }
+}
+initializeColorTheme()

static/js/darkreader.js

@@ -0,0 +1,5488 @@
+/**
+ * Dark Reader v4.9.51
+ * https://darkreader.org/
+ */
+
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.DarkReader = {}));
+})(this, (function (exports) { 'use strict';
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+
+    function __generator(thisArg, body) {
+        var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f) throw new TypeError("Generator is already executing.");
+            while (_) try {
+                if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+                if (y = 0, t) op = [op[0] & 2, t.value];
+                switch (op[0]) {
+                    case 0: case 1: t = op; break;
+                    case 4: _.label++; return { value: op[1], done: false };
+                    case 5: _.label++; y = op[1]; op = [0]; continue;
+                    case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                    default:
+                        if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                        if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                        if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                        if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                        if (t[2]) _.ops.pop();
+                        _.trys.pop(); continue;
+                }
+                op = body.call(thisArg, _);
+            } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+            if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
+
+    function __values(o) {
+        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+        if (m) return m.call(o);
+        if (o && typeof o.length === "number") return {
+            next: function () {
+                if (o && i >= o.length) o = void 0;
+                return { value: o && o[i++], done: !o };
+            }
+        };
+        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    }
+
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m) return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+        }
+        catch (error) { e = { error: error }; }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"])) m.call(i);
+            }
+            finally { if (e) throw e.error; }
+        }
+        return ar;
+    }
+
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+            if (ar || !(i in from)) {
+                if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+                ar[i] = from[i];
+            }
+        }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
+
+    var MessageType = {
+        UI_GET_DATA: 'ui-get-data',
+        UI_SUBSCRIBE_TO_CHANGES: 'ui-subscribe-to-changes',
+        UI_UNSUBSCRIBE_FROM_CHANGES: 'ui-unsubscribe-from-changes',
+        UI_CHANGE_SETTINGS: 'ui-change-settings',
+        UI_SET_THEME: 'ui-set-theme',
+        UI_SET_SHORTCUT: 'ui-set-shortcut',
+        UI_TOGGLE_ACTIVE_TAB: 'ui-toggle-active-tab',
+        UI_MARK_NEWS_AS_READ: 'ui-mark-news-as-read',
+        UI_MARK_NEWS_AS_DISPLAYED: 'ui-mark-news-as-displayed',
+        UI_LOAD_CONFIG: 'ui-load-config',
+        UI_APPLY_DEV_DYNAMIC_THEME_FIXES: 'ui-apply-dev-dynamic-theme-fixes',
+        UI_RESET_DEV_DYNAMIC_THEME_FIXES: 'ui-reset-dev-dynamic-theme-fixes',
+        UI_APPLY_DEV_INVERSION_FIXES: 'ui-apply-dev-inversion-fixes',
+        UI_RESET_DEV_INVERSION_FIXES: 'ui-reset-dev-inversion-fixes',
+        UI_APPLY_DEV_STATIC_THEMES: 'ui-apply-dev-static-themes',
+        UI_RESET_DEV_STATIC_THEMES: 'ui-reset-dev-static-themes',
+        UI_SAVE_FILE: 'ui-save-file',
+        UI_REQUEST_EXPORT_CSS: 'ui-request-export-css',
+        BG_CHANGES: 'bg-changes',
+        BG_ADD_CSS_FILTER: 'bg-add-css-filter',
+        BG_ADD_STATIC_THEME: 'bg-add-static-theme',
+        BG_ADD_SVG_FILTER: 'bg-add-svg-filter',
+        BG_ADD_DYNAMIC_THEME: 'bg-add-dynamic-theme',
+        BG_EXPORT_CSS: 'bg-export-css',
+        BG_UNSUPPORTED_SENDER: 'bg-unsupported-sender',
+        BG_CLEAN_UP: 'bg-clean-up',
+        BG_RELOAD: 'bg-reload',
+        BG_FETCH_RESPONSE: 'bg-fetch-response',
+        BG_UI_UPDATE: 'bg-ui-update',
+        BG_CSS_UPDATE: 'bg-css-update',
+        CS_COLOR_SCHEME_CHANGE: 'cs-color-scheme-change',
+        CS_FRAME_CONNECT: 'cs-frame-connect',
+        CS_FRAME_FORGET: 'cs-frame-forget',
+        CS_FRAME_FREEZE: 'cs-frame-freeze',
+        CS_FRAME_RESUME: 'cs-frame-resume',
+        CS_EXPORT_CSS_RESPONSE: 'cs-export-css-response',
+        CS_FETCH: 'cs-fetch',
+        CS_DARK_THEME_DETECTED: 'cs-dark-theme-detected',
+        CS_DARK_THEME_NOT_DETECTED: 'cs-dark-theme-not-detected',
+    };
+
+    var userAgent = typeof navigator === 'undefined' ? 'some useragent' : navigator.userAgent.toLowerCase();
+    var platform = typeof navigator === 'undefined' ? 'some platform' : navigator.platform.toLowerCase();
+    var isChromium = userAgent.includes('chrome') || userAgent.includes('chromium');
+    var isThunderbird = userAgent.includes('thunderbird');
+    var isFirefox = userAgent.includes('firefox') || userAgent.includes('librewolf') || isThunderbird;
+    userAgent.includes('vivaldi');
+    userAgent.includes('yabrowser');
+    userAgent.includes('opr') || userAgent.includes('opera');
+    userAgent.includes('edg');
+    var isSafari = userAgent.includes('safari') && !isChromium;
+    var isWindows = platform.startsWith('win');
+    var isMacOS = platform.startsWith('mac');
+    userAgent.includes('mobile');
+    var isShadowDomSupported = typeof ShadowRoot === 'function';
+    var isMatchMediaChangeEventListenerSupported = (typeof MediaQueryList === 'function' &&
+        typeof MediaQueryList.prototype.addEventListener === 'function');
+    ((function () {
+        var m = userAgent.match(/chrom[e|ium]\/([^ ]+)/);
+        if (m && m[1]) {
+            return m[1];
+        }
+        return '';
+    }))();
+    var isDefinedSelectorSupported = (function () {
+        try {
+            document.querySelector(':defined');
+            return true;
+        }
+        catch (err) {
+            return false;
+        }
+    })();
+    globalThis.chrome && globalThis.chrome.runtime && globalThis.chrome.runtime.getManifest && globalThis.chrome.runtime.getManifest().manifest_version === 3;
+    var isCSSColorSchemePropSupported = (function () {
+        if (typeof document === 'undefined') {
+            return false;
+        }
+        var el = document.createElement('div');
+        el.setAttribute('style', 'color-scheme: dark');
+        return el.style && el.style.colorScheme === 'dark';
+    })();
+
+    function getOKResponse(url, mimeType, origin) {
+        return __awaiter(this, void 0, void 0, function () {
+            var response;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4, fetch(url, {
+                            cache: 'force-cache',
+                            credentials: 'omit',
+                            referrer: origin
+                        })];
+                    case 1:
+                        response = _a.sent();
+                        if (isFirefox && mimeType === 'text/css' && url.startsWith('moz-extension://') && url.endsWith('.css')) {
+                            return [2, response];
+                        }
+                        if (mimeType && !response.headers.get('Content-Type').startsWith(mimeType)) {
+                            throw new Error("Mime type mismatch when loading ".concat(url));
+                        }
+                        if (!response.ok) {
+                            throw new Error("Unable to load ".concat(url, " ").concat(response.status, " ").concat(response.statusText));
+                        }
+                        return [2, response];
+                }
+            });
+        });
+    }
+    function loadAsDataURL(url, mimeType) {
+        return __awaiter(this, void 0, void 0, function () {
+            var response;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4, getOKResponse(url, mimeType)];
+                    case 1:
+                        response = _a.sent();
+                        return [4, readResponseAsDataURL(response)];
+                    case 2: return [2, _a.sent()];
+                }
+            });
+        });
+    }
+    function readResponseAsDataURL(response) {
+        return __awaiter(this, void 0, void 0, function () {
+            var blob, dataURL;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4, response.blob()];
+                    case 1:
+                        blob = _a.sent();
+                        return [4, (new Promise(function (resolve) {
+                                var reader = new FileReader();
+                                reader.onloadend = function () { return resolve(reader.result); };
+                                reader.readAsDataURL(blob);
+                            }))];
+                    case 2:
+                        dataURL = _a.sent();
+                        return [2, dataURL];
+                }
+            });
+        });
+    }
+
+    var throwCORSError = function (url) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            return [2, Promise.reject(new Error([
+                    'Embedded Dark Reader cannot access a cross-origin resource',
+                    url,
+                    'Overview your URLs and CORS policies or use',
+                    '`DarkReader.setFetchMethod(fetch: (url) => Promise<Response>))`.',
+                    'See if using `DarkReader.setFetchMethod(window.fetch)`',
+                    'before `DarkReader.enable()` works.'
+                ].join(' ')))];
+        });
+    }); };
+    var fetcher = throwCORSError;
+    function setFetchMethod$1(fetch) {
+        if (fetch) {
+            fetcher = fetch;
+        }
+        else {
+            fetcher = throwCORSError;
+        }
+    }
+    function callFetchMethod(url) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4, fetcher(url)];
+                    case 1: return [2, _a.sent()];
+                }
+            });
+        });
+    }
+
+    if (!window.chrome) {
+        window.chrome = {};
+    }
+    if (!chrome.runtime) {
+        chrome.runtime = {};
+    }
+    var messageListeners = new Set();
+    function sendMessage() {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        return __awaiter(this, void 0, void 0, function () {
+            var id_1, _a, url, responseType, response, text_1, error_1;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!(args[0] && args[0].type === MessageType.CS_FETCH)) return [3, 8];
+                        id_1 = args[0].id;
+                        _b.label = 1;
+                    case 1:
+                        _b.trys.push([1, 7, , 8]);
+                        _a = args[0].data, url = _a.url, responseType = _a.responseType;
+                        return [4, callFetchMethod(url)];
+                    case 2:
+                        response = _b.sent();
+                        if (!(responseType === 'data-url')) return [3, 4];
+                        return [4, readResponseAsDataURL(response)];
+                    case 3:
+                        text_1 = _b.sent();
+                        return [3, 6];
+                    case 4: return [4, response.text()];
+                    case 5:
+                        text_1 = _b.sent();
+                        _b.label = 6;
+                    case 6:
+                        messageListeners.forEach(function (cb) { return cb({ type: MessageType.BG_FETCH_RESPONSE, data: text_1, error: null, id: id_1 }); });
+                        return [3, 8];
+                    case 7:
+                        error_1 = _b.sent();
+                        console.error(error_1);
+                        messageListeners.forEach(function (cb) { return cb({ type: MessageType.BG_FETCH_RESPONSE, data: null, error: error_1, id: id_1 }); });
+                        return [3, 8];
+                    case 8: return [2];
+                }
+            });
+        });
+    }
+    function addMessageListener(callback) {
+        messageListeners.add(callback);
+    }
+    if (typeof chrome.runtime.sendMessage === 'function') {
+        var nativeSendMessage_1 = chrome.runtime.sendMessage;
+        chrome.runtime.sendMessage = function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            sendMessage.apply(void 0, __spreadArray([], __read(args), false));
+            nativeSendMessage_1.apply(chrome.runtime, args);
+        };
+    }
+    else {
+        chrome.runtime.sendMessage = sendMessage;
+    }
+    if (!chrome.runtime.onMessage) {
+        chrome.runtime.onMessage = {};
+    }
+    if (typeof chrome.runtime.onMessage.addListener === 'function') {
+        var nativeAddListener_1 = chrome.runtime.onMessage.addListener;
+        chrome.runtime.onMessage.addListener = function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            addMessageListener(args[0]);
+            nativeAddListener_1.apply(chrome.runtime.onMessage, args);
+        };
+    }
+    else {
+        chrome.runtime.onMessage.addListener = function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            return addMessageListener(args[0]);
+        };
+    }
+
+    var ThemeEngines = {
+        cssFilter: 'cssFilter',
+        svgFilter: 'svgFilter',
+        staticTheme: 'staticTheme',
+        dynamicTheme: 'dynamicTheme',
+    };
+
+    var DEFAULT_COLORS = {
+        darkScheme: {
+            background: '#181a1b',
+            text: '#e8e6e3',
+        },
+        lightScheme: {
+            background: '#dcdad7',
+            text: '#181a1b',
+        },
+    };
+    var DEFAULT_THEME = {
+        mode: 1,
+        brightness: 100,
+        contrast: 100,
+        grayscale: 0,
+        sepia: 0,
+        useFont: false,
+        fontFamily: isMacOS ? 'Helvetica Neue' : isWindows ? 'Segoe UI' : 'Open Sans',
+        textStroke: 0,
+        engine: ThemeEngines.dynamicTheme,
+        stylesheet: '',
+        darkSchemeBackgroundColor: DEFAULT_COLORS.darkScheme.background,
+        darkSchemeTextColor: DEFAULT_COLORS.darkScheme.text,
+        lightSchemeBackgroundColor: DEFAULT_COLORS.lightScheme.background,
+        lightSchemeTextColor: DEFAULT_COLORS.lightScheme.text,
+        scrollbarColor: isMacOS ? '' : 'auto',
+        selectionColor: 'auto',
+        styleSystemControls: !isCSSColorSchemePropSupported,
+        lightColorScheme: 'Default',
+        darkColorScheme: 'Default',
+        immediateModify: false,
+    };
+
+    function isArrayLike(items) {
+        return items.length != null;
+    }
+    function forEach(items, iterator) {
+        var e_1, _a;
+        if (isArrayLike(items)) {
+            for (var i = 0, len = items.length; i < len; i++) {
+                iterator(items[i]);
+            }
+        }
+        else {
+            try {
+                for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
+                    var item = items_1_1.value;
+                    iterator(item);
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (items_1_1 && !items_1_1.done && (_a = items_1.return)) _a.call(items_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        }
+    }
+    function push(array, addition) {
+        forEach(addition, function (a) { return array.push(a); });
+    }
+    function toArray(items) {
+        var results = [];
+        for (var i = 0, len = items.length; i < len; i++) {
+            results.push(items[i]);
+        }
+        return results;
+    }
+
+    function logInfo() {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+    }
+    function logWarn() {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+    }
+
+    function throttle(callback) {
+        var pending = false;
+        var frameId = null;
+        var lastArgs;
+        var throttled = (function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            lastArgs = args;
+            if (frameId) {
+                pending = true;
+            }
+            else {
+                callback.apply(void 0, __spreadArray([], __read(lastArgs), false));
+                frameId = requestAnimationFrame(function () {
+                    frameId = null;
+                    if (pending) {
+                        callback.apply(void 0, __spreadArray([], __read(lastArgs), false));
+                        pending = false;
+                    }
+                });
+            }
+        });
+        var cancel = function () {
+            cancelAnimationFrame(frameId);
+            pending = false;
+            frameId = null;
+        };
+        return Object.assign(throttled, { cancel: cancel });
+    }
+    function createAsyncTasksQueue() {
+        var tasks = [];
+        var frameId = null;
+        function runTasks() {
+            var task;
+            while ((task = tasks.shift())) {
+                task();
+            }
+            frameId = null;
+        }
+        function add(task) {
+            tasks.push(task);
+            if (!frameId) {
+                frameId = requestAnimationFrame(runTasks);
+            }
+        }
+        function cancel() {
+            tasks.splice(0);
+            cancelAnimationFrame(frameId);
+            frameId = null;
+        }
+        return { add: add, cancel: cancel };
+    }
+
+    function getDuration(time) {
+        var duration = 0;
+        if (time.seconds) {
+            duration += time.seconds * 1000;
+        }
+        if (time.minutes) {
+            duration += time.minutes * 60 * 1000;
+        }
+        if (time.hours) {
+            duration += time.hours * 60 * 60 * 1000;
+        }
+        if (time.days) {
+            duration += time.days * 24 * 60 * 60 * 1000;
+        }
+        return duration;
+    }
+
+    function removeNode(node) {
+        node && node.parentNode && node.parentNode.removeChild(node);
+    }
+    function watchForNodePosition(node, mode, onRestore) {
+        if (onRestore === void 0) { onRestore = Function.prototype; }
+        var MAX_ATTEMPTS_COUNT = 10;
+        var RETRY_TIMEOUT = getDuration({ seconds: 2 });
+        var ATTEMPTS_INTERVAL = getDuration({ seconds: 10 });
+        var prevSibling = node.previousSibling;
+        var parent = node.parentNode;
+        if (!parent) {
+            throw new Error('Unable to watch for node position: parent element not found');
+        }
+        if (mode === 'prev-sibling' && !prevSibling) {
+            throw new Error('Unable to watch for node position: there is no previous sibling');
+        }
+        var attempts = 0;
+        var start = null;
+        var timeoutId = null;
+        var restore = throttle(function () {
+            if (timeoutId) {
+                return;
+            }
+            attempts++;
+            var now = Date.now();
+            if (start == null) {
+                start = now;
+            }
+            else if (attempts >= MAX_ATTEMPTS_COUNT) {
+                if (now - start < ATTEMPTS_INTERVAL) {
+                    logWarn("Node position watcher paused: retry in ".concat(RETRY_TIMEOUT, "ms"), node, prevSibling);
+                    timeoutId = setTimeout(function () {
+                        start = null;
+                        attempts = 0;
+                        timeoutId = null;
+                        restore();
+                    }, RETRY_TIMEOUT);
+                    return;
+                }
+                start = now;
+                attempts = 1;
+            }
+            if (mode === 'parent') {
+                if (prevSibling && prevSibling.parentNode !== parent) {
+                    logWarn('Unable to restore node position: sibling parent changed', node, prevSibling, parent);
+                    stop();
+                    return;
+                }
+            }
+            if (mode === 'prev-sibling') {
+                if (prevSibling.parentNode == null) {
+                    logWarn('Unable to restore node position: sibling was removed', node, prevSibling, parent);
+                    stop();
+                    return;
+                }
+                if (prevSibling.parentNode !== parent) {
+                    logWarn('Style was moved to another parent', node, prevSibling, parent);
+                    updateParent(prevSibling.parentNode);
+                }
+            }
+            logWarn('Restoring node position', node, prevSibling, parent);
+            parent.insertBefore(node, prevSibling ? prevSibling.nextSibling : parent.firstChild);
+            observer.takeRecords();
+            onRestore && onRestore();
+        });
+        var observer = new MutationObserver(function () {
+            if ((mode === 'parent' && node.parentNode !== parent) ||
+                (mode === 'prev-sibling' && node.previousSibling !== prevSibling)) {
+                restore();
+            }
+        });
+        var run = function () {
+            observer.observe(parent, { childList: true });
+        };
+        var stop = function () {
+            clearTimeout(timeoutId);
+            observer.disconnect();
+            restore.cancel();
+        };
+        var skip = function () {
+            observer.takeRecords();
+        };
+        var updateParent = function (parentNode) {
+            parent = parentNode;
+            stop();
+            run();
+        };
+        run();
+        return { run: run, stop: stop, skip: skip };
+    }
+    function iterateShadowHosts(root, iterator) {
+        if (root == null) {
+            return;
+        }
+        var walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
+            acceptNode: function (node) {
+                return node.shadowRoot == null ? NodeFilter.FILTER_SKIP : NodeFilter.FILTER_ACCEPT;
+            }
+        });
+        for (var node = (root.shadowRoot ? walker.currentNode : walker.nextNode()); node != null; node = walker.nextNode()) {
+            if (node.classList.contains('surfingkeys_hints_host')) {
+                continue;
+            }
+            iterator(node);
+            iterateShadowHosts(node.shadowRoot, iterator);
+        }
+    }
+    var isDOMReady = function () {
+        return document.readyState === 'complete' || document.readyState === 'interactive';
+    };
+    function setIsDOMReady(newFunc) {
+        isDOMReady = newFunc;
+    }
+    var readyStateListeners = new Set();
+    function addDOMReadyListener(listener) {
+        isDOMReady() ? listener() : readyStateListeners.add(listener);
+    }
+    function removeDOMReadyListener(listener) {
+        readyStateListeners.delete(listener);
+    }
+    function isReadyStateComplete() {
+        return document.readyState === 'complete';
+    }
+    var readyStateCompleteListeners = new Set();
+    function addReadyStateCompleteListener(listener) {
+        isReadyStateComplete() ? listener() : readyStateCompleteListeners.add(listener);
+    }
+    function cleanReadyStateCompleteListeners() {
+        readyStateCompleteListeners.clear();
+    }
+    if (!isDOMReady()) {
+        var onReadyStateChange_1 = function () {
+            if (isDOMReady()) {
+                readyStateListeners.forEach(function (listener) { return listener(); });
+                readyStateListeners.clear();
+                if (isReadyStateComplete()) {
+                    document.removeEventListener('readystatechange', onReadyStateChange_1);
+                    readyStateCompleteListeners.forEach(function (listener) { return listener(); });
+                    readyStateCompleteListeners.clear();
+                }
+            }
+        };
+        document.addEventListener('readystatechange', onReadyStateChange_1);
+    }
+    var HUGE_MUTATIONS_COUNT = 1000;
+    function isHugeMutation(mutations) {
+        if (mutations.length > HUGE_MUTATIONS_COUNT) {
+            return true;
+        }
+        var addedNodesCount = 0;
+        for (var i = 0; i < mutations.length; i++) {
+            addedNodesCount += mutations[i].addedNodes.length;
+            if (addedNodesCount > HUGE_MUTATIONS_COUNT) {
+                return true;
+            }
+        }
+        return false;
+    }
+    function getElementsTreeOperations(mutations) {
+        var additions = new Set();
+        var deletions = new Set();
+        var moves = new Set();
+        mutations.forEach(function (m) {
+            forEach(m.addedNodes, function (n) {
+                if (n instanceof Element && n.isConnected) {
+                    additions.add(n);
+                }
+            });
+            forEach(m.removedNodes, function (n) {
+                if (n instanceof Element) {
+                    if (n.isConnected) {
+                        moves.add(n);
+                        additions.delete(n);
+                    }
+                    else {
+                        deletions.add(n);
+                    }
+                }
+            });
+        });
+        var duplicateAdditions = [];
+        var duplicateDeletions = [];
+        additions.forEach(function (node) {
+            if (additions.has(node.parentElement)) {
+                duplicateAdditions.push(node);
+            }
+        });
+        deletions.forEach(function (node) {
+            if (deletions.has(node.parentElement)) {
+                duplicateDeletions.push(node);
+            }
+        });
+        duplicateAdditions.forEach(function (node) { return additions.delete(node); });
+        duplicateDeletions.forEach(function (node) { return deletions.delete(node); });
+        return { additions: additions, moves: moves, deletions: deletions };
+    }
+    var optimizedTreeObservers = new Map();
+    var optimizedTreeCallbacks = new WeakMap();
+    function createOptimizedTreeObserver(root, callbacks) {
+        var observer;
+        var observerCallbacks;
+        var domReadyListener;
+        if (optimizedTreeObservers.has(root)) {
+            observer = optimizedTreeObservers.get(root);
+            observerCallbacks = optimizedTreeCallbacks.get(observer);
+        }
+        else {
+            var hadHugeMutationsBefore_1 = false;
+            var subscribedForReadyState_1 = false;
+            observer = new MutationObserver(function (mutations) {
+                if (isHugeMutation(mutations)) {
+                    if (!hadHugeMutationsBefore_1 || isDOMReady()) {
+                        observerCallbacks.forEach(function (_a) {
+                            var onHugeMutations = _a.onHugeMutations;
+                            return onHugeMutations(root);
+                        });
+                    }
+                    else if (!subscribedForReadyState_1) {
+                        domReadyListener = function () { return observerCallbacks.forEach(function (_a) {
+                            var onHugeMutations = _a.onHugeMutations;
+                            return onHugeMutations(root);
+                        }); };
+                        addDOMReadyListener(domReadyListener);
+                        subscribedForReadyState_1 = true;
+                    }
+                    hadHugeMutationsBefore_1 = true;
+                }
+                else {
+                    var elementsOperations_1 = getElementsTreeOperations(mutations);
+                    observerCallbacks.forEach(function (_a) {
+                        var onMinorMutations = _a.onMinorMutations;
+                        return onMinorMutations(elementsOperations_1);
+                    });
+                }
+            });
+            observer.observe(root, { childList: true, subtree: true });
+            optimizedTreeObservers.set(root, observer);
+            observerCallbacks = new Set();
+            optimizedTreeCallbacks.set(observer, observerCallbacks);
+        }
+        observerCallbacks.add(callbacks);
+        return {
+            disconnect: function () {
+                observerCallbacks.delete(callbacks);
+                if (domReadyListener) {
+                    removeDOMReadyListener(domReadyListener);
+                }
+                if (observerCallbacks.size === 0) {
+                    observer.disconnect();
+                    optimizedTreeCallbacks.delete(observer);
+                    optimizedTreeObservers.delete(root);
+                }
+            },
+        };
+    }
+
+    var anchor;
+    var parsedURLCache = new Map();
+    function fixBaseURL($url) {
+        if (!anchor) {
+            anchor = document.createElement('a');
+        }
+        anchor.href = $url;
+        return anchor.href;
+    }
+    function parseURL($url, $base) {
+        if ($base === void 0) { $base = null; }
+        var key = "".concat($url).concat($base ? ";".concat($base) : '');
+        if (parsedURLCache.has(key)) {
+            return parsedURLCache.get(key);
+        }
+        if ($base) {
+            var parsedURL_1 = new URL($url, fixBaseURL($base));
+            parsedURLCache.set(key, parsedURL_1);
+            return parsedURL_1;
+        }
+        var parsedURL = new URL(fixBaseURL($url));
+        parsedURLCache.set($url, parsedURL);
+        return parsedURL;
+    }
+    function getAbsoluteURL($base, $relative) {
+        if ($relative.match(/^data\\?\:/)) {
+            return $relative;
+        }
+        if (/^\/\//.test($relative)) {
+            return "".concat(location.protocol).concat($relative);
+        }
+        var b = parseURL($base);
+        var a = parseURL($relative, b.href);
+        return a.href;
+    }
+    function isRelativeHrefOnAbsolutePath(href) {
+        if (href.startsWith('data:')) {
+            return true;
+        }
+        var url = parseURL(href);
+        if (url.protocol !== location.protocol) {
+            return false;
+        }
+        if (url.hostname !== location.hostname) {
+            return false;
+        }
+        if (url.port !== location.port) {
+            return false;
+        }
+        return url.pathname === location.pathname;
+    }
+
+    function iterateCSSRules(rules, iterate, onMediaRuleError) {
+        forEach(rules, function (rule) {
+            if (rule.selectorText) {
+                iterate(rule);
+            }
+            else if (rule.href) {
+                try {
+                    iterateCSSRules(rule.styleSheet.cssRules, iterate, onMediaRuleError);
+                }
+                catch (err) {
+                    logInfo("Found a non-loaded link.");
+                    onMediaRuleError && onMediaRuleError();
+                }
+            }
+            else if (rule.media) {
+                var media = Array.from(rule.media);
+                var isScreenOrAllOrQuery = media.some(function (m) { return m.startsWith('screen') || m.startsWith('all') || m.startsWith('('); });
+                var isPrintOrSpeech = media.some(function (m) { return m.startsWith('print') || m.startsWith('speech'); });
+                if (isScreenOrAllOrQuery || !isPrintOrSpeech) {
+                    iterateCSSRules(rule.cssRules, iterate, onMediaRuleError);
+                }
+            }
+            else if (rule.conditionText) {
+                if (CSS.supports(rule.conditionText)) {
+                    iterateCSSRules(rule.cssRules, iterate, onMediaRuleError);
+                }
+            }
+            else {
+                logWarn("CSSRule type not supported", rule);
+            }
+        });
+    }
+    var shorthandVarDependantProperties = [
+        'background',
+        'border',
+        'border-color',
+        'border-bottom',
+        'border-left',
+        'border-right',
+        'border-top',
+        'outline',
+        'outline-color',
+    ];
+    var shorthandVarDepPropRegexps = isSafari ? shorthandVarDependantProperties.map(function (prop) {
+        var regexp = new RegExp("".concat(prop, ":\\s*(.*?)\\s*;"));
+        return [prop, regexp];
+    }) : null;
+    function iterateCSSDeclarations(style, iterate) {
+        forEach(style, function (property) {
+            var value = style.getPropertyValue(property).trim();
+            if (!value) {
+                return;
+            }
+            iterate(property, value);
+        });
+        var cssText = style.cssText;
+        if (cssText.includes('var(')) {
+            if (isSafari) {
+                shorthandVarDepPropRegexps.forEach(function (_a) {
+                    var _b = __read(_a, 2), prop = _b[0], regexp = _b[1];
+                    var match = cssText.match(regexp);
+                    if (match && match[1]) {
+                        var val = match[1].trim();
+                        iterate(prop, val);
+                    }
+                });
+            }
+            else {
+                shorthandVarDependantProperties.forEach(function (prop) {
+                    var val = style.getPropertyValue(prop);
+                    if (val && val.includes('var(')) {
+                        iterate(prop, val);
+                    }
+                });
+            }
+        }
+    }
+    var cssURLRegex = /url\((('.+?')|(".+?")|([^\)]*?))\)/g;
+    var cssImportRegex = /@import\s*(url\()?(('.+?')|(".+?")|([^\)]*?))\)? ?(screen)?;?/gi;
+    function getCSSURLValue(cssURL) {
+        return cssURL.trim().replace(/^url\((.*)\)$/, '$1').trim().replace(/^"(.*)"$/, '$1').replace(/^'(.*)'$/, '$1');
+    }
+    function getCSSBaseBath(url) {
+        var cssURL = parseURL(url);
+        return "".concat(cssURL.origin).concat(cssURL.pathname.replace(/\?.*$/, '').replace(/(\/)([^\/]+)$/i, '$1'));
+    }
+    function replaceCSSRelativeURLsWithAbsolute($css, cssBasePath) {
+        return $css.replace(cssURLRegex, function (match) {
+            var pathValue = getCSSURLValue(match);
+            try {
+                return "url(\"".concat(getAbsoluteURL(cssBasePath, pathValue), "\")");
+            }
+            catch (err) {
+                logWarn('Not able to replace relative URL with Absolute URL, skipping');
+                return match;
+            }
+        });
+    }
+    var cssCommentsRegex = /\/\*[\s\S]*?\*\//g;
+    function removeCSSComments($css) {
+        return $css.replace(cssCommentsRegex, '');
+    }
+    var fontFaceRegex = /@font-face\s*{[^}]*}/g;
+    function replaceCSSFontFace($css) {
+        return $css.replace(fontFaceRegex, '');
+    }
+
+    function evalMath(expression) {
+        var rpnStack = [];
+        var workingStack = [];
+        var lastToken;
+        for (var i = 0, len = expression.length; i < len; i++) {
+            var token = expression[i];
+            if (!token || token === ' ') {
+                continue;
+            }
+            if (operators.has(token)) {
+                var op = operators.get(token);
+                while (workingStack.length) {
+                    var currentOp = operators.get(workingStack[0]);
+                    if (!currentOp) {
+                        break;
+                    }
+                    if (op.lessOrEqualThan(currentOp)) {
+                        rpnStack.push(workingStack.shift());
+                    }
+                    else {
+                        break;
+                    }
+                }
+                workingStack.unshift(token);
+            }
+            else if (!lastToken || operators.has(lastToken)) {
+                rpnStack.push(token);
+            }
+            else {
+                rpnStack[rpnStack.length - 1] += token;
+            }
+            lastToken = token;
+        }
+        rpnStack.push.apply(rpnStack, __spreadArray([], __read(workingStack), false));
+        var stack = [];
+        for (var i = 0, len = rpnStack.length; i < len; i++) {
+            var op = operators.get(rpnStack[i]);
+            if (op) {
+                var args = stack.splice(0, 2);
+                stack.push(op.exec(args[1], args[0]));
+            }
+            else {
+                stack.unshift(parseFloat(rpnStack[i]));
+            }
+        }
+        return stack[0];
+    }
+    var Operator = (function () {
+        function Operator(precedence, method) {
+            this.precendce = precedence;
+            this.execMethod = method;
+        }
+        Operator.prototype.exec = function (left, right) {
+            return this.execMethod(left, right);
+        };
+        Operator.prototype.lessOrEqualThan = function (op) {
+            return this.precendce <= op.precendce;
+        };
+        return Operator;
+    }());
+    var operators = new Map([
+        ['+', new Operator(1, function (left, right) { return left + right; })],
+        ['-', new Operator(1, function (left, right) { return left - right; })],
+        ['*', new Operator(2, function (left, right) { return left * right; })],
+        ['/', new Operator(2, function (left, right) { return left / right; })],
+    ]);
+
+    function getMatches(regex, input, group) {
+        if (group === void 0) { group = 0; }
+        var matches = [];
+        var m;
+        while ((m = regex.exec(input))) {
+            matches.push(m[group]);
+        }
+        return matches;
+    }
+    function formatCSS(text) {
+        function trimLeft(text) {
+            return text.replace(/^\s+/, '');
+        }
+        function getIndent(depth) {
+            if (depth === 0) {
+                return '';
+            }
+            return ' '.repeat(4 * depth);
+        }
+        if (text.length < 50000) {
+            var emptyRuleRegexp = /[^{}]+{\s*}/;
+            while (emptyRuleRegexp.test(text)) {
+                text = text.replace(emptyRuleRegexp, '');
+            }
+        }
+        var css = (text
+            .replace(/\s{2,}/g, ' ')
+            .replace(/\{/g, '{\n')
+            .replace(/\}/g, '\n}\n')
+            .replace(/\;(?![^\(|\"]*(\)|\"))/g, ';\n')
+            .replace(/\,(?![^\(|\"]*(\)|\"))/g, ',\n')
+            .replace(/\n\s*\n/g, '\n')
+            .split('\n'));
+        var depth = 0;
+        var formatted = [];
+        for (var x = 0, len = css.length; x < len; x++) {
+            var line = "".concat(css[x], "\n");
+            if (line.includes('{')) {
+                formatted.push(getIndent(depth++) + trimLeft(line));
+            }
+            else if (line.includes('\}')) {
+                formatted.push(getIndent(--depth) + trimLeft(line));
+            }
+            else {
+                formatted.push(getIndent(depth) + trimLeft(line));
+            }
+        }
+        return formatted.join('').trim();
+    }
+    function getParenthesesRange(input, searchStartIndex) {
+        if (searchStartIndex === void 0) { searchStartIndex = 0; }
+        var length = input.length;
+        var depth = 0;
+        var firstOpenIndex = -1;
+        for (var i = searchStartIndex; i < length; i++) {
+            if (depth === 0) {
+                var openIndex = input.indexOf('(', i);
+                if (openIndex < 0) {
+                    break;
+                }
+                firstOpenIndex = openIndex;
+                depth++;
+                i = openIndex;
+            }
+            else {
+                var closingIndex = input.indexOf(')', i);
+                if (closingIndex < 0) {
+                    break;
+                }
+                var openIndex = input.indexOf('(', i);
+                if (openIndex < 0 || closingIndex < openIndex) {
+                    depth--;
+                    if (depth === 0) {
+                        return { start: firstOpenIndex, end: closingIndex + 1 };
+                    }
+                    i = closingIndex;
+                }
+                else {
+                    depth++;
+                    i = openIndex;
+                }
+            }
+        }
+        return null;
+    }
+
+    function hslToRGB(_a) {
+        var h = _a.h, s = _a.s, l = _a.l, _b = _a.a, a = _b === void 0 ? 1 : _b;
+        if (s === 0) {
+            var _c = __read([l, l, l].map(function (x) { return Math.round(x * 255); }), 3), r_1 = _c[0], b_1 = _c[1], g_1 = _c[2];
+            return { r: r_1, g: g_1, b: b_1, a: a };
+        }
+        var c = (1 - Math.abs(2 * l - 1)) * s;
+        var x = c * (1 - Math.abs((h / 60) % 2 - 1));
+        var m = l - c / 2;
+        var _d = __read((h < 60 ? [c, x, 0] :
+            h < 120 ? [x, c, 0] :
+                h < 180 ? [0, c, x] :
+                    h < 240 ? [0, x, c] :
+                        h < 300 ? [x, 0, c] :
+                            [c, 0, x]).map(function (n) { return Math.round((n + m) * 255); }), 3), r = _d[0], g = _d[1], b = _d[2];
+        return { r: r, g: g, b: b, a: a };
+    }
+    function rgbToHSL(_a) {
+        var r255 = _a.r, g255 = _a.g, b255 = _a.b, _b = _a.a, a = _b === void 0 ? 1 : _b;
+        var r = r255 / 255;
+        var g = g255 / 255;
+        var b = b255 / 255;
+        var max = Math.max(r, g, b);
+        var min = Math.min(r, g, b);
+        var c = max - min;
+        var l = (max + min) / 2;
+        if (c === 0) {
+            return { h: 0, s: 0, l: l, a: a };
+        }
+        var h = (max === r ? (((g - b) / c) % 6) :
+            max === g ? ((b - r) / c + 2) :
+                ((r - g) / c + 4)) * 60;
+        if (h < 0) {
+            h += 360;
+        }
+        var s = c / (1 - Math.abs(2 * l - 1));
+        return { h: h, s: s, l: l, a: a };
+    }
+    function toFixed(n, digits) {
+        if (digits === void 0) { digits = 0; }
+        var fixed = n.toFixed(digits);
+        if (digits === 0) {
+            return fixed;
+        }
+        var dot = fixed.indexOf('.');
+        if (dot >= 0) {
+            var zerosMatch = fixed.match(/0+$/);
+            if (zerosMatch) {
+                if (zerosMatch.index === dot + 1) {
+                    return fixed.substring(0, dot);
+                }
+                return fixed.substring(0, zerosMatch.index);
+            }
+        }
+        return fixed;
+    }
+    function rgbToString(rgb) {
+        var r = rgb.r, g = rgb.g, b = rgb.b, a = rgb.a;
+        if (a != null && a < 1) {
+            return "rgba(".concat(toFixed(r), ", ").concat(toFixed(g), ", ").concat(toFixed(b), ", ").concat(toFixed(a, 2), ")");
+        }
+        return "rgb(".concat(toFixed(r), ", ").concat(toFixed(g), ", ").concat(toFixed(b), ")");
+    }
+    function rgbToHexString(_a) {
+        var r = _a.r, g = _a.g, b = _a.b, a = _a.a;
+        return "#".concat((a != null && a < 1 ? [r, g, b, Math.round(a * 255)] : [r, g, b]).map(function (x) {
+            return "".concat(x < 16 ? '0' : '').concat(x.toString(16));
+        }).join(''));
+    }
+    function hslToString(hsl) {
+        var h = hsl.h, s = hsl.s, l = hsl.l, a = hsl.a;
+        if (a != null && a < 1) {
+            return "hsla(".concat(toFixed(h), ", ").concat(toFixed(s * 100), "%, ").concat(toFixed(l * 100), "%, ").concat(toFixed(a, 2), ")");
+        }
+        return "hsl(".concat(toFixed(h), ", ").concat(toFixed(s * 100), "%, ").concat(toFixed(l * 100), "%)");
+    }
+    var rgbMatch = /^rgba?\([^\(\)]+\)$/;
+    var hslMatch = /^hsla?\([^\(\)]+\)$/;
+    var hexMatch = /^#[0-9a-f]+$/i;
+    function parse($color) {
+        var c = $color.trim().toLowerCase();
+        if (c.match(rgbMatch)) {
+            return parseRGB(c);
+        }
+        if (c.match(hslMatch)) {
+            return parseHSL(c);
+        }
+        if (c.match(hexMatch)) {
+            return parseHex(c);
+        }
+        if (knownColors.has(c)) {
+            return getColorByName(c);
+        }
+        if (systemColors.has(c)) {
+            return getSystemColor(c);
+        }
+        if ($color === 'transparent') {
+            return { r: 0, g: 0, b: 0, a: 0 };
+        }
+        throw new Error("Unable to parse ".concat($color));
+    }
+    function getNumbers($color) {
+        var numbers = [];
+        var prevPos = 0;
+        var isMining = false;
+        var startIndex = $color.indexOf('(');
+        $color = $color.substring(startIndex + 1, $color.length - 1);
+        for (var i = 0; i < $color.length; i++) {
+            var c = $color[i];
+            if (c >= '0' && c <= '9' || c === '.' || c === '+' || c === '-') {
+                isMining = true;
+            }
+            else if (isMining && (c === ' ' || c === ',')) {
+                numbers.push($color.substring(prevPos, i));
+                isMining = false;
+                prevPos = i + 1;
+            }
+            else if (!isMining) {
+                prevPos = i + 1;
+            }
+        }
+        if (isMining) {
+            numbers.push($color.substring(prevPos, $color.length));
+        }
+        return numbers;
+    }
+    function getNumbersFromString(str, range, units) {
+        var raw = getNumbers(str);
+        var unitsList = Object.entries(units);
+        var numbers = raw.map(function (r) { return r.trim(); }).map(function (r, i) {
+            var n;
+            var unit = unitsList.find(function (_a) {
+                var _b = __read(_a, 1), u = _b[0];
+                return r.endsWith(u);
+            });
+            if (unit) {
+                n = parseFloat(r.substring(0, r.length - unit[0].length)) / unit[1] * range[i];
+            }
+            else {
+                n = parseFloat(r);
+            }
+            if (range[i] > 1) {
+                return Math.round(n);
+            }
+            return n;
+        });
+        return numbers;
+    }
+    var rgbRange = [255, 255, 255, 1];
+    var rgbUnits = { '%': 100 };
+    function parseRGB($rgb) {
+        var _a = __read(getNumbersFromString($rgb, rgbRange, rgbUnits), 4), r = _a[0], g = _a[1], b = _a[2], _b = _a[3], a = _b === void 0 ? 1 : _b;
+        return { r: r, g: g, b: b, a: a };
+    }
+    var hslRange = [360, 1, 1, 1];
+    var hslUnits = { '%': 100, 'deg': 360, 'rad': 2 * Math.PI, 'turn': 1 };
+    function parseHSL($hsl) {
+        var _a = __read(getNumbersFromString($hsl, hslRange, hslUnits), 4), h = _a[0], s = _a[1], l = _a[2], _b = _a[3], a = _b === void 0 ? 1 : _b;
+        return hslToRGB({ h: h, s: s, l: l, a: a });
+    }
+    function parseHex($hex) {
+        var h = $hex.substring(1);
+        switch (h.length) {
+            case 3:
+            case 4: {
+                var _a = __read([0, 1, 2].map(function (i) { return parseInt("".concat(h[i]).concat(h[i]), 16); }), 3), r = _a[0], g = _a[1], b = _a[2];
+                var a = h.length === 3 ? 1 : (parseInt("".concat(h[3]).concat(h[3]), 16) / 255);
+                return { r: r, g: g, b: b, a: a };
+            }
+            case 6:
+            case 8: {
+                var _b = __read([0, 2, 4].map(function (i) { return parseInt(h.substring(i, i + 2), 16); }), 3), r = _b[0], g = _b[1], b = _b[2];
+                var a = h.length === 6 ? 1 : (parseInt(h.substring(6, 8), 16) / 255);
+                return { r: r, g: g, b: b, a: a };
+            }
+        }
+        throw new Error("Unable to parse ".concat($hex));
+    }
+    function getColorByName($color) {
+        var n = knownColors.get($color);
+        return {
+            r: (n >> 16) & 255,
+            g: (n >> 8) & 255,
+            b: (n >> 0) & 255,
+            a: 1
+        };
+    }
+    function getSystemColor($color) {
+        var n = systemColors.get($color);
+        return {
+            r: (n >> 16) & 255,
+            g: (n >> 8) & 255,
+            b: (n >> 0) & 255,
+            a: 1
+        };
+    }
+    function lowerCalcExpression(color) {
+        var searchIndex = 0;
+        var replaceBetweenIndices = function (start, end, replacement) {
+            color = color.substring(0, start) + replacement + color.substring(end);
+        };
+        while ((searchIndex = color.indexOf('calc(')) !== -1) {
+            var range = getParenthesesRange(color, searchIndex);
+            if (!range) {
+                break;
+            }
+            var slice = color.slice(range.start + 1, range.end - 1);
+            var includesPercentage = slice.includes('%');
+            slice = slice.split('%').join('');
+            var output = Math.round(evalMath(slice));
+            replaceBetweenIndices(range.start - 4, range.end, output + (includesPercentage ? '%' : ''));
+        }
+        return color;
+    }
+    var knownColors = new Map(Object.entries({
+        aliceblue: 0xf0f8ff,
+        antiquewhite: 0xfaebd7,
+        aqua: 0x00ffff,
+        aquamarine: 0x7fffd4,
+        azure: 0xf0ffff,
+        beige: 0xf5f5dc,
+        bisque: 0xffe4c4,
+        black: 0x000000,
+        blanchedalmond: 0xffebcd,
+        blue: 0x0000ff,
+        blueviolet: 0x8a2be2,
+        brown: 0xa52a2a,
+        burlywood: 0xdeb887,
+        cadetblue: 0x5f9ea0,
+        chartreuse: 0x7fff00,
+        chocolate: 0xd2691e,
+        coral: 0xff7f50,
+        cornflowerblue: 0x6495ed,
+        cornsilk: 0xfff8dc,
+        crimson: 0xdc143c,
+        cyan: 0x00ffff,
+        darkblue: 0x00008b,
+        darkcyan: 0x008b8b,
+        darkgoldenrod: 0xb8860b,
+        darkgray: 0xa9a9a9,
+        darkgrey: 0xa9a9a9,
+        darkgreen: 0x006400,
+        darkkhaki: 0xbdb76b,
+        darkmagenta: 0x8b008b,
+        darkolivegreen: 0x556b2f,
+        darkorange: 0xff8c00,
+        darkorchid: 0x9932cc,
+        darkred: 0x8b0000,
+        darksalmon: 0xe9967a,
+        darkseagreen: 0x8fbc8f,
+        darkslateblue: 0x483d8b,
+        darkslategray: 0x2f4f4f,
+        darkslategrey: 0x2f4f4f,
+        darkturquoise: 0x00ced1,
+        darkviolet: 0x9400d3,
+        deeppink: 0xff1493,
+        deepskyblue: 0x00bfff,
+        dimgray: 0x696969,
+        dimgrey: 0x696969,
+        dodgerblue: 0x1e90ff,
+        firebrick: 0xb22222,
+        floralwhite: 0xfffaf0,
+        forestgreen: 0x228b22,
+        fuchsia: 0xff00ff,
+        gainsboro: 0xdcdcdc,
+        ghostwhite: 0xf8f8ff,
+        gold: 0xffd700,
+        goldenrod: 0xdaa520,
+        gray: 0x808080,
+        grey: 0x808080,
+        green: 0x008000,
+        greenyellow: 0xadff2f,
+        honeydew: 0xf0fff0,
+        hotpink: 0xff69b4,
+        indianred: 0xcd5c5c,
+        indigo: 0x4b0082,
+        ivory: 0xfffff0,
+        khaki: 0xf0e68c,
+        lavender: 0xe6e6fa,
+        lavenderblush: 0xfff0f5,
+        lawngreen: 0x7cfc00,
+        lemonchiffon: 0xfffacd,
+        lightblue: 0xadd8e6,
+        lightcoral: 0xf08080,
+        lightcyan: 0xe0ffff,
+        lightgoldenrodyellow: 0xfafad2,
+        lightgray: 0xd3d3d3,
+        lightgrey: 0xd3d3d3,
+        lightgreen: 0x90ee90,
+        lightpink: 0xffb6c1,
+        lightsalmon: 0xffa07a,
+        lightseagreen: 0x20b2aa,
+        lightskyblue: 0x87cefa,
+        lightslategray: 0x778899,
+        lightslategrey: 0x778899,
+        lightsteelblue: 0xb0c4de,
+        lightyellow: 0xffffe0,
+        lime: 0x00ff00,
+        limegreen: 0x32cd32,
+        linen: 0xfaf0e6,
+        magenta: 0xff00ff,
+        maroon: 0x800000,
+        mediumaquamarine: 0x66cdaa,
+        mediumblue: 0x0000cd,
+        mediumorchid: 0xba55d3,
+        mediumpurple: 0x9370db,
+        mediumseagreen: 0x3cb371,
+        mediumslateblue: 0x7b68ee,
+        mediumspringgreen: 0x00fa9a,
+        mediumturquoise: 0x48d1cc,
+        mediumvioletred: 0xc71585,
+        midnightblue: 0x191970,
+        mintcream: 0xf5fffa,
+        mistyrose: 0xffe4e1,
+        moccasin: 0xffe4b5,
+        navajowhite: 0xffdead,
+        navy: 0x000080,
+        oldlace: 0xfdf5e6,
+        olive: 0x808000,
+        olivedrab: 0x6b8e23,
+        orange: 0xffa500,
+        orangered: 0xff4500,
+        orchid: 0xda70d6,
+        palegoldenrod: 0xeee8aa,
+        palegreen: 0x98fb98,
+        paleturquoise: 0xafeeee,
+        palevioletred: 0xdb7093,
+        papayawhip: 0xffefd5,
+        peachpuff: 0xffdab9,
+        peru: 0xcd853f,
+        pink: 0xffc0cb,
+        plum: 0xdda0dd,
+        powderblue: 0xb0e0e6,
+        purple: 0x800080,
+        rebeccapurple: 0x663399,
+        red: 0xff0000,
+        rosybrown: 0xbc8f8f,
+        royalblue: 0x4169e1,
+        saddlebrown: 0x8b4513,
+        salmon: 0xfa8072,
+        sandybrown: 0xf4a460,
+        seagreen: 0x2e8b57,
+        seashell: 0xfff5ee,
+        sienna: 0xa0522d,
+        silver: 0xc0c0c0,
+        skyblue: 0x87ceeb,
+        slateblue: 0x6a5acd,
+        slategray: 0x708090,
+        slategrey: 0x708090,
+        snow: 0xfffafa,
+        springgreen: 0x00ff7f,
+        steelblue: 0x4682b4,
+        tan: 0xd2b48c,
+        teal: 0x008080,
+        thistle: 0xd8bfd8,
+        tomato: 0xff6347,
+        turquoise: 0x40e0d0,
+        violet: 0xee82ee,
+        wheat: 0xf5deb3,
+        white: 0xffffff,
+        whitesmoke: 0xf5f5f5,
+        yellow: 0xffff00,
+        yellowgreen: 0x9acd32,
+    }));
+    var systemColors = new Map(Object.entries({
+        ActiveBorder: 0x3b99fc,
+        ActiveCaption: 0x000000,
+        AppWorkspace: 0xaaaaaa,
+        Background: 0x6363ce,
+        ButtonFace: 0xffffff,
+        ButtonHighlight: 0xe9e9e9,
+        ButtonShadow: 0x9fa09f,
+        ButtonText: 0x000000,
+        CaptionText: 0x000000,
+        GrayText: 0x7f7f7f,
+        Highlight: 0xb2d7ff,
+        HighlightText: 0x000000,
+        InactiveBorder: 0xffffff,
+        InactiveCaption: 0xffffff,
+        InactiveCaptionText: 0x000000,
+        InfoBackground: 0xfbfcc5,
+        InfoText: 0x000000,
+        Menu: 0xf6f6f6,
+        MenuText: 0xffffff,
+        Scrollbar: 0xaaaaaa,
+        ThreeDDarkShadow: 0x000000,
+        ThreeDFace: 0xc0c0c0,
+        ThreeDHighlight: 0xffffff,
+        ThreeDLightShadow: 0xffffff,
+        ThreeDShadow: 0x000000,
+        Window: 0xececec,
+        WindowFrame: 0xaaaaaa,
+        WindowText: 0x000000,
+        '-webkit-focus-ring-color': 0xe59700
+    }).map(function (_a) {
+        var _b = __read(_a, 2), key = _b[0], value = _b[1];
+        return [key.toLowerCase(), value];
+    }));
+    function getSRGBLightness(r, g, b) {
+        return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+    }
+
+    function scale(x, inLow, inHigh, outLow, outHigh) {
+        return (x - inLow) * (outHigh - outLow) / (inHigh - inLow) + outLow;
+    }
+    function clamp(x, min, max) {
+        return Math.min(max, Math.max(min, x));
+    }
+    function multiplyMatrices(m1, m2) {
+        var result = [];
+        for (var i = 0, len = m1.length; i < len; i++) {
+            result[i] = [];
+            for (var j = 0, len2 = m2[0].length; j < len2; j++) {
+                var sum = 0;
+                for (var k = 0, len3 = m1[0].length; k < len3; k++) {
+                    sum += m1[i][k] * m2[k][j];
+                }
+                result[i][j] = sum;
+            }
+        }
+        return result;
+    }
+
+    function createFilterMatrix(config) {
+        var m = Matrix.identity();
+        if (config.sepia !== 0) {
+            m = multiplyMatrices(m, Matrix.sepia(config.sepia / 100));
+        }
+        if (config.grayscale !== 0) {
+            m = multiplyMatrices(m, Matrix.grayscale(config.grayscale / 100));
+        }
+        if (config.contrast !== 100) {
+            m = multiplyMatrices(m, Matrix.contrast(config.contrast / 100));
+        }
+        if (config.brightness !== 100) {
+            m = multiplyMatrices(m, Matrix.brightness(config.brightness / 100));
+        }
+        if (config.mode === 1) {
+            m = multiplyMatrices(m, Matrix.invertNHue());
+        }
+        return m;
+    }
+    function applyColorMatrix(_a, matrix) {
+        var _b = __read(_a, 3), r = _b[0], g = _b[1], b = _b[2];
+        var rgb = [[r / 255], [g / 255], [b / 255], [1], [1]];
+        var result = multiplyMatrices(matrix, rgb);
+        return [0, 1, 2].map(function (i) { return clamp(Math.round(result[i][0] * 255), 0, 255); });
+    }
+    var Matrix = {
+        identity: function () {
+            return [
+                [1, 0, 0, 0, 0],
+                [0, 1, 0, 0, 0],
+                [0, 0, 1, 0, 0],
+                [0, 0, 0, 1, 0],
+                [0, 0, 0, 0, 1]
+            ];
+        },
+        invertNHue: function () {
+            return [
+                [0.333, -0.667, -0.667, 0, 1],
+                [-0.667, 0.333, -0.667, 0, 1],
+                [-0.667, -0.667, 0.333, 0, 1],
+                [0, 0, 0, 1, 0],
+                [0, 0, 0, 0, 1]
+            ];
+        },
+        brightness: function (v) {
+            return [
+                [v, 0, 0, 0, 0],
+                [0, v, 0, 0, 0],
+                [0, 0, v, 0, 0],
+                [0, 0, 0, 1, 0],
+                [0, 0, 0, 0, 1]
+            ];
+        },
+        contrast: function (v) {
+            var t = (1 - v) / 2;
+            return [
+                [v, 0, 0, 0, t],
+                [0, v, 0, 0, t],
+                [0, 0, v, 0, t],
+                [0, 0, 0, 1, 0],
+                [0, 0, 0, 0, 1]
+            ];
+        },
+        sepia: function (v) {
+            return [
+                [(0.393 + 0.607 * (1 - v)), (0.769 - 0.769 * (1 - v)), (0.189 - 0.189 * (1 - v)), 0, 0],
+                [(0.349 - 0.349 * (1 - v)), (0.686 + 0.314 * (1 - v)), (0.168 - 0.168 * (1 - v)), 0, 0],
+                [(0.272 - 0.272 * (1 - v)), (0.534 - 0.534 * (1 - v)), (0.131 + 0.869 * (1 - v)), 0, 0],
+                [0, 0, 0, 1, 0],
+                [0, 0, 0, 0, 1]
+            ];
+        },
+        grayscale: function (v) {
+            return [
+                [(0.2126 + 0.7874 * (1 - v)), (0.7152 - 0.7152 * (1 - v)), (0.0722 - 0.0722 * (1 - v)), 0, 0],
+                [(0.2126 - 0.2126 * (1 - v)), (0.7152 + 0.2848 * (1 - v)), (0.0722 - 0.0722 * (1 - v)), 0, 0],
+                [(0.2126 - 0.2126 * (1 - v)), (0.7152 - 0.7152 * (1 - v)), (0.0722 + 0.9278 * (1 - v)), 0, 0],
+                [0, 0, 0, 1, 0],
+                [0, 0, 0, 0, 1]
+            ];
+        },
+    };
+
+    function getBgPole(theme) {
+        var isDarkScheme = theme.mode === 1;
+        var prop = isDarkScheme ? 'darkSchemeBackgroundColor' : 'lightSchemeBackgroundColor';
+        return theme[prop];
+    }
+    function getFgPole(theme) {
+        var isDarkScheme = theme.mode === 1;
+        var prop = isDarkScheme ? 'darkSchemeTextColor' : 'lightSchemeTextColor';
+        return theme[prop];
+    }
+    var colorModificationCache = new Map();
+    var colorParseCache$1 = new Map();
+    function parseToHSLWithCache(color) {
+        if (colorParseCache$1.has(color)) {
+            return colorParseCache$1.get(color);
+        }
+        var rgb = parse(color);
+        var hsl = rgbToHSL(rgb);
+        colorParseCache$1.set(color, hsl);
+        return hsl;
+    }
+    function clearColorModificationCache() {
+        colorModificationCache.clear();
+        colorParseCache$1.clear();
+    }
+    var rgbCacheKeys = ['r', 'g', 'b', 'a'];
+    var themeCacheKeys$1 = ['mode', 'brightness', 'contrast', 'grayscale', 'sepia', 'darkSchemeBackgroundColor', 'darkSchemeTextColor', 'lightSchemeBackgroundColor', 'lightSchemeTextColor'];
+    function getCacheId(rgb, theme) {
+        var resultId = '';
+        rgbCacheKeys.forEach(function (key) {
+            resultId += "".concat(rgb[key], ";");
+        });
+        themeCacheKeys$1.forEach(function (key) {
+            resultId += "".concat(theme[key], ";");
+        });
+        return resultId;
+    }
+    function modifyColorWithCache(rgb, theme, modifyHSL, poleColor, anotherPoleColor) {
+        var fnCache;
+        if (colorModificationCache.has(modifyHSL)) {
+            fnCache = colorModificationCache.get(modifyHSL);
+        }
+        else {
+            fnCache = new Map();
+            colorModificationCache.set(modifyHSL, fnCache);
+        }
+        var id = getCacheId(rgb, theme);
+        if (fnCache.has(id)) {
+            return fnCache.get(id);
+        }
+        var hsl = rgbToHSL(rgb);
+        var pole = poleColor == null ? null : parseToHSLWithCache(poleColor);
+        var anotherPole = anotherPoleColor == null ? null : parseToHSLWithCache(anotherPoleColor);
+        var modified = modifyHSL(hsl, pole, anotherPole);
+        var _a = hslToRGB(modified), r = _a.r, g = _a.g, b = _a.b, a = _a.a;
+        var matrix = createFilterMatrix(theme);
+        var _b = __read(applyColorMatrix([r, g, b], matrix), 3), rf = _b[0], gf = _b[1], bf = _b[2];
+        var color = (a === 1 ?
+            rgbToHexString({ r: rf, g: gf, b: bf }) :
+            rgbToString({ r: rf, g: gf, b: bf, a: a }));
+        fnCache.set(id, color);
+        return color;
+    }
+    function noopHSL(hsl) {
+        return hsl;
+    }
+    function modifyColor(rgb, theme) {
+        return modifyColorWithCache(rgb, theme, noopHSL);
+    }
+    function modifyLightSchemeColor(rgb, theme) {
+        var poleBg = getBgPole(theme);
+        var poleFg = getFgPole(theme);
+        return modifyColorWithCache(rgb, theme, modifyLightModeHSL, poleFg, poleBg);
+    }
+    function modifyLightModeHSL(_a, poleFg, poleBg) {
+        var h = _a.h, s = _a.s, l = _a.l, a = _a.a;
+        var isDark = l < 0.5;
+        var isNeutral;
+        if (isDark) {
+            isNeutral = l < 0.2 || s < 0.12;
+        }
+        else {
+            var isBlue = h > 200 && h < 280;
+            isNeutral = s < 0.24 || (l > 0.8 && isBlue);
+        }
+        var hx = h;
+        var sx = l;
+        if (isNeutral) {
+            if (isDark) {
+                hx = poleFg.h;
+                sx = poleFg.s;
+            }
+            else {
+                hx = poleBg.h;
+                sx = poleBg.s;
+            }
+        }
+        var lx = scale(l, 0, 1, poleFg.l, poleBg.l);
+        return { h: hx, s: sx, l: lx, a: a };
+    }
+    var MAX_BG_LIGHTNESS = 0.4;
+    function modifyBgHSL(_a, pole) {
+        var h = _a.h, s = _a.s, l = _a.l, a = _a.a;
+        var isDark = l < 0.5;
+        var isBlue = h > 200 && h < 280;
+        var isNeutral = s < 0.12 || (l > 0.8 && isBlue);
+        if (isDark) {
+            var lx_1 = scale(l, 0, 0.5, 0, MAX_BG_LIGHTNESS);
+            if (isNeutral) {
+                var hx_1 = pole.h;
+                var sx = pole.s;
+                return { h: hx_1, s: sx, l: lx_1, a: a };
+            }
+            return { h: h, s: s, l: lx_1, a: a };
+        }
+        var lx = scale(l, 0.5, 1, MAX_BG_LIGHTNESS, pole.l);
+        if (isNeutral) {
+            var hx_2 = pole.h;
+            var sx = pole.s;
+            return { h: hx_2, s: sx, l: lx, a: a };
+        }
+        var hx = h;
+        var isYellow = h > 60 && h < 180;
+        if (isYellow) {
+            var isCloserToGreen = h > 120;
+            if (isCloserToGreen) {
+                hx = scale(h, 120, 180, 135, 180);
+            }
+            else {
+                hx = scale(h, 60, 120, 60, 105);
+            }
+        }
+        if (hx > 40 && hx < 80) {
+            lx *= 0.75;
+        }
+        return { h: hx, s: s, l: lx, a: a };
+    }
+    function modifyBackgroundColor(rgb, theme) {
+        if (theme.mode === 0) {
+            return modifyLightSchemeColor(rgb, theme);
+        }
+        var pole = getBgPole(theme);
+        return modifyColorWithCache(rgb, __assign(__assign({}, theme), { mode: 0 }), modifyBgHSL, pole);
+    }
+    var MIN_FG_LIGHTNESS = 0.55;
+    function modifyBlueFgHue(hue) {
+        return scale(hue, 205, 245, 205, 220);
+    }
+    function modifyFgHSL(_a, pole) {
+        var h = _a.h, s = _a.s, l = _a.l, a = _a.a;
+        var isLight = l > 0.5;
+        var isNeutral = l < 0.2 || s < 0.24;
+        var isBlue = !isNeutral && h > 205 && h < 245;
+        if (isLight) {
+            var lx_2 = scale(l, 0.5, 1, MIN_FG_LIGHTNESS, pole.l);
+            if (isNeutral) {
+                var hx_3 = pole.h;
+                var sx = pole.s;
+                return { h: hx_3, s: sx, l: lx_2, a: a };
+            }
+            var hx_4 = h;
+            if (isBlue) {
+                hx_4 = modifyBlueFgHue(h);
+            }
+            return { h: hx_4, s: s, l: lx_2, a: a };
+        }
+        if (isNeutral) {
+            var hx_5 = pole.h;
+            var sx = pole.s;
+            var lx_3 = scale(l, 0, 0.5, pole.l, MIN_FG_LIGHTNESS);
+            return { h: hx_5, s: sx, l: lx_3, a: a };
+        }
+        var hx = h;
+        var lx;
+        if (isBlue) {
+            hx = modifyBlueFgHue(h);
+            lx = scale(l, 0, 0.5, pole.l, Math.min(1, MIN_FG_LIGHTNESS + 0.05));
+        }
+        else {
+            lx = scale(l, 0, 0.5, pole.l, MIN_FG_LIGHTNESS);
+        }
+        return { h: hx, s: s, l: lx, a: a };
+    }
+    function modifyForegroundColor(rgb, theme) {
+        if (theme.mode === 0) {
+            return modifyLightSchemeColor(rgb, theme);
+        }
+        var pole = getFgPole(theme);
+        return modifyColorWithCache(rgb, __assign(__assign({}, theme), { mode: 0 }), modifyFgHSL, pole);
+    }
+    function modifyBorderHSL(_a, poleFg, poleBg) {
+        var h = _a.h, s = _a.s, l = _a.l, a = _a.a;
+        var isDark = l < 0.5;
+        var isNeutral = l < 0.2 || s < 0.24;
+        var hx = h;
+        var sx = s;
+        if (isNeutral) {
+            if (isDark) {
+                hx = poleFg.h;
+                sx = poleFg.s;
+            }
+            else {
+                hx = poleBg.h;
+                sx = poleBg.s;
+            }
+        }
+        var lx = scale(l, 0, 1, 0.5, 0.2);
+        return { h: hx, s: sx, l: lx, a: a };
+    }
+    function modifyBorderColor(rgb, theme) {
+        if (theme.mode === 0) {
+            return modifyLightSchemeColor(rgb, theme);
+        }
+        var poleFg = getFgPole(theme);
+        var poleBg = getBgPole(theme);
+        return modifyColorWithCache(rgb, __assign(__assign({}, theme), { mode: 0 }), modifyBorderHSL, poleFg, poleBg);
+    }
+    function modifyShadowColor(rgb, filter) {
+        return modifyBackgroundColor(rgb, filter);
+    }
+    function modifyGradientColor(rgb, filter) {
+        return modifyBackgroundColor(rgb, filter);
+    }
+
+    function createTextStyle(config) {
+        var lines = [];
+        lines.push('*:not(pre, pre *, code, .far, .fa, .glyphicon, [class*="vjs-"], .fab, .fa-github, .fas, .material-icons, .icofont, .typcn, mu, [class*="mu-"], .glyphicon, .icon) {');
+        if (config.useFont && config.fontFamily) {
+            lines.push("  font-family: ".concat(config.fontFamily, " !important;"));
+        }
+        if (config.textStroke > 0) {
+            lines.push("  -webkit-text-stroke: ".concat(config.textStroke, "px !important;"));
+            lines.push("  text-stroke: ".concat(config.textStroke, "px !important;"));
+        }
+        lines.push('}');
+        return lines.join('\n');
+    }
+
+    var FilterMode;
+    (function (FilterMode) {
+        FilterMode[FilterMode["light"] = 0] = "light";
+        FilterMode[FilterMode["dark"] = 1] = "dark";
+    })(FilterMode || (FilterMode = {}));
+    function getCSSFilterValue(config) {
+        var filters = [];
+        if (config.mode === FilterMode.dark) {
+            filters.push('invert(100%) hue-rotate(180deg)');
+        }
+        if (config.brightness !== 100) {
+            filters.push("brightness(".concat(config.brightness, "%)"));
+        }
+        if (config.contrast !== 100) {
+            filters.push("contrast(".concat(config.contrast, "%)"));
+        }
+        if (config.grayscale !== 0) {
+            filters.push("grayscale(".concat(config.grayscale, "%)"));
+        }
+        if (config.sepia !== 0) {
+            filters.push("sepia(".concat(config.sepia, "%)"));
+        }
+        if (filters.length === 0) {
+            return null;
+        }
+        return filters.join(' ');
+    }
+
+    function toSVGMatrix(matrix) {
+        return matrix.slice(0, 4).map(function (m) { return m.map(function (m) { return m.toFixed(3); }).join(' '); }).join(' ');
+    }
+    function getSVGFilterMatrixValue(config) {
+        return toSVGMatrix(createFilterMatrix(config));
+    }
+
+    var counter = 0;
+    var resolvers$1 = new Map();
+    var rejectors = new Map();
+    function bgFetch(request) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2, new Promise(function (resolve, reject) {
+                        var id = ++counter;
+                        resolvers$1.set(id, resolve);
+                        rejectors.set(id, reject);
+                        chrome.runtime.sendMessage({ type: MessageType.CS_FETCH, data: request, id: id });
+                    })];
+            });
+        });
+    }
+    chrome.runtime.onMessage.addListener(function (_a) {
+        var type = _a.type, data = _a.data, error = _a.error, id = _a.id;
+        if (type === MessageType.BG_FETCH_RESPONSE) {
+            var resolve = resolvers$1.get(id);
+            var reject = rejectors.get(id);
+            resolvers$1.delete(id);
+            rejectors.delete(id);
+            if (error) {
+                reject && reject(error);
+            }
+            else {
+                resolve && resolve(data);
+            }
+        }
+    });
+
+    var AsyncQueue = (function () {
+        function AsyncQueue() {
+            this.queue = [];
+            this.timerId = null;
+            this.frameDuration = 1000 / 60;
+        }
+        AsyncQueue.prototype.addToQueue = function (entry) {
+            this.queue.push(entry);
+            this.startQueue();
+        };
+        AsyncQueue.prototype.stopQueue = function () {
+            if (this.timerId !== null) {
+                cancelAnimationFrame(this.timerId);
+                this.timerId = null;
+            }
+            this.queue = [];
+        };
+        AsyncQueue.prototype.startQueue = function () {
+            var _this = this;
+            if (this.timerId) {
+                return;
+            }
+            this.timerId = requestAnimationFrame(function () {
+                _this.timerId = null;
+                var start = Date.now();
+                var cb;
+                while ((cb = _this.queue.shift())) {
+                    cb();
+                    if (Date.now() - start >= _this.frameDuration) {
+                        _this.startQueue();
+                        break;
+                    }
+                }
+            });
+        };
+        return AsyncQueue;
+    }());
+
+    var imageManager = new AsyncQueue();
+    function getImageDetails(url) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            return __generator(this, function (_a) {
+                return [2, new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
+                        var dataURL, error_1, image_1, error_2;
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0:
+                                    if (!url.startsWith('data:')) return [3, 1];
+                                    dataURL = url;
+                                    return [3, 4];
+                                case 1:
+                                    _a.trys.push([1, 3, , 4]);
+                                    return [4, getImageDataURL(url)];
+                                case 2:
+                                    dataURL = _a.sent();
+                                    return [3, 4];
+                                case 3:
+                                    error_1 = _a.sent();
+                                    reject(error_1);
+                                    return [2];
+                                case 4:
+                                    _a.trys.push([4, 6, , 7]);
+                                    return [4, urlToImage(dataURL)];
+                                case 5:
+                                    image_1 = _a.sent();
+                                    imageManager.addToQueue(function () {
+                                        resolve(__assign({ src: url, dataURL: dataURL, width: image_1.naturalWidth, height: image_1.naturalHeight }, analyzeImage(image_1)));
+                                    });
+                                    return [3, 7];
+                                case 6:
+                                    error_2 = _a.sent();
+                                    reject(error_2);
+                                    return [3, 7];
+                                case 7: return [2];
+                            }
+                        });
+                    }); })];
+            });
+        });
+    }
+    function getImageDataURL(url) {
+        return __awaiter(this, void 0, void 0, function () {
+            var parsedURL;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        parsedURL = new URL(url);
+                        if (!(parsedURL.origin === location.origin)) return [3, 2];
+                        return [4, loadAsDataURL(url)];
+                    case 1: return [2, _a.sent()];
+                    case 2: return [4, bgFetch({ url: url, responseType: 'data-url' })];
+                    case 3: return [2, _a.sent()];
+                }
+            });
+        });
+    }
+    function urlToImage(url) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2, new Promise(function (resolve, reject) {
+                        var image = new Image();
+                        image.onload = function () { return resolve(image); };
+                        image.onerror = function () { return reject("Unable to load image ".concat(url)); };
+                        image.src = url;
+                    })];
+            });
+        });
+    }
+    var MAX_ANALIZE_PIXELS_COUNT = 32 * 32;
+    var canvas;
+    var context;
+    function createCanvas() {
+        var maxWidth = MAX_ANALIZE_PIXELS_COUNT;
+        var maxHeight = MAX_ANALIZE_PIXELS_COUNT;
+        canvas = document.createElement('canvas');
+        canvas.width = maxWidth;
+        canvas.height = maxHeight;
+        context = canvas.getContext('2d');
+        context.imageSmoothingEnabled = false;
+    }
+    function removeCanvas() {
+        canvas = null;
+        context = null;
+    }
+    var MAX_IMAGE_SIZE = 5 * 1024 * 1024;
+    function analyzeImage(image) {
+        if (!canvas) {
+            createCanvas();
+        }
+        var naturalWidth = image.naturalWidth, naturalHeight = image.naturalHeight;
+        if (naturalHeight === 0 || naturalWidth === 0) {
+            logWarn("logWarn(Image is empty ".concat(image.currentSrc, ")"));
+            return null;
+        }
+        var size = naturalWidth * naturalHeight * 4;
+        if (size > MAX_IMAGE_SIZE) {
+            logInfo('Skipped large image analyzing(Larger than 5mb in memory)');
+            return {
+                isDark: false,
+                isLight: false,
+                isTransparent: false,
+                isLarge: false,
+                isTooLarge: true,
+            };
+        }
+        var naturalPixelsCount = naturalWidth * naturalHeight;
+        var k = Math.min(1, Math.sqrt(MAX_ANALIZE_PIXELS_COUNT / naturalPixelsCount));
+        var width = Math.ceil(naturalWidth * k);
+        var height = Math.ceil(naturalHeight * k);
+        context.clearRect(0, 0, width, height);
+        context.drawImage(image, 0, 0, naturalWidth, naturalHeight, 0, 0, width, height);
+        var imageData = context.getImageData(0, 0, width, height);
+        var d = imageData.data;
+        var TRANSPARENT_ALPHA_THRESHOLD = 0.05;
+        var DARK_LIGHTNESS_THRESHOLD = 0.4;
+        var LIGHT_LIGHTNESS_THRESHOLD = 0.7;
+        var transparentPixelsCount = 0;
+        var darkPixelsCount = 0;
+        var lightPixelsCount = 0;
+        var i, x, y;
+        var r, g, b, a;
+        var l;
+        for (y = 0; y < height; y++) {
+            for (x = 0; x < width; x++) {
+                i = 4 * (y * width + x);
+                r = d[i + 0];
+                g = d[i + 1];
+                b = d[i + 2];
+                a = d[i + 3];
+                if (a / 255 < TRANSPARENT_ALPHA_THRESHOLD) {
+                    transparentPixelsCount++;
+                }
+                else {
+                    l = getSRGBLightness(r, g, b);
+                    if (l < DARK_LIGHTNESS_THRESHOLD) {
+                        darkPixelsCount++;
+                    }
+                    if (l > LIGHT_LIGHTNESS_THRESHOLD) {
+                        lightPixelsCount++;
+                    }
+                }
+            }
+        }
+        var totalPixelsCount = width * height;
+        var opaquePixelsCount = totalPixelsCount - transparentPixelsCount;
+        var DARK_IMAGE_THRESHOLD = 0.7;
+        var LIGHT_IMAGE_THRESHOLD = 0.7;
+        var TRANSPARENT_IMAGE_THRESHOLD = 0.1;
+        var LARGE_IMAGE_PIXELS_COUNT = 800 * 600;
+        return {
+            isDark: ((darkPixelsCount / opaquePixelsCount) >= DARK_IMAGE_THRESHOLD),
+            isLight: ((lightPixelsCount / opaquePixelsCount) >= LIGHT_IMAGE_THRESHOLD),
+            isTransparent: ((transparentPixelsCount / totalPixelsCount) >= TRANSPARENT_IMAGE_THRESHOLD),
+            isLarge: (naturalPixelsCount >= LARGE_IMAGE_PIXELS_COUNT),
+            isTooLarge: false,
+        };
+    }
+    function getFilteredImageDataURL(_a, theme) {
+        var dataURL = _a.dataURL, width = _a.width, height = _a.height;
+        var matrix = getSVGFilterMatrixValue(theme);
+        var svg = [
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"".concat(width, "\" height=\"").concat(height, "\">"),
+            '<defs>',
+            '<filter id="darkreader-image-filter">',
+            "<feColorMatrix type=\"matrix\" values=\"".concat(matrix, "\" />"),
+            '</filter>',
+            '</defs>',
+            "<image width=\"".concat(width, "\" height=\"").concat(height, "\" filter=\"url(#darkreader-image-filter)\" xlink:href=\"").concat(dataURL, "\" />"),
+            '</svg>',
+        ].join('');
+        return "data:image/svg+xml;base64,".concat(btoa(svg));
+    }
+    function cleanImageProcessingCache() {
+        imageManager && imageManager.stopQueue();
+        removeCanvas();
+    }
+
+    var gradientLength = 'gradient'.length;
+    var conicGradient = 'conic-';
+    var conicGradientLength = conicGradient.length;
+    var radialGradient = 'radial-';
+    var linearGradient = 'linear-';
+    function parseGradient(value) {
+        var result = [];
+        var index = 0;
+        var startIndex = conicGradient.length;
+        var _loop_1 = function () {
+            var typeGradient;
+            [linearGradient, radialGradient, conicGradient].find(function (possibleType) {
+                if (index - possibleType.length >= 0) {
+                    var possibleGradient = value.substring(index - possibleType.length, index);
+                    if (possibleGradient === possibleType) {
+                        if (value.slice(index - possibleType.length - 10, index - possibleType.length - 1) === 'repeating') {
+                            typeGradient = "repeating-".concat(possibleType, "gradient");
+                            return true;
+                        }
+                        if (value.slice(index - possibleType.length - 8, index - possibleType.length - 1) === '-webkit') {
+                            typeGradient = "-webkit-".concat(possibleType, "gradient");
+                            return true;
+                        }
+                        typeGradient = "".concat(possibleType, "gradient");
+                        return true;
+                    }
+                }
+            });
+            if (!typeGradient) {
+                return "break";
+            }
+            var _a = getParenthesesRange(value, index + gradientLength), start = _a.start, end = _a.end;
+            var match = value.substring(start + 1, end - 1);
+            startIndex = end + 1 + conicGradientLength;
+            result.push({
+                typeGradient: typeGradient,
+                match: match,
+                offset: typeGradient.length + 2,
+                index: index - typeGradient.length + gradientLength,
+                hasComma: true,
+            });
+        };
+        while ((index = value.indexOf('gradient', startIndex)) !== -1) {
+            var state_1 = _loop_1();
+            if (state_1 === "break")
+                break;
+        }
+        if (result.length) {
+            result[result.length - 1].hasComma = false;
+        }
+        return result;
+    }
+
+    function getPriority(ruleStyle, property) {
+        return Boolean(ruleStyle && ruleStyle.getPropertyPriority(property));
+    }
+    function getModifiableCSSDeclaration(property, value, rule, variablesStore, ignoreImageSelectors, isCancelled) {
+        if (property.startsWith('--')) {
+            var modifier = getVariableModifier(variablesStore, property, value, rule, ignoreImageSelectors, isCancelled);
+            if (modifier) {
+                return { property: property, value: modifier, important: getPriority(rule.style, property), sourceValue: value };
+            }
+        }
+        else if (value.includes('var(')) {
+            var modifier = getVariableDependantModifier(variablesStore, property, value);
+            if (modifier) {
+                return { property: property, value: modifier, important: getPriority(rule.style, property), sourceValue: value };
+            }
+        }
+        else if ((property.includes('color') && property !== '-webkit-print-color-adjust') ||
+            property === 'fill' ||
+            property === 'stroke' ||
+            property === 'stop-color') {
+            var modifier = getColorModifier(property, value);
+            if (modifier) {
+                return { property: property, value: modifier, important: getPriority(rule.style, property), sourceValue: value };
+            }
+        }
+        else if (property === 'background-image' || property === 'list-style-image') {
+            var modifier = getBgImageModifier(value, rule, ignoreImageSelectors, isCancelled);
+            if (modifier) {
+                return { property: property, value: modifier, important: getPriority(rule.style, property), sourceValue: value };
+            }
+        }
+        else if (property.includes('shadow')) {
+            var modifier = getShadowModifier(value);
+            if (modifier) {
+                return { property: property, value: modifier, important: getPriority(rule.style, property), sourceValue: value };
+            }
+        }
+        return null;
+    }
+    function joinSelectors() {
+        var selectors = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            selectors[_i] = arguments[_i];
+        }
+        return selectors.filter(Boolean).join(', ');
+    }
+    function getModifiedUserAgentStyle(theme, isIFrame, styleSystemControls) {
+        var lines = [];
+        if (!isIFrame) {
+            lines.push('html {');
+            lines.push("    background-color: ".concat(modifyBackgroundColor({ r: 255, g: 255, b: 255 }, theme), " !important;"));
+            lines.push('}');
+        }
+        if (isCSSColorSchemePropSupported) {
+            lines.push('html {');
+            lines.push("    color-scheme: ".concat(theme.mode === 1 ? 'dark' : 'dark light', " !important;"));
+            lines.push('}');
+        }
+        var bgSelectors = joinSelectors(isIFrame ? '' : 'html, body', styleSystemControls ? 'input, textarea, select, button' : '');
+        if (bgSelectors) {
+            lines.push("".concat(bgSelectors, " {"));
+            lines.push("    background-color: ".concat(modifyBackgroundColor({ r: 255, g: 255, b: 255 }, theme), ";"));
+            lines.push('}');
+        }
+        lines.push("".concat(joinSelectors('html, body', styleSystemControls ? 'input, textarea, select, button' : ''), " {"));
+        lines.push("    border-color: ".concat(modifyBorderColor({ r: 76, g: 76, b: 76 }, theme), ";"));
+        lines.push("    color: ".concat(modifyForegroundColor({ r: 0, g: 0, b: 0 }, theme), ";"));
+        lines.push('}');
+        lines.push('a {');
+        lines.push("    color: ".concat(modifyForegroundColor({ r: 0, g: 64, b: 255 }, theme), ";"));
+        lines.push('}');
+        lines.push('table {');
+        lines.push("    border-color: ".concat(modifyBorderColor({ r: 128, g: 128, b: 128 }, theme), ";"));
+        lines.push('}');
+        lines.push('::placeholder {');
+        lines.push("    color: ".concat(modifyForegroundColor({ r: 169, g: 169, b: 169 }, theme), ";"));
+        lines.push('}');
+        lines.push('input:-webkit-autofill,');
+        lines.push('textarea:-webkit-autofill,');
+        lines.push('select:-webkit-autofill {');
+        lines.push("    background-color: ".concat(modifyBackgroundColor({ r: 250, g: 255, b: 189 }, theme), " !important;"));
+        lines.push("    color: ".concat(modifyForegroundColor({ r: 0, g: 0, b: 0 }, theme), " !important;"));
+        lines.push('}');
+        if (theme.scrollbarColor) {
+            lines.push(getModifiedScrollbarStyle(theme));
+        }
+        if (theme.selectionColor) {
+            lines.push(getModifiedSelectionStyle(theme));
+        }
+        return lines.join('\n');
+    }
+    function getSelectionColor(theme) {
+        var backgroundColorSelection;
+        var foregroundColorSelection;
+        if (theme.selectionColor === 'auto') {
+            backgroundColorSelection = modifyBackgroundColor({ r: 0, g: 96, b: 212 }, __assign(__assign({}, theme), { grayscale: 0 }));
+            foregroundColorSelection = modifyForegroundColor({ r: 255, g: 255, b: 255 }, __assign(__assign({}, theme), { grayscale: 0 }));
+        }
+        else {
+            var rgb = parse(theme.selectionColor);
+            var hsl = rgbToHSL(rgb);
+            backgroundColorSelection = theme.selectionColor;
+            if (hsl.l < 0.5) {
+                foregroundColorSelection = '#FFF';
+            }
+            else {
+                foregroundColorSelection = '#000';
+            }
+        }
+        return { backgroundColorSelection: backgroundColorSelection, foregroundColorSelection: foregroundColorSelection };
+    }
+    function getModifiedSelectionStyle(theme) {
+        var lines = [];
+        var modifiedSelectionColor = getSelectionColor(theme);
+        var backgroundColorSelection = modifiedSelectionColor.backgroundColorSelection;
+        var foregroundColorSelection = modifiedSelectionColor.foregroundColorSelection;
+        ['::selection', '::-moz-selection'].forEach(function (selection) {
+            lines.push("".concat(selection, " {"));
+            lines.push("    background-color: ".concat(backgroundColorSelection, " !important;"));
+            lines.push("    color: ".concat(foregroundColorSelection, " !important;"));
+            lines.push('}');
+        });
+        return lines.join('\n');
+    }
+    function getModifiedScrollbarStyle(theme) {
+        var lines = [];
+        var colorTrack;
+        var colorIcons;
+        var colorThumb;
+        var colorThumbHover;
+        var colorThumbActive;
+        var colorCorner;
+        if (theme.scrollbarColor === 'auto') {
+            colorTrack = modifyBackgroundColor({ r: 241, g: 241, b: 241 }, theme);
+            colorIcons = modifyForegroundColor({ r: 96, g: 96, b: 96 }, theme);
+            colorThumb = modifyBackgroundColor({ r: 176, g: 176, b: 176 }, theme);
+            colorThumbHover = modifyBackgroundColor({ r: 144, g: 144, b: 144 }, theme);
+            colorThumbActive = modifyBackgroundColor({ r: 96, g: 96, b: 96 }, theme);
+            colorCorner = modifyBackgroundColor({ r: 255, g: 255, b: 255 }, theme);
+        }
+        else {
+            var rgb = parse(theme.scrollbarColor);
+            var hsl_1 = rgbToHSL(rgb);
+            var isLight = hsl_1.l > 0.5;
+            var lighten = function (lighter) { return (__assign(__assign({}, hsl_1), { l: clamp(hsl_1.l + lighter, 0, 1) })); };
+            var darken = function (darker) { return (__assign(__assign({}, hsl_1), { l: clamp(hsl_1.l - darker, 0, 1) })); };
+            colorTrack = hslToString(darken(0.4));
+            colorIcons = hslToString(isLight ? darken(0.4) : lighten(0.4));
+            colorThumb = hslToString(hsl_1);
+            colorThumbHover = hslToString(lighten(0.1));
+            colorThumbActive = hslToString(lighten(0.2));
+        }
+        lines.push('::-webkit-scrollbar {');
+        lines.push("    background-color: ".concat(colorTrack, ";"));
+        lines.push("    color: ".concat(colorIcons, ";"));
+        lines.push('}');
+        lines.push('::-webkit-scrollbar-thumb {');
+        lines.push("    background-color: ".concat(colorThumb, ";"));
+        lines.push('}');
+        lines.push('::-webkit-scrollbar-thumb:hover {');
+        lines.push("    background-color: ".concat(colorThumbHover, ";"));
+        lines.push('}');
+        lines.push('::-webkit-scrollbar-thumb:active {');
+        lines.push("    background-color: ".concat(colorThumbActive, ";"));
+        lines.push('}');
+        lines.push('::-webkit-scrollbar-corner {');
+        lines.push("    background-color: ".concat(colorCorner, ";"));
+        lines.push('}');
+        if (isFirefox) {
+            lines.push('* {');
+            lines.push("    scrollbar-color: ".concat(colorThumb, " ").concat(colorTrack, ";"));
+            lines.push('}');
+        }
+        return lines.join('\n');
+    }
+    function getModifiedFallbackStyle(filter, _a) {
+        var strict = _a.strict;
+        var lines = [];
+        var isMicrosoft = ['microsoft.com', 'docs.microsoft.com'].includes(location.hostname);
+        lines.push("html, body, ".concat(strict ? "body :not(iframe)".concat(isMicrosoft ? ':not(div[style^="position:absolute;top:0;left:-"]' : '') : 'body > :not(iframe)', " {"));
+        lines.push("    background-color: ".concat(modifyBackgroundColor({ r: 255, g: 255, b: 255 }, filter), " !important;"));
+        lines.push("    border-color: ".concat(modifyBorderColor({ r: 64, g: 64, b: 64 }, filter), " !important;"));
+        lines.push("    color: ".concat(modifyForegroundColor({ r: 0, g: 0, b: 0 }, filter), " !important;"));
+        lines.push('}');
+        return lines.join('\n');
+    }
+    var unparsableColors = new Set([
+        'inherit',
+        'transparent',
+        'initial',
+        'currentcolor',
+        'none',
+        'unset',
+    ]);
+    var colorParseCache = new Map();
+    function parseColorWithCache($color) {
+        $color = $color.trim();
+        if (colorParseCache.has($color)) {
+            return colorParseCache.get($color);
+        }
+        if ($color.includes('calc(')) {
+            $color = lowerCalcExpression($color);
+        }
+        var color = parse($color);
+        colorParseCache.set($color, color);
+        return color;
+    }
+    function tryParseColor($color) {
+        try {
+            return parseColorWithCache($color);
+        }
+        catch (err) {
+            return null;
+        }
+    }
+    function getColorModifier(prop, value) {
+        if (unparsableColors.has(value.toLowerCase())) {
+            return value;
+        }
+        try {
+            var rgb_1 = parseColorWithCache(value);
+            if (prop.includes('background')) {
+                return function (filter) { return modifyBackgroundColor(rgb_1, filter); };
+            }
+            if (prop.includes('border') || prop.includes('outline')) {
+                return function (filter) { return modifyBorderColor(rgb_1, filter); };
+            }
+            return function (filter) { return modifyForegroundColor(rgb_1, filter); };
+        }
+        catch (err) {
+            logWarn('Color parse error', err);
+            return null;
+        }
+    }
+    var imageDetailsCache = new Map();
+    var awaitingForImageLoading = new Map();
+    function shouldIgnoreImage(selectorText, selectors) {
+        if (!selectorText || selectors.length === 0) {
+            return false;
+        }
+        if (selectors.some(function (s) { return s === '*'; })) {
+            return true;
+        }
+        var ruleSelectors = selectorText.split(/,\s*/g);
+        var _loop_1 = function (i) {
+            var ignoredSelector = selectors[i];
+            if (ruleSelectors.some(function (s) { return s === ignoredSelector; })) {
+                return { value: true };
+            }
+        };
+        for (var i = 0; i < selectors.length; i++) {
+            var state_1 = _loop_1(i);
+            if (typeof state_1 === "object")
+                return state_1.value;
+        }
+        return false;
+    }
+    function getBgImageModifier(value, rule, ignoreImageSelectors, isCancelled) {
+        var _this = this;
+        try {
+            var gradients = parseGradient(value);
+            var urls = getMatches(cssURLRegex, value);
+            if (urls.length === 0 && gradients.length === 0) {
+                return value;
+            }
+            var getIndices = function (matches) {
+                var index = 0;
+                return matches.map(function (match) {
+                    var valueIndex = value.indexOf(match, index);
+                    index = valueIndex + match.length;
+                    return { match: match, index: valueIndex };
+                });
+            };
+            var matches_1 = gradients.map(function (i) { return (__assign({ type: 'gradient' }, i)); })
+                .concat(getIndices(urls).map(function (i) { return (__assign({ type: 'url', offset: 0 }, i)); }))
+                .sort(function (a, b) { return a.index > b.index ? 1 : -1; });
+            var getGradientModifier_1 = function (gradient) {
+                var typeGradient = gradient.typeGradient, match = gradient.match, hasComma = gradient.hasComma;
+                var partsRegex = /([^\(\),]+(\([^\(\)]*(\([^\(\)]*\)*[^\(\)]*)?\))?[^\(\),]*),?/g;
+                var colorStopRegex = /^(from|color-stop|to)\(([^\(\)]*?,\s*)?(.*?)\)$/;
+                var parts = getMatches(partsRegex, match, 1).map(function (part) {
+                    part = part.trim();
+                    var rgb = tryParseColor(part);
+                    if (rgb) {
+                        return function (filter) { return modifyGradientColor(rgb, filter); };
+                    }
+                    var space = part.lastIndexOf(' ');
+                    rgb = tryParseColor(part.substring(0, space));
+                    if (rgb) {
+                        return function (filter) { return "".concat(modifyGradientColor(rgb, filter), " ").concat(part.substring(space + 1)); };
+                    }
+                    var colorStopMatch = part.match(colorStopRegex);
+                    if (colorStopMatch) {
+                        rgb = tryParseColor(colorStopMatch[3]);
+                        if (rgb) {
+                            return function (filter) { return "".concat(colorStopMatch[1], "(").concat(colorStopMatch[2] ? "".concat(colorStopMatch[2], ", ") : '').concat(modifyGradientColor(rgb, filter), ")"); };
+                        }
+                    }
+                    return function () { return part; };
+                });
+                return function (filter) {
+                    return "".concat(typeGradient, "(").concat(parts.map(function (modify) { return modify(filter); }).join(', '), ")").concat(hasComma ? ', ' : '');
+                };
+            };
+            var getURLModifier_1 = function (urlValue) {
+                var _a;
+                if (shouldIgnoreImage(rule.selectorText, ignoreImageSelectors)) {
+                    return null;
+                }
+                var url = getCSSURLValue(urlValue);
+                var parentStyleSheet = rule.parentStyleSheet;
+                var baseURL = (parentStyleSheet && parentStyleSheet.href) ?
+                    getCSSBaseBath(parentStyleSheet.href) :
+                    ((_a = parentStyleSheet.ownerNode) === null || _a === void 0 ? void 0 : _a.baseURI) || location.origin;
+                url = getAbsoluteURL(baseURL, url);
+                var absoluteValue = "url(\"".concat(url, "\")");
+                return function (filter) { return __awaiter(_this, void 0, void 0, function () {
+                    var imageDetails, awaiters_1, err_1, bgImageValue;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                if (!imageDetailsCache.has(url)) return [3, 1];
+                                imageDetails = imageDetailsCache.get(url);
+                                return [3, 7];
+                            case 1:
+                                _a.trys.push([1, 6, , 7]);
+                                if (!awaitingForImageLoading.has(url)) return [3, 3];
+                                awaiters_1 = awaitingForImageLoading.get(url);
+                                return [4, new Promise(function (resolve) { return awaiters_1.push(resolve); })];
+                            case 2:
+                                imageDetails = _a.sent();
+                                if (!imageDetails) {
+                                    return [2, null];
+                                }
+                                return [3, 5];
+                            case 3:
+                                awaitingForImageLoading.set(url, []);
+                                return [4, getImageDetails(url)];
+                            case 4:
+                                imageDetails = _a.sent();
+                                imageDetailsCache.set(url, imageDetails);
+                                awaitingForImageLoading.get(url).forEach(function (resolve) { return resolve(imageDetails); });
+                                awaitingForImageLoading.delete(url);
+                                _a.label = 5;
+                            case 5:
+                                if (isCancelled()) {
+                                    return [2, null];
+                                }
+                                return [3, 7];
+                            case 6:
+                                err_1 = _a.sent();
+                                logWarn(err_1);
+                                if (awaitingForImageLoading.has(url)) {
+                                    awaitingForImageLoading.get(url).forEach(function (resolve) { return resolve(null); });
+                                    awaitingForImageLoading.delete(url);
+                                }
+                                return [2, absoluteValue];
+                            case 7:
+                                bgImageValue = getBgImageValue_1(imageDetails, filter) || absoluteValue;
+                                return [2, bgImageValue];
+                        }
+                    });
+                }); };
+            };
+            var getBgImageValue_1 = function (imageDetails, filter) {
+                var isDark = imageDetails.isDark, isLight = imageDetails.isLight, isTransparent = imageDetails.isTransparent, isLarge = imageDetails.isLarge, isTooLarge = imageDetails.isTooLarge, width = imageDetails.width;
+                var result;
+                if (isTooLarge) {
+                    result = "url(\"".concat(imageDetails.src, "\")");
+                }
+                else if (isDark && isTransparent && filter.mode === 1 && !isLarge && width > 2) {
+                    logInfo("Inverting dark image ".concat(imageDetails.src));
+                    var inverted = getFilteredImageDataURL(imageDetails, __assign(__assign({}, filter), { sepia: clamp(filter.sepia + 10, 0, 100) }));
+                    result = "url(\"".concat(inverted, "\")");
+                }
+                else if (isLight && !isTransparent && filter.mode === 1) {
+                    if (isLarge) {
+                        result = 'none';
+                    }
+                    else {
+                        logInfo("Dimming light image ".concat(imageDetails.src));
+                        var dimmed = getFilteredImageDataURL(imageDetails, filter);
+                        result = "url(\"".concat(dimmed, "\")");
+                    }
+                }
+                else if (filter.mode === 0 && isLight && !isLarge) {
+                    logInfo("Applying filter to image ".concat(imageDetails.src));
+                    var filtered = getFilteredImageDataURL(imageDetails, __assign(__assign({}, filter), { brightness: clamp(filter.brightness - 10, 5, 200), sepia: clamp(filter.sepia + 10, 0, 100) }));
+                    result = "url(\"".concat(filtered, "\")");
+                }
+                else {
+                    result = null;
+                }
+                return result;
+            };
+            var modifiers_1 = [];
+            var matchIndex_1 = 0;
+            matches_1.forEach(function (_a, i) {
+                var type = _a.type, match = _a.match, index = _a.index, typeGradient = _a.typeGradient, hasComma = _a.hasComma, offset = _a.offset;
+                var matchStart = index;
+                var prefixStart = matchIndex_1;
+                var matchEnd = matchStart + match.length + offset;
+                matchIndex_1 = matchEnd;
+                prefixStart !== matchStart && modifiers_1.push(function () { return value.substring(prefixStart, matchStart); });
+                if (type === 'url') {
+                    modifiers_1.push(getURLModifier_1(match));
+                }
+                else if (type === 'gradient') {
+                    modifiers_1.push(getGradientModifier_1({ match: match, index: index, typeGradient: typeGradient, hasComma: hasComma, offset: offset }));
+                }
+                if (i === matches_1.length - 1) {
+                    modifiers_1.push(function () { return value.substring(matchEnd); });
+                }
+            });
+            return function (filter) {
+                var results = modifiers_1.filter(Boolean).map(function (modify) { return modify(filter); });
+                if (results.some(function (r) { return r instanceof Promise; })) {
+                    return Promise.all(results).then(function (asyncResults) {
+                        return asyncResults.filter(Boolean).join('');
+                    });
+                }
+                return results.join('');
+            };
+        }
+        catch (err) {
+            logWarn("Unable to parse gradient ".concat(value), err);
+            return null;
+        }
+    }
+    function getShadowModifierWithInfo(value) {
+        try {
+            var index_1 = 0;
+            var colorMatches_1 = getMatches(/(^|\s)(?!calc)([a-z]+\(.+?\)|#[0-9a-f]+|[a-z]+)(.*?(inset|outset)?($|,))/ig, value, 2);
+            var notParsed_1 = 0;
+            var modifiers_2 = colorMatches_1.map(function (match, i) {
+                var prefixIndex = index_1;
+                var matchIndex = value.indexOf(match, index_1);
+                var matchEnd = matchIndex + match.length;
+                index_1 = matchEnd;
+                var rgb = tryParseColor(match);
+                if (!rgb) {
+                    notParsed_1++;
+                    return function () { return value.substring(prefixIndex, matchEnd); };
+                }
+                return function (filter) { return "".concat(value.substring(prefixIndex, matchIndex)).concat(modifyShadowColor(rgb, filter)).concat(i === colorMatches_1.length - 1 ? value.substring(matchEnd) : ''); };
+            });
+            return function (filter) {
+                var modified = modifiers_2.map(function (modify) { return modify(filter); }).join('');
+                return {
+                    matchesLength: colorMatches_1.length,
+                    unparseableMatchesLength: notParsed_1,
+                    result: modified,
+                };
+            };
+        }
+        catch (err) {
+            logWarn("Unable to parse shadow ".concat(value), err);
+            return null;
+        }
+    }
+    function getShadowModifier(value) {
+        var shadowModifier = getShadowModifierWithInfo(value);
+        if (!shadowModifier) {
+            return null;
+        }
+        return function (theme) { return shadowModifier(theme).result; };
+    }
+    function getVariableModifier(variablesStore, prop, value, rule, ignoredImgSelectors, isCancelled) {
+        return variablesStore.getModifierForVariable({
+            varName: prop,
+            sourceValue: value,
+            rule: rule,
+            ignoredImgSelectors: ignoredImgSelectors,
+            isCancelled: isCancelled,
+        });
+    }
+    function getVariableDependantModifier(variablesStore, prop, value) {
+        return variablesStore.getModifierForVarDependant(prop, value);
+    }
+    function cleanModificationCache() {
+        colorParseCache.clear();
+        clearColorModificationCache();
+        imageDetailsCache.clear();
+        cleanImageProcessingCache();
+        awaitingForImageLoading.clear();
+    }
+
+    var VAR_TYPE_BGCOLOR = 1 << 0;
+    var VAR_TYPE_TEXTCOLOR = 1 << 1;
+    var VAR_TYPE_BORDERCOLOR = 1 << 2;
+    var VAR_TYPE_BGIMG = 1 << 3;
+    var VariablesStore = (function () {
+        function VariablesStore() {
+            this.varTypes = new Map();
+            this.rulesQueue = [];
+            this.definedVars = new Set();
+            this.varRefs = new Map();
+            this.unknownColorVars = new Set();
+            this.unknownBgVars = new Set();
+            this.undefinedVars = new Set();
+            this.initialVarTypes = new Map();
+            this.changedTypeVars = new Set();
+            this.typeChangeSubscriptions = new Map();
+            this.unstableVarValues = new Map();
+        }
+        VariablesStore.prototype.clear = function () {
+            this.varTypes.clear();
+            this.rulesQueue.splice(0);
+            this.definedVars.clear();
+            this.varRefs.clear();
+            this.unknownColorVars.clear();
+            this.unknownBgVars.clear();
+            this.undefinedVars.clear();
+            this.initialVarTypes.clear();
+            this.changedTypeVars.clear();
+            this.typeChangeSubscriptions.clear();
+            this.unstableVarValues.clear();
+        };
+        VariablesStore.prototype.isVarType = function (varName, typeNum) {
+            return (this.varTypes.has(varName) &&
+                (this.varTypes.get(varName) & typeNum) > 0);
+        };
+        VariablesStore.prototype.addRulesForMatching = function (rules) {
+            this.rulesQueue.push(rules);
+        };
+        VariablesStore.prototype.matchVariablesAndDependants = function () {
+            var _this = this;
+            this.changedTypeVars.clear();
+            this.initialVarTypes = new Map(this.varTypes);
+            this.collectRootVariables();
+            this.collectVariablesAndVarDep(this.rulesQueue);
+            this.rulesQueue.splice(0);
+            this.collectRootVarDependants();
+            this.varRefs.forEach(function (refs, v) {
+                refs.forEach(function (r) {
+                    if (_this.varTypes.has(v)) {
+                        _this.resolveVariableType(r, _this.varTypes.get(v));
+                    }
+                });
+            });
+            this.unknownColorVars.forEach(function (v) {
+                if (_this.unknownBgVars.has(v)) {
+                    _this.unknownColorVars.delete(v);
+                    _this.unknownBgVars.delete(v);
+                    _this.resolveVariableType(v, VAR_TYPE_BGCOLOR);
+                }
+                else if (_this.isVarType(v, VAR_TYPE_BGCOLOR | VAR_TYPE_TEXTCOLOR | VAR_TYPE_BORDERCOLOR)) {
+                    _this.unknownColorVars.delete(v);
+                }
+                else {
+                    _this.undefinedVars.add(v);
+                }
+            });
+            this.unknownBgVars.forEach(function (v) {
+                var hasColor = _this.findVarRef(v, function (ref) {
+                    return (_this.unknownColorVars.has(ref) ||
+                        _this.isVarType(ref, VAR_TYPE_TEXTCOLOR | VAR_TYPE_BORDERCOLOR));
+                }) != null;
+                if (hasColor) {
+                    _this.itarateVarRefs(v, function (ref) {
+                        _this.resolveVariableType(ref, VAR_TYPE_BGCOLOR);
+                    });
+                }
+                else if (_this.isVarType(v, VAR_TYPE_BGCOLOR | VAR_TYPE_BGIMG)) {
+                    _this.unknownBgVars.delete(v);
+                }
+                else {
+                    _this.undefinedVars.add(v);
+                }
+            });
+            this.changedTypeVars.forEach(function (varName) {
+                if (_this.typeChangeSubscriptions.has(varName)) {
+                    _this.typeChangeSubscriptions
+                        .get(varName)
+                        .forEach(function (callback) {
+                        callback();
+                    });
+                }
+            });
+            this.changedTypeVars.clear();
+        };
+        VariablesStore.prototype.getModifierForVariable = function (options) {
+            var _this = this;
+            return function (theme) {
+                var varName = options.varName, sourceValue = options.sourceValue, rule = options.rule, ignoredImgSelectors = options.ignoredImgSelectors, isCancelled = options.isCancelled;
+                var getDeclarations = function () {
+                    var declarations = [];
+                    var addModifiedValue = function (typeNum, varNameWrapper, colorModifier) {
+                        if (!_this.isVarType(varName, typeNum)) {
+                            return;
+                        }
+                        var property = varNameWrapper(varName);
+                        var modifiedValue;
+                        if (isVarDependant(sourceValue)) {
+                            if (isConstructedColorVar(sourceValue)) {
+                                var value = insertVarValues(sourceValue, _this.unstableVarValues);
+                                if (!value) {
+                                    value = typeNum === VAR_TYPE_BGCOLOR ? '#ffffff' : '#000000';
+                                }
+                                modifiedValue = colorModifier(value, theme);
+                            }
+                            else {
+                                modifiedValue = replaceCSSVariablesNames(sourceValue, function (v) { return varNameWrapper(v); }, function (fallback) { return colorModifier(fallback, theme); });
+                            }
+                        }
+                        else {
+                            modifiedValue = colorModifier(sourceValue, theme);
+                        }
+                        declarations.push({
+                            property: property,
+                            value: modifiedValue,
+                        });
+                    };
+                    addModifiedValue(VAR_TYPE_BGCOLOR, wrapBgColorVariableName, tryModifyBgColor);
+                    addModifiedValue(VAR_TYPE_TEXTCOLOR, wrapTextColorVariableName, tryModifyTextColor);
+                    addModifiedValue(VAR_TYPE_BORDERCOLOR, wrapBorderColorVariableName, tryModifyBorderColor);
+                    if (_this.isVarType(varName, VAR_TYPE_BGIMG)) {
+                        var property = wrapBgImgVariableName(varName);
+                        var modifiedValue = sourceValue;
+                        if (isVarDependant(sourceValue)) {
+                            modifiedValue = replaceCSSVariablesNames(sourceValue, function (v) { return wrapBgColorVariableName(v); }, function (fallback) { return tryModifyBgColor(fallback, theme); });
+                        }
+                        var bgModifier = getBgImageModifier(modifiedValue, rule, ignoredImgSelectors, isCancelled);
+                        modifiedValue = typeof bgModifier === 'function' ? bgModifier(theme) : bgModifier;
+                        declarations.push({
+                            property: property,
+                            value: modifiedValue,
+                        });
+                    }
+                    return declarations;
+                };
+                var callbacks = new Set();
+                var addListener = function (onTypeChange) {
+                    var callback = function () {
+                        var decs = getDeclarations();
+                        onTypeChange(decs);
+                    };
+                    callbacks.add(callback);
+                    _this.subscribeForVarTypeChange(varName, callback);
+                };
+                var removeListeners = function () {
+                    callbacks.forEach(function (callback) {
+                        _this.unsubscribeFromVariableTypeChanges(varName, callback);
+                    });
+                };
+                return {
+                    declarations: getDeclarations(),
+                    onTypeChange: { addListener: addListener, removeListeners: removeListeners },
+                };
+            };
+        };
+        VariablesStore.prototype.getModifierForVarDependant = function (property, sourceValue) {
+            var _this = this;
+            if (sourceValue.match(/^\s*(rgb|hsl)a?\(/)) {
+                var isBg_1 = property.startsWith('background');
+                var isText_1 = (property === 'color' || property === 'caret-color');
+                return function (theme) {
+                    var value = insertVarValues(sourceValue, _this.unstableVarValues);
+                    if (!value) {
+                        value = isBg_1 ? '#ffffff' : '#000000';
+                    }
+                    var modifier = isBg_1 ? tryModifyBgColor : isText_1 ? tryModifyTextColor : tryModifyBorderColor;
+                    return modifier(value, theme);
+                };
+            }
+            if (property === 'background-color') {
+                return function (theme) {
+                    return replaceCSSVariablesNames(sourceValue, function (v) { return wrapBgColorVariableName(v); }, function (fallback) { return tryModifyBgColor(fallback, theme); });
+                };
+            }
+            if (property === 'color' || property === 'caret-color') {
+                return function (theme) {
+                    return replaceCSSVariablesNames(sourceValue, function (v) { return wrapTextColorVariableName(v); }, function (fallback) { return tryModifyTextColor(fallback, theme); });
+                };
+            }
+            if (property === 'background' || property === 'background-image' || property === 'box-shadow') {
+                return function (theme) {
+                    var unknownVars = new Set();
+                    var modify = function () {
+                        var variableReplaced = replaceCSSVariablesNames(sourceValue, function (v) {
+                            if (_this.isVarType(v, VAR_TYPE_BGCOLOR)) {
+                                return wrapBgColorVariableName(v);
+                            }
+                            if (_this.isVarType(v, VAR_TYPE_BGIMG)) {
+                                return wrapBgImgVariableName(v);
+                            }
+                            unknownVars.add(v);
+                            return v;
+                        }, function (fallback) { return tryModifyBgColor(fallback, theme); });
+                        if (property === 'box-shadow') {
+                            var shadowModifier = getShadowModifierWithInfo(variableReplaced);
+                            var modifiedShadow = shadowModifier(theme);
+                            if (modifiedShadow.unparseableMatchesLength !== modifiedShadow.matchesLength) {
+                                return modifiedShadow.result;
+                            }
+                        }
+                        return variableReplaced;
+                    };
+                    var modified = modify();
+                    if (unknownVars.size > 0) {
+                        return new Promise(function (resolve) {
+                            var firstUnknownVar = unknownVars.values().next().value;
+                            var callback = function () {
+                                _this.unsubscribeFromVariableTypeChanges(firstUnknownVar, callback);
+                                var newValue = modify();
+                                resolve(newValue);
+                            };
+                            _this.subscribeForVarTypeChange(firstUnknownVar, callback);
+                        });
+                    }
+                    return modified;
+                };
+            }
+            if (property.startsWith('border') || property.startsWith('outline')) {
+                return function (theme) {
+                    return replaceCSSVariablesNames(sourceValue, function (v) { return wrapBorderColorVariableName(v); }, function (fallback) { return tryModifyBorderColor(fallback, theme); });
+                };
+            }
+            return null;
+        };
+        VariablesStore.prototype.subscribeForVarTypeChange = function (varName, callback) {
+            if (!this.typeChangeSubscriptions.has(varName)) {
+                this.typeChangeSubscriptions.set(varName, new Set());
+            }
+            var rootStore = this.typeChangeSubscriptions.get(varName);
+            if (!rootStore.has(callback)) {
+                rootStore.add(callback);
+            }
+        };
+        VariablesStore.prototype.unsubscribeFromVariableTypeChanges = function (varName, callback) {
+            if (this.typeChangeSubscriptions.has(varName)) {
+                this.typeChangeSubscriptions.get(varName).delete(callback);
+            }
+        };
+        VariablesStore.prototype.collectVariablesAndVarDep = function (ruleList) {
+            var _this = this;
+            ruleList.forEach(function (rules) {
+                iterateCSSRules(rules, function (rule) {
+                    rule.style && iterateCSSDeclarations(rule.style, function (property, value) {
+                        if (isVariable(property)) {
+                            _this.inspectVariable(property, value);
+                        }
+                        if (isVarDependant(value)) {
+                            _this.inspectVarDependant(property, value);
+                        }
+                    });
+                });
+            });
+        };
+        VariablesStore.prototype.collectRootVariables = function () {
+            var _this = this;
+            iterateCSSDeclarations(document.documentElement.style, function (property, value) {
+                if (isVariable(property)) {
+                    _this.inspectVariable(property, value);
+                }
+            });
+        };
+        VariablesStore.prototype.inspectVariable = function (varName, value) {
+            this.unstableVarValues.set(varName, value);
+            if (isVarDependant(value) && isConstructedColorVar(value)) {
+                this.unknownColorVars.add(varName);
+                this.definedVars.add(varName);
+            }
+            if (this.definedVars.has(varName)) {
+                return;
+            }
+            this.definedVars.add(varName);
+            var color = tryParseColor(value);
+            if (color) {
+                this.unknownColorVars.add(varName);
+            }
+            else if (value.includes('url(') ||
+                value.includes('linear-gradient(') ||
+                value.includes('radial-gradient(')) {
+                this.resolveVariableType(varName, VAR_TYPE_BGIMG);
+            }
+        };
+        VariablesStore.prototype.resolveVariableType = function (varName, typeNum) {
+            var initialType = this.initialVarTypes.get(varName) || 0;
+            var currentType = this.varTypes.get(varName) || 0;
+            var newType = currentType | typeNum;
+            this.varTypes.set(varName, newType);
+            if (newType !== initialType || this.undefinedVars.has(varName)) {
+                this.changedTypeVars.add(varName);
+                this.undefinedVars.delete(varName);
+            }
+            this.unknownColorVars.delete(varName);
+            this.unknownBgVars.delete(varName);
+        };
+        VariablesStore.prototype.collectRootVarDependants = function () {
+            var _this = this;
+            iterateCSSDeclarations(document.documentElement.style, function (property, value) {
+                if (isVarDependant(value)) {
+                    _this.inspectVarDependant(property, value);
+                }
+            });
+        };
+        VariablesStore.prototype.inspectVarDependant = function (property, value) {
+            var _this = this;
+            if (isVariable(property)) {
+                this.iterateVarDeps(value, function (ref) {
+                    if (!_this.varRefs.has(property)) {
+                        _this.varRefs.set(property, new Set());
+                    }
+                    _this.varRefs.get(property).add(ref);
+                });
+            }
+            else if (property === 'background-color' || property === 'box-shadow') {
+                this.iterateVarDeps(value, function (v) { return _this.resolveVariableType(v, VAR_TYPE_BGCOLOR); });
+            }
+            else if (property === 'color' || property === 'caret-color') {
+                this.iterateVarDeps(value, function (v) { return _this.resolveVariableType(v, VAR_TYPE_TEXTCOLOR); });
+            }
+            else if (property.startsWith('border') || property.startsWith('outline')) {
+                this.iterateVarDeps(value, function (v) { return _this.resolveVariableType(v, VAR_TYPE_BORDERCOLOR); });
+            }
+            else if (property === 'background' || property === 'background-image') {
+                this.iterateVarDeps(value, function (v) {
+                    if (_this.isVarType(v, VAR_TYPE_BGCOLOR | VAR_TYPE_BGIMG)) {
+                        return;
+                    }
+                    var isBgColor = _this.findVarRef(v, function (ref) {
+                        return (_this.unknownColorVars.has(ref) ||
+                            _this.isVarType(ref, VAR_TYPE_TEXTCOLOR | VAR_TYPE_BORDERCOLOR));
+                    }) != null;
+                    _this.itarateVarRefs(v, function (ref) {
+                        if (isBgColor) {
+                            _this.resolveVariableType(ref, VAR_TYPE_BGCOLOR);
+                        }
+                        else {
+                            _this.unknownBgVars.add(ref);
+                        }
+                    });
+                });
+            }
+        };
+        VariablesStore.prototype.iterateVarDeps = function (value, iterator) {
+            var varDeps = new Set();
+            iterateVarDependencies(value, function (v) { return varDeps.add(v); });
+            varDeps.forEach(function (v) { return iterator(v); });
+        };
+        VariablesStore.prototype.findVarRef = function (varName, iterator, stack) {
+            var e_1, _a;
+            if (stack === void 0) { stack = new Set(); }
+            if (stack.has(varName)) {
+                return null;
+            }
+            stack.add(varName);
+            var result = iterator(varName);
+            if (result) {
+                return varName;
+            }
+            var refs = this.varRefs.get(varName);
+            if (!refs || refs.size === 0) {
+                return null;
+            }
+            try {
+                for (var refs_1 = __values(refs), refs_1_1 = refs_1.next(); !refs_1_1.done; refs_1_1 = refs_1.next()) {
+                    var ref = refs_1_1.value;
+                    var found = this.findVarRef(ref, iterator, stack);
+                    if (found) {
+                        return found;
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (refs_1_1 && !refs_1_1.done && (_a = refs_1.return)) _a.call(refs_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return null;
+        };
+        VariablesStore.prototype.itarateVarRefs = function (varName, iterator) {
+            this.findVarRef(varName, function (ref) {
+                iterator(ref);
+                return false;
+            });
+        };
+        VariablesStore.prototype.setOnRootVariableChange = function (callback) {
+            this.onRootVariableDefined = callback;
+        };
+        VariablesStore.prototype.putRootVars = function (styleElement, theme) {
+            var e_2, _a;
+            var _this = this;
+            var sheet = styleElement.sheet;
+            if (sheet.cssRules.length > 0) {
+                sheet.deleteRule(0);
+            }
+            var declarations = new Map();
+            iterateCSSDeclarations(document.documentElement.style, function (property, value) {
+                if (isVariable(property)) {
+                    if (_this.isVarType(property, VAR_TYPE_BGCOLOR)) {
+                        declarations.set(wrapBgColorVariableName(property), tryModifyBgColor(value, theme));
+                    }
+                    if (_this.isVarType(property, VAR_TYPE_TEXTCOLOR)) {
+                        declarations.set(wrapTextColorVariableName(property), tryModifyTextColor(value, theme));
+                    }
+                    if (_this.isVarType(property, VAR_TYPE_BORDERCOLOR)) {
+                        declarations.set(wrapBorderColorVariableName(property), tryModifyBorderColor(value, theme));
+                    }
+                    _this.subscribeForVarTypeChange(property, _this.onRootVariableDefined);
+                }
+            });
+            var cssLines = [];
+            cssLines.push(':root {');
+            try {
+                for (var declarations_1 = __values(declarations), declarations_1_1 = declarations_1.next(); !declarations_1_1.done; declarations_1_1 = declarations_1.next()) {
+                    var _b = __read(declarations_1_1.value, 2), property = _b[0], value = _b[1];
+                    cssLines.push("    ".concat(property, ": ").concat(value, ";"));
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (declarations_1_1 && !declarations_1_1.done && (_a = declarations_1.return)) _a.call(declarations_1);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            cssLines.push('}');
+            var cssText = cssLines.join('\n');
+            sheet.insertRule(cssText);
+        };
+        return VariablesStore;
+    }());
+    var variablesStore = new VariablesStore();
+    function getVariableRange(input, searchStart) {
+        if (searchStart === void 0) { searchStart = 0; }
+        var start = input.indexOf('var(', searchStart);
+        if (start >= 0) {
+            var range = getParenthesesRange(input, start + 3);
+            if (range) {
+                return { start: start, end: range.end };
+            }
+            return null;
+        }
+    }
+    function getVariablesMatches(input) {
+        var ranges = [];
+        var i = 0;
+        var range;
+        while ((range = getVariableRange(input, i))) {
+            var start = range.start, end = range.end;
+            ranges.push({ start: start, end: end, value: input.substring(start, end) });
+            i = range.end + 1;
+        }
+        return ranges;
+    }
+    function replaceVariablesMatches(input, replacer) {
+        var matches = getVariablesMatches(input);
+        var matchesCount = matches.length;
+        if (matchesCount === 0) {
+            return input;
+        }
+        var inputLength = input.length;
+        var replacements = matches.map(function (m) { return replacer(m.value); });
+        var parts = [];
+        parts.push(input.substring(0, matches[0].start));
+        for (var i = 0; i < matchesCount; i++) {
+            parts.push(replacements[i]);
+            var start = matches[i].end;
+            var end = i < matchesCount - 1 ? matches[i + 1].start : inputLength;
+            parts.push(input.substring(start, end));
+        }
+        return parts.join('');
+    }
+    function getVariableNameAndFallback(match) {
+        var commaIndex = match.indexOf(',');
+        var name;
+        var fallback;
+        if (commaIndex >= 0) {
+            name = match.substring(4, commaIndex).trim();
+            fallback = match.substring(commaIndex + 1, match.length - 1).trim();
+        }
+        else {
+            name = match.substring(4, match.length - 1).trim();
+            fallback = '';
+        }
+        return { name: name, fallback: fallback };
+    }
+    function replaceCSSVariablesNames(value, nameReplacer, fallbackReplacer) {
+        var matchReplacer = function (match) {
+            var _a = getVariableNameAndFallback(match), name = _a.name, fallback = _a.fallback;
+            var newName = nameReplacer(name);
+            if (!fallback) {
+                return "var(".concat(newName, ")");
+            }
+            var newFallback;
+            if (isVarDependant(fallback)) {
+                newFallback = replaceCSSVariablesNames(fallback, nameReplacer, fallbackReplacer);
+            }
+            else if (fallbackReplacer) {
+                newFallback = fallbackReplacer(fallback);
+            }
+            else {
+                newFallback = fallback;
+            }
+            return "var(".concat(newName, ", ").concat(newFallback, ")");
+        };
+        return replaceVariablesMatches(value, matchReplacer);
+    }
+    function iterateVarDependencies(value, iterator) {
+        replaceCSSVariablesNames(value, function (varName) {
+            iterator(varName);
+            return varName;
+        });
+    }
+    function wrapBgColorVariableName(name) {
+        return "--darkreader-bg".concat(name);
+    }
+    function wrapTextColorVariableName(name) {
+        return "--darkreader-text".concat(name);
+    }
+    function wrapBorderColorVariableName(name) {
+        return "--darkreader-border".concat(name);
+    }
+    function wrapBgImgVariableName(name) {
+        return "--darkreader-bgimg".concat(name);
+    }
+    function isVariable(property) {
+        return property.startsWith('--');
+    }
+    function isVarDependant(value) {
+        return value.includes('var(');
+    }
+    function isConstructedColorVar(value) {
+        return value.match(/^\s*(rgb|hsl)a?\(/);
+    }
+    var rawValueRegex = /^\d{1,3}, ?\d{1,3}, ?\d{1,3}$/;
+    function parseRawValue(color) {
+        if (rawValueRegex.test(color)) {
+            var splitted = color.split(',');
+            var resultInRGB_1 = 'rgb(';
+            splitted.forEach(function (number) {
+                resultInRGB_1 += "".concat(number.trim(), ", ");
+            });
+            resultInRGB_1 = resultInRGB_1.substring(0, resultInRGB_1.length - 2);
+            resultInRGB_1 += ')';
+            return { isRaw: true, color: resultInRGB_1 };
+        }
+        return { isRaw: false, color: color };
+    }
+    function handleRawValue(color, theme, modifyFunction) {
+        var _a = parseRawValue(color), isRaw = _a.isRaw, newColor = _a.color;
+        var rgb = tryParseColor(newColor);
+        if (rgb) {
+            var outputColor = modifyFunction(rgb, theme);
+            if (isRaw) {
+                var outputInRGB = tryParseColor(outputColor);
+                return outputInRGB ? "".concat(outputInRGB.r, ", ").concat(outputInRGB.g, ", ").concat(outputInRGB.b) : outputColor;
+            }
+            return outputColor;
+        }
+        return newColor;
+    }
+    function tryModifyBgColor(color, theme) {
+        return handleRawValue(color, theme, modifyBackgroundColor);
+    }
+    function tryModifyTextColor(color, theme) {
+        return handleRawValue(color, theme, modifyForegroundColor);
+    }
+    function tryModifyBorderColor(color, theme) {
+        return handleRawValue(color, theme, modifyBorderColor);
+    }
+    function insertVarValues(source, varValues, stack) {
+        if (stack === void 0) { stack = new Set(); }
+        var containsUnresolvedVar = false;
+        var matchReplacer = function (match) {
+            var _a = getVariableNameAndFallback(match), name = _a.name, fallback = _a.fallback;
+            if (stack.has(name)) {
+                containsUnresolvedVar = true;
+                return null;
+            }
+            stack.add(name);
+            var varValue = varValues.get(name) || fallback;
+            var inserted = null;
+            if (varValue) {
+                if (isVarDependant(varValue)) {
+                    inserted = insertVarValues(varValue, varValues, stack);
+                }
+                else {
+                    inserted = varValue;
+                }
+            }
+            if (!inserted) {
+                containsUnresolvedVar = true;
+                return null;
+            }
+            return inserted;
+        };
+        var replaced = replaceVariablesMatches(source, matchReplacer);
+        if (containsUnresolvedVar) {
+            return null;
+        }
+        return replaced;
+    }
+
+    var overrides = {
+        'background-color': {
+            customProp: '--darkreader-inline-bgcolor',
+            cssProp: 'background-color',
+            dataAttr: 'data-darkreader-inline-bgcolor',
+        },
+        'background-image': {
+            customProp: '--darkreader-inline-bgimage',
+            cssProp: 'background-image',
+            dataAttr: 'data-darkreader-inline-bgimage',
+        },
+        'border-color': {
+            customProp: '--darkreader-inline-border',
+            cssProp: 'border-color',
+            dataAttr: 'data-darkreader-inline-border',
+        },
+        'border-bottom-color': {
+            customProp: '--darkreader-inline-border-bottom',
+            cssProp: 'border-bottom-color',
+            dataAttr: 'data-darkreader-inline-border-bottom',
+        },
+        'border-left-color': {
+            customProp: '--darkreader-inline-border-left',
+            cssProp: 'border-left-color',
+            dataAttr: 'data-darkreader-inline-border-left',
+        },
+        'border-right-color': {
+            customProp: '--darkreader-inline-border-right',
+            cssProp: 'border-right-color',
+            dataAttr: 'data-darkreader-inline-border-right',
+        },
+        'border-top-color': {
+            customProp: '--darkreader-inline-border-top',
+            cssProp: 'border-top-color',
+            dataAttr: 'data-darkreader-inline-border-top',
+        },
+        'box-shadow': {
+            customProp: '--darkreader-inline-boxshadow',
+            cssProp: 'box-shadow',
+            dataAttr: 'data-darkreader-inline-boxshadow',
+        },
+        'color': {
+            customProp: '--darkreader-inline-color',
+            cssProp: 'color',
+            dataAttr: 'data-darkreader-inline-color',
+        },
+        'fill': {
+            customProp: '--darkreader-inline-fill',
+            cssProp: 'fill',
+            dataAttr: 'data-darkreader-inline-fill',
+        },
+        'stroke': {
+            customProp: '--darkreader-inline-stroke',
+            cssProp: 'stroke',
+            dataAttr: 'data-darkreader-inline-stroke',
+        },
+        'outline-color': {
+            customProp: '--darkreader-inline-outline',
+            cssProp: 'outline-color',
+            dataAttr: 'data-darkreader-inline-outline',
+        },
+        'stop-color': {
+            customProp: '--darkreader-inline-stopcolor',
+            cssProp: 'stop-color',
+            dataAttr: 'data-darkreader-inline-stopcolor',
+        },
+    };
+    var overridesList = Object.values(overrides);
+    var normalizedPropList = {};
+    overridesList.forEach(function (_a) {
+        var cssProp = _a.cssProp, customProp = _a.customProp;
+        return normalizedPropList[customProp] = cssProp;
+    });
+    var INLINE_STYLE_ATTRS = ['style', 'fill', 'stop-color', 'stroke', 'bgcolor', 'color'];
+    var INLINE_STYLE_SELECTOR = INLINE_STYLE_ATTRS.map(function (attr) { return "[".concat(attr, "]"); }).join(', ');
+    function getInlineOverrideStyle() {
+        return overridesList.map(function (_a) {
+            var dataAttr = _a.dataAttr, customProp = _a.customProp, cssProp = _a.cssProp;
+            return [
+                "[".concat(dataAttr, "] {"),
+                "  ".concat(cssProp, ": var(").concat(customProp, ") !important;"),
+                '}',
+            ].join('\n');
+        }).join('\n');
+    }
+    function getInlineStyleElements(root) {
+        var results = [];
+        if (root instanceof Element && root.matches(INLINE_STYLE_SELECTOR)) {
+            results.push(root);
+        }
+        if (root instanceof Element || (isShadowDomSupported && root instanceof ShadowRoot) || root instanceof Document) {
+            push(results, root.querySelectorAll(INLINE_STYLE_SELECTOR));
+        }
+        return results;
+    }
+    var treeObservers = new Map();
+    var attrObservers = new Map();
+    function watchForInlineStyles(elementStyleDidChange, shadowRootDiscovered) {
+        deepWatchForInlineStyles(document, elementStyleDidChange, shadowRootDiscovered);
+        iterateShadowHosts(document.documentElement, function (host) {
+            deepWatchForInlineStyles(host.shadowRoot, elementStyleDidChange, shadowRootDiscovered);
+        });
+    }
+    function deepWatchForInlineStyles(root, elementStyleDidChange, shadowRootDiscovered) {
+        if (treeObservers.has(root)) {
+            treeObservers.get(root).disconnect();
+            attrObservers.get(root).disconnect();
+        }
+        var discoveredNodes = new WeakSet();
+        function discoverNodes(node) {
+            getInlineStyleElements(node).forEach(function (el) {
+                if (discoveredNodes.has(el)) {
+                    return;
+                }
+                discoveredNodes.add(el);
+                elementStyleDidChange(el);
+            });
+            iterateShadowHosts(node, function (n) {
+                if (discoveredNodes.has(node)) {
+                    return;
+                }
+                discoveredNodes.add(node);
+                shadowRootDiscovered(n.shadowRoot);
+                deepWatchForInlineStyles(n.shadowRoot, elementStyleDidChange, shadowRootDiscovered);
+            });
+        }
+        var treeObserver = createOptimizedTreeObserver(root, {
+            onMinorMutations: function (_a) {
+                var additions = _a.additions;
+                additions.forEach(function (added) { return discoverNodes(added); });
+            },
+            onHugeMutations: function () {
+                discoverNodes(root);
+            },
+        });
+        treeObservers.set(root, treeObserver);
+        var attemptCount = 0;
+        var start = null;
+        var ATTEMPTS_INTERVAL = getDuration({ seconds: 10 });
+        var RETRY_TIMEOUT = getDuration({ seconds: 2 });
+        var MAX_ATTEMPTS_COUNT = 50;
+        var cache = [];
+        var timeoutId = null;
+        var handleAttributeMutations = throttle(function (mutations) {
+            mutations.forEach(function (m) {
+                if (INLINE_STYLE_ATTRS.includes(m.attributeName)) {
+                    elementStyleDidChange(m.target);
+                }
+            });
+        });
+        var attrObserver = new MutationObserver(function (mutations) {
+            if (timeoutId) {
+                cache.push.apply(cache, __spreadArray([], __read(mutations), false));
+                return;
+            }
+            attemptCount++;
+            var now = Date.now();
+            if (start == null) {
+                start = now;
+            }
+            else if (attemptCount >= MAX_ATTEMPTS_COUNT) {
+                if (now - start < ATTEMPTS_INTERVAL) {
+                    timeoutId = setTimeout(function () {
+                        start = null;
+                        attemptCount = 0;
+                        timeoutId = null;
+                        var attributeCache = cache;
+                        cache = [];
+                        handleAttributeMutations(attributeCache);
+                    }, RETRY_TIMEOUT);
+                    cache.push.apply(cache, __spreadArray([], __read(mutations), false));
+                    return;
+                }
+                start = now;
+                attemptCount = 1;
+            }
+            handleAttributeMutations(mutations);
+        });
+        attrObserver.observe(root, {
+            attributes: true,
+            attributeFilter: INLINE_STYLE_ATTRS.concat(overridesList.map(function (_a) {
+                var dataAttr = _a.dataAttr;
+                return dataAttr;
+            })),
+            subtree: true,
+        });
+        attrObservers.set(root, attrObserver);
+    }
+    function stopWatchingForInlineStyles() {
+        treeObservers.forEach(function (o) { return o.disconnect(); });
+        attrObservers.forEach(function (o) { return o.disconnect(); });
+        treeObservers.clear();
+        attrObservers.clear();
+    }
+    var inlineStyleCache = new WeakMap();
+    var filterProps = ['brightness', 'contrast', 'grayscale', 'sepia', 'mode'];
+    function getInlineStyleCacheKey(el, theme) {
+        return INLINE_STYLE_ATTRS
+            .map(function (attr) { return "".concat(attr, "=\"").concat(el.getAttribute(attr), "\""); })
+            .concat(filterProps.map(function (prop) { return "".concat(prop, "=\"").concat(theme[prop], "\""); }))
+            .join(' ');
+    }
+    function shouldIgnoreInlineStyle(element, selectors) {
+        for (var i = 0, len = selectors.length; i < len; i++) {
+            var ingnoredSelector = selectors[i];
+            if (element.matches(ingnoredSelector)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    function overrideInlineStyle(element, theme, ignoreInlineSelectors, ignoreImageSelectors) {
+        var cacheKey = getInlineStyleCacheKey(element, theme);
+        if (cacheKey === inlineStyleCache.get(element)) {
+            return;
+        }
+        var unsetProps = new Set(Object.keys(overrides));
+        function setCustomProp(targetCSSProp, modifierCSSProp, cssVal) {
+            var isPropertyVariable = targetCSSProp.startsWith('--');
+            var _a = isPropertyVariable ? {} : overrides[targetCSSProp], customProp = _a.customProp, dataAttr = _a.dataAttr;
+            var mod = getModifiableCSSDeclaration(modifierCSSProp, cssVal, {}, variablesStore, ignoreImageSelectors, null);
+            if (!mod) {
+                return;
+            }
+            var value = mod.value;
+            if (typeof value === 'function') {
+                value = value(theme);
+            }
+            if (isPropertyVariable && typeof value === 'object') {
+                var typedValue = value;
+                typedValue.declarations.forEach(function (_a) {
+                    var property = _a.property, value = _a.value;
+                    !(value instanceof Promise) && element.style.setProperty(property, value);
+                });
+            }
+            else {
+                element.style.setProperty(customProp, value);
+                if (!element.hasAttribute(dataAttr)) {
+                    element.setAttribute(dataAttr, '');
+                }
+                unsetProps.delete(targetCSSProp);
+            }
+        }
+        if (ignoreInlineSelectors.length > 0) {
+            if (shouldIgnoreInlineStyle(element, ignoreInlineSelectors)) {
+                unsetProps.forEach(function (cssProp) {
+                    element.removeAttribute(overrides[cssProp].dataAttr);
+                });
+                return;
+            }
+        }
+        if (element.hasAttribute('bgcolor')) {
+            var value = element.getAttribute('bgcolor');
+            if (value.match(/^[0-9a-f]{3}$/i) || value.match(/^[0-9a-f]{6}$/i)) {
+                value = "#".concat(value);
+            }
+            setCustomProp('background-color', 'background-color', value);
+        }
+        if (element.hasAttribute('color') && element.rel !== 'mask-icon') {
+            var value = element.getAttribute('color');
+            if (value.match(/^[0-9a-f]{3}$/i) || value.match(/^[0-9a-f]{6}$/i)) {
+                value = "#".concat(value);
+            }
+            setCustomProp('color', 'color', value);
+        }
+        if (element instanceof SVGElement) {
+            if (element.hasAttribute('fill')) {
+                var SMALL_SVG_LIMIT_1 = 32;
+                var value_1 = element.getAttribute('fill');
+                if (value_1 !== 'none') {
+                    if (!(element instanceof SVGTextElement)) {
+                        var handleSVGElement = function () {
+                            var _a = element.getBoundingClientRect(), width = _a.width, height = _a.height;
+                            var isBg = (width > SMALL_SVG_LIMIT_1 || height > SMALL_SVG_LIMIT_1);
+                            setCustomProp('fill', isBg ? 'background-color' : 'color', value_1);
+                        };
+                        if (isReadyStateComplete()) {
+                            handleSVGElement();
+                        }
+                        else {
+                            addReadyStateCompleteListener(handleSVGElement);
+                        }
+                    }
+                    else {
+                        setCustomProp('fill', 'color', value_1);
+                    }
+                }
+            }
+            if (element.hasAttribute('stop-color')) {
+                setCustomProp('stop-color', 'background-color', element.getAttribute('stop-color'));
+            }
+        }
+        if (element.hasAttribute('stroke')) {
+            var value = element.getAttribute('stroke');
+            setCustomProp('stroke', element instanceof SVGLineElement || element instanceof SVGTextElement ? 'border-color' : 'color', value);
+        }
+        element.style && iterateCSSDeclarations(element.style, function (property, value) {
+            if (property === 'background-image' && value.includes('url')) {
+                return;
+            }
+            if (overrides.hasOwnProperty(property) || (property.startsWith('--') && !normalizedPropList[property])) {
+                setCustomProp(property, property, value);
+            }
+            else {
+                var overridenProp = normalizedPropList[property];
+                if (overridenProp &&
+                    (!element.style.getPropertyValue(overridenProp) && !element.hasAttribute(overridenProp))) {
+                    if (overridenProp === 'background-color' && element.hasAttribute('bgcolor')) {
+                        return;
+                    }
+                    element.style.setProperty(property, '');
+                }
+            }
+        });
+        if (element.style && element instanceof SVGTextElement && element.style.fill) {
+            setCustomProp('fill', 'color', element.style.getPropertyValue('fill'));
+        }
+        forEach(unsetProps, function (cssProp) {
+            element.removeAttribute(overrides[cssProp].dataAttr);
+        });
+        inlineStyleCache.set(element, getInlineStyleCacheKey(element, theme));
+    }
+
+    var metaThemeColorName = 'theme-color';
+    var metaThemeColorSelector = "meta[name=\"".concat(metaThemeColorName, "\"]");
+    var srcMetaThemeColor = null;
+    var observer = null;
+    function changeMetaThemeColor(meta, theme) {
+        srcMetaThemeColor = srcMetaThemeColor || meta.content;
+        try {
+            var color = parse(srcMetaThemeColor);
+            meta.content = modifyBackgroundColor(color, theme);
+        }
+        catch (err) {
+            logWarn(err);
+        }
+    }
+    function changeMetaThemeColorWhenAvailable(theme) {
+        var meta = document.querySelector(metaThemeColorSelector);
+        if (meta) {
+            changeMetaThemeColor(meta, theme);
+        }
+        else {
+            if (observer) {
+                observer.disconnect();
+            }
+            observer = new MutationObserver(function (mutations) {
+                loop: for (var i = 0; i < mutations.length; i++) {
+                    var addedNodes = mutations[i].addedNodes;
+                    for (var j = 0; j < addedNodes.length; j++) {
+                        var node = addedNodes[j];
+                        if (node instanceof HTMLMetaElement && node.name === metaThemeColorName) {
+                            observer.disconnect();
+                            observer = null;
+                            changeMetaThemeColor(node, theme);
+                            break loop;
+                        }
+                    }
+                }
+            });
+            observer.observe(document.head, { childList: true });
+        }
+    }
+    function restoreMetaThemeColor() {
+        if (observer) {
+            observer.disconnect();
+            observer = null;
+        }
+        var meta = document.querySelector(metaThemeColorSelector);
+        if (meta && srcMetaThemeColor) {
+            meta.content = srcMetaThemeColor;
+        }
+    }
+
+    var themeCacheKeys = [
+        'mode',
+        'brightness',
+        'contrast',
+        'grayscale',
+        'sepia',
+        'darkSchemeBackgroundColor',
+        'darkSchemeTextColor',
+        'lightSchemeBackgroundColor',
+        'lightSchemeTextColor',
+    ];
+    function getThemeKey(theme) {
+        var resultKey = '';
+        themeCacheKeys.forEach(function (key) {
+            resultKey += "".concat(key, ":").concat(theme[key], ";");
+        });
+        return resultKey;
+    }
+    var asyncQueue = createAsyncTasksQueue();
+    function createStyleSheetModifier() {
+        var renderId = 0;
+        var rulesTextCache = new Set();
+        var rulesModCache = new Map();
+        var varTypeChangeCleaners = new Set();
+        var prevFilterKey = null;
+        var hasNonLoadedLink = false;
+        var wasRebuilt = false;
+        function shouldRebuildStyle() {
+            return hasNonLoadedLink && !wasRebuilt;
+        }
+        function modifySheet(options) {
+            var rules = options.sourceCSSRules;
+            var theme = options.theme, ignoreImageAnalysis = options.ignoreImageAnalysis, force = options.force, prepareSheet = options.prepareSheet, isAsyncCancelled = options.isAsyncCancelled;
+            var rulesChanged = (rulesModCache.size === 0);
+            var notFoundCacheKeys = new Set(rulesModCache.keys());
+            var themeKey = getThemeKey(theme);
+            var themeChanged = (themeKey !== prevFilterKey);
+            if (hasNonLoadedLink) {
+                wasRebuilt = true;
+            }
+            var modRules = [];
+            iterateCSSRules(rules, function (rule) {
+                var cssText = rule.cssText;
+                var textDiffersFromPrev = false;
+                notFoundCacheKeys.delete(cssText);
+                if (rule.parentRule instanceof CSSMediaRule) {
+                    cssText += ";".concat(rule.parentRule.media.mediaText);
+                }
+                if (!rulesTextCache.has(cssText)) {
+                    rulesTextCache.add(cssText);
+                    textDiffersFromPrev = true;
+                }
+                if (textDiffersFromPrev) {
+                    rulesChanged = true;
+                }
+                else {
+                    modRules.push(rulesModCache.get(cssText));
+                    return;
+                }
+                var modDecs = [];
+                rule.style && iterateCSSDeclarations(rule.style, function (property, value) {
+                    var mod = getModifiableCSSDeclaration(property, value, rule, variablesStore, ignoreImageAnalysis, isAsyncCancelled);
+                    if (mod) {
+                        modDecs.push(mod);
+                    }
+                });
+                var modRule = null;
+                if (modDecs.length > 0) {
+                    var parentRule = rule.parentRule;
+                    modRule = { selector: rule.selectorText, declarations: modDecs, parentRule: parentRule };
+                    modRules.push(modRule);
+                }
+                rulesModCache.set(cssText, modRule);
+            }, function () {
+                hasNonLoadedLink = true;
+            });
+            notFoundCacheKeys.forEach(function (key) {
+                rulesTextCache.delete(key);
+                rulesModCache.delete(key);
+            });
+            prevFilterKey = themeKey;
+            if (!force && !rulesChanged && !themeChanged) {
+                return;
+            }
+            renderId++;
+            function setRule(target, index, rule) {
+                var selector = rule.selector, declarations = rule.declarations;
+                var getDeclarationText = function (dec) {
+                    var property = dec.property, value = dec.value, important = dec.important, sourceValue = dec.sourceValue;
+                    return "".concat(property, ": ").concat(value == null ? sourceValue : value).concat(important ? ' !important' : '', ";");
+                };
+                var cssRulesText = '';
+                declarations.forEach(function (declarations) {
+                    cssRulesText += "".concat(getDeclarationText(declarations), " ");
+                });
+                var ruleText = "".concat(selector, " { ").concat(cssRulesText, " }");
+                target.insertRule(ruleText, index);
+            }
+            var asyncDeclarations = new Map();
+            var varDeclarations = new Map();
+            var asyncDeclarationCounter = 0;
+            var varDeclarationCounter = 0;
+            var rootReadyGroup = { rule: null, rules: [], isGroup: true };
+            var groupRefs = new WeakMap();
+            function getGroup(rule) {
+                if (rule == null) {
+                    return rootReadyGroup;
+                }
+                if (groupRefs.has(rule)) {
+                    return groupRefs.get(rule);
+                }
+                var group = { rule: rule, rules: [], isGroup: true };
+                groupRefs.set(rule, group);
+                var parentGroup = getGroup(rule.parentRule);
+                parentGroup.rules.push(group);
+                return group;
+            }
+            varTypeChangeCleaners.forEach(function (clear) { return clear(); });
+            varTypeChangeCleaners.clear();
+            modRules.filter(function (r) { return r; }).forEach(function (_a) {
+                var selector = _a.selector, declarations = _a.declarations, parentRule = _a.parentRule;
+                var group = getGroup(parentRule);
+                var readyStyleRule = { selector: selector, declarations: [], isGroup: false };
+                var readyDeclarations = readyStyleRule.declarations;
+                group.rules.push(readyStyleRule);
+                function handleAsyncDeclaration(property, modified, important, sourceValue) {
+                    var asyncKey = ++asyncDeclarationCounter;
+                    var asyncDeclaration = { property: property, value: null, important: important, asyncKey: asyncKey, sourceValue: sourceValue };
+                    readyDeclarations.push(asyncDeclaration);
+                    var currentRenderId = renderId;
+                    modified.then(function (asyncValue) {
+                        if (!asyncValue || isAsyncCancelled() || currentRenderId !== renderId) {
+                            return;
+                        }
+                        asyncDeclaration.value = asyncValue;
+                        asyncQueue.add(function () {
+                            if (isAsyncCancelled() || currentRenderId !== renderId) {
+                                return;
+                            }
+                            rebuildAsyncRule(asyncKey);
+                        });
+                    });
+                }
+                function handleVarDeclarations(property, modified, important, sourceValue) {
+                    var _a = modified, varDecs = _a.declarations, onTypeChange = _a.onTypeChange;
+                    var varKey = ++varDeclarationCounter;
+                    var currentRenderId = renderId;
+                    var initialIndex = readyDeclarations.length;
+                    var oldDecs = [];
+                    if (varDecs.length === 0) {
+                        var tempDec = { property: property, value: sourceValue, important: important, sourceValue: sourceValue, varKey: varKey };
+                        readyDeclarations.push(tempDec);
+                        oldDecs = [tempDec];
+                    }
+                    varDecs.forEach(function (mod) {
+                        if (mod.value instanceof Promise) {
+                            handleAsyncDeclaration(mod.property, mod.value, important, sourceValue);
+                        }
+                        else {
+                            var readyDec = { property: mod.property, value: mod.value, important: important, sourceValue: sourceValue, varKey: varKey };
+                            readyDeclarations.push(readyDec);
+                            oldDecs.push(readyDec);
+                        }
+                    });
+                    onTypeChange.addListener(function (newDecs) {
+                        if (isAsyncCancelled() || currentRenderId !== renderId) {
+                            return;
+                        }
+                        var readyVarDecs = newDecs.map(function (mod) {
+                            return { property: mod.property, value: mod.value, important: important, sourceValue: sourceValue, varKey: varKey };
+                        });
+                        var index = readyDeclarations.indexOf(oldDecs[0], initialIndex);
+                        readyDeclarations.splice.apply(readyDeclarations, __spreadArray([index, oldDecs.length], __read(readyVarDecs), false));
+                        oldDecs = readyVarDecs;
+                        rebuildVarRule(varKey);
+                    });
+                    varTypeChangeCleaners.add(function () { return onTypeChange.removeListeners(); });
+                }
+                declarations.forEach(function (_a) {
+                    var property = _a.property, value = _a.value, important = _a.important, sourceValue = _a.sourceValue;
+                    if (typeof value === 'function') {
+                        var modified = value(theme);
+                        if (modified instanceof Promise) {
+                            handleAsyncDeclaration(property, modified, important, sourceValue);
+                        }
+                        else if (property.startsWith('--')) {
+                            handleVarDeclarations(property, modified, important, sourceValue);
+                        }
+                        else {
+                            readyDeclarations.push({ property: property, value: modified, important: important, sourceValue: sourceValue });
+                        }
+                    }
+                    else {
+                        readyDeclarations.push({ property: property, value: value, important: important, sourceValue: sourceValue });
+                    }
+                });
+            });
+            var sheet = prepareSheet();
+            function buildStyleSheet() {
+                function createTarget(group, parent) {
+                    var rule = group.rule;
+                    if (rule instanceof CSSMediaRule) {
+                        var media = rule.media;
+                        var index = parent.cssRules.length;
+                        parent.insertRule("@media ".concat(media.mediaText, " {}"), index);
+                        return parent.cssRules[index];
+                    }
+                    return parent;
+                }
+                function iterateReadyRules(group, target, styleIterator) {
+                    group.rules.forEach(function (r) {
+                        if (r.isGroup) {
+                            var t = createTarget(r, target);
+                            iterateReadyRules(r, t, styleIterator);
+                        }
+                        else {
+                            styleIterator(r, target);
+                        }
+                    });
+                }
+                iterateReadyRules(rootReadyGroup, sheet, function (rule, target) {
+                    var index = target.cssRules.length;
+                    rule.declarations.forEach(function (_a) {
+                        var asyncKey = _a.asyncKey, varKey = _a.varKey;
+                        if (asyncKey != null) {
+                            asyncDeclarations.set(asyncKey, { rule: rule, target: target, index: index });
+                        }
+                        if (varKey != null) {
+                            varDeclarations.set(varKey, { rule: rule, target: target, index: index });
+                        }
+                    });
+                    setRule(target, index, rule);
+                });
+            }
+            function rebuildAsyncRule(key) {
+                var _a = asyncDeclarations.get(key), rule = _a.rule, target = _a.target, index = _a.index;
+                target.deleteRule(index);
+                setRule(target, index, rule);
+                asyncDeclarations.delete(key);
+            }
+            function rebuildVarRule(key) {
+                var _a = varDeclarations.get(key), rule = _a.rule, target = _a.target, index = _a.index;
+                target.deleteRule(index);
+                setRule(target, index, rule);
+            }
+            buildStyleSheet();
+        }
+        return { modifySheet: modifySheet, shouldRebuildStyle: shouldRebuildStyle };
+    }
+
+    var STYLE_SELECTOR = 'style, link[rel*="stylesheet" i]:not([disabled])';
+    function shouldManageStyle(element) {
+        return (((element instanceof HTMLStyleElement) ||
+            (element instanceof SVGStyleElement) ||
+            (element instanceof HTMLLinkElement &&
+                element.rel &&
+                element.rel.toLowerCase().includes('stylesheet') &&
+                !element.disabled &&
+                (isFirefox ? !element.href.startsWith('moz-extension://') : true) &&
+                ((new URL(element.href)).hostname != 'fonts.googleapis.com'))) &&
+            !element.classList.contains('darkreader') &&
+            element.media.toLowerCase() !== 'print' &&
+            !element.classList.contains('stylus'));
+    }
+    function getManageableStyles(node, results, deep) {
+        if (results === void 0) { results = []; }
+        if (deep === void 0) { deep = true; }
+        if (shouldManageStyle(node)) {
+            results.push(node);
+        }
+        else if (node instanceof Element || (isShadowDomSupported && node instanceof ShadowRoot) || node === document) {
+            forEach(node.querySelectorAll(STYLE_SELECTOR), function (style) { return getManageableStyles(style, results, false); });
+            if (deep) {
+                iterateShadowHosts(node, function (host) { return getManageableStyles(host.shadowRoot, results, false); });
+            }
+        }
+        return results;
+    }
+    var syncStyleSet = new WeakSet();
+    var corsStyleSet = new WeakSet();
+    var canOptimizeUsingProxy$1 = false;
+    document.addEventListener('__darkreader__inlineScriptsAllowed', function () {
+        canOptimizeUsingProxy$1 = true;
+    });
+    var loadingLinkCounter = 0;
+    var rejectorsForLoadingLinks = new Map();
+    function cleanLoadingLinks() {
+        rejectorsForLoadingLinks.clear();
+    }
+    function manageStyle(element, _a) {
+        var update = _a.update, loadingStart = _a.loadingStart, loadingEnd = _a.loadingEnd;
+        var prevStyles = [];
+        var next = element;
+        while ((next = next.nextElementSibling) && next.matches('.darkreader')) {
+            prevStyles.push(next);
+        }
+        var corsCopy = prevStyles.find(function (el) { return el.matches('.darkreader--cors') && !corsStyleSet.has(el); }) || null;
+        var syncStyle = prevStyles.find(function (el) { return el.matches('.darkreader--sync') && !syncStyleSet.has(el); }) || null;
+        var corsCopyPositionWatcher = null;
+        var syncStylePositionWatcher = null;
+        var cancelAsyncOperations = false;
+        var isOverrideEmpty = true;
+        var sheetModifier = createStyleSheetModifier();
+        var observer = new MutationObserver(function () {
+            update();
+        });
+        var observerOptions = { attributes: true, childList: true, subtree: true, characterData: true };
+        function containsCSSImport() {
+            return element instanceof HTMLStyleElement && element.textContent.trim().match(cssImportRegex);
+        }
+        function hasImports(cssRules, checkCrossOrigin) {
+            var result = false;
+            if (cssRules) {
+                var rule = void 0;
+                cssRulesLoop: for (var i = 0, len = cssRules.length; i < len; i++) {
+                    rule = cssRules[i];
+                    if (rule.href) {
+                        if (checkCrossOrigin) {
+                            if (rule.href.startsWith('http') && !rule.href.startsWith(location.origin)) {
+                                result = true;
+                                break cssRulesLoop;
+                            }
+                        }
+                        else {
+                            result = true;
+                            break cssRulesLoop;
+                        }
+                    }
+                }
+            }
+            return result;
+        }
+        function getRulesSync() {
+            if (corsCopy) {
+                logInfo('[getRulesSync] Using cors-copy.');
+                return corsCopy.sheet.cssRules;
+            }
+            if (containsCSSImport()) {
+                logInfo('[getRulesSync] CSSImport detected.');
+                return null;
+            }
+            var cssRules = safeGetSheetRules();
+            if (element instanceof HTMLLinkElement &&
+                !isRelativeHrefOnAbsolutePath(element.href) &&
+                hasImports(cssRules, false)) {
+                logInfo('[getRulesSync] CSSImportRule detected on non-local href.');
+                return null;
+            }
+            if (hasImports(cssRules, true)) {
+                logInfo('[getRulesSync] Cross-Origin CSSImportRule detected.');
+                return null;
+            }
+            logInfo('[getRulesSync] Using cssRules.');
+            !cssRules && logWarn('[getRulesSync] cssRules is null, trying again.');
+            return cssRules;
+        }
+        function insertStyle() {
+            if (corsCopy) {
+                if (element.nextSibling !== corsCopy) {
+                    element.parentNode.insertBefore(corsCopy, element.nextSibling);
+                }
+                if (corsCopy.nextSibling !== syncStyle) {
+                    element.parentNode.insertBefore(syncStyle, corsCopy.nextSibling);
+                }
+            }
+            else if (element.nextSibling !== syncStyle) {
+                element.parentNode.insertBefore(syncStyle, element.nextSibling);
+            }
+        }
+        function createSyncStyle() {
+            syncStyle = element instanceof SVGStyleElement ?
+                document.createElementNS('http://www.w3.org/2000/svg', 'style') :
+                document.createElement('style');
+            syncStyle.classList.add('darkreader');
+            syncStyle.classList.add('darkreader--sync');
+            syncStyle.media = 'screen';
+            if (element.title) {
+                syncStyle.title = element.title;
+            }
+            syncStyleSet.add(syncStyle);
+        }
+        var isLoadingRules = false;
+        var wasLoadingError = false;
+        var loadingLinkId = ++loadingLinkCounter;
+        function getRulesAsync() {
+            return __awaiter(this, void 0, void 0, function () {
+                var cssText, cssBasePath, _a, cssRules, accessError, err_1, fullCSSText, err_2;
+                var _b;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            if (!(element instanceof HTMLLinkElement)) return [3, 7];
+                            _a = __read(getRulesOrError(), 2), cssRules = _a[0], accessError = _a[1];
+                            if (accessError) {
+                                logWarn(accessError);
+                            }
+                            if (!((!cssRules && !accessError && !isSafari) ||
+                                (isSafari && !element.sheet) ||
+                                isStillLoadingError(accessError))) return [3, 5];
+                            _c.label = 1;
+                        case 1:
+                            _c.trys.push([1, 3, , 4]);
+                            logInfo("Linkelement ".concat(loadingLinkId, " is not loaded yet and thus will be await for"), element);
+                            return [4, linkLoading(element, loadingLinkId)];
+                        case 2:
+                            _c.sent();
+                            return [3, 4];
+                        case 3:
+                            err_1 = _c.sent();
+                            logWarn(err_1);
+                            wasLoadingError = true;
+                            return [3, 4];
+                        case 4:
+                            if (cancelAsyncOperations) {
+                                return [2, null];
+                            }
+                            _b = __read(getRulesOrError(), 2), cssRules = _b[0], accessError = _b[1];
+                            if (accessError) {
+                                logWarn(accessError);
+                            }
+                            _c.label = 5;
+                        case 5:
+                            if (cssRules) {
+                                if (!hasImports(cssRules, false)) {
+                                    return [2, cssRules];
+                                }
+                            }
+                            return [4, loadText(element.href)];
+                        case 6:
+                            cssText = _c.sent();
+                            cssBasePath = getCSSBaseBath(element.href);
+                            if (cancelAsyncOperations) {
+                                return [2, null];
+                            }
+                            return [3, 8];
+                        case 7:
+                            if (containsCSSImport()) {
+                                cssText = element.textContent.trim();
+                                cssBasePath = getCSSBaseBath(location.href);
+                            }
+                            else {
+                                return [2, null];
+                            }
+                            _c.label = 8;
+                        case 8:
+                            if (!cssText) return [3, 13];
+                            _c.label = 9;
+                        case 9:
+                            _c.trys.push([9, 11, , 12]);
+                            return [4, replaceCSSImports(cssText, cssBasePath)];
+                        case 10:
+                            fullCSSText = _c.sent();
+                            corsCopy = createCORSCopy(element, fullCSSText);
+                            return [3, 12];
+                        case 11:
+                            err_2 = _c.sent();
+                            logWarn(err_2);
+                            return [3, 12];
+                        case 12:
+                            if (corsCopy) {
+                                corsCopyPositionWatcher = watchForNodePosition(corsCopy, 'prev-sibling');
+                                return [2, corsCopy.sheet.cssRules];
+                            }
+                            _c.label = 13;
+                        case 13: return [2, null];
+                    }
+                });
+            });
+        }
+        function details(options) {
+            var rules = getRulesSync();
+            if (!rules) {
+                if (options.secondRound) {
+                    logWarn('Detected dead-lock at details(), returning early to prevent it.');
+                    return null;
+                }
+                if (isLoadingRules || wasLoadingError) {
+                    return null;
+                }
+                isLoadingRules = true;
+                loadingStart();
+                getRulesAsync().then(function (results) {
+                    isLoadingRules = false;
+                    loadingEnd();
+                    if (results) {
+                        update();
+                    }
+                }).catch(function (err) {
+                    logWarn(err);
+                    isLoadingRules = false;
+                    loadingEnd();
+                });
+                return null;
+            }
+            return { rules: rules };
+        }
+        var forceRenderStyle = false;
+        function render(theme, ignoreImageAnalysis) {
+            var rules = getRulesSync();
+            if (!rules) {
+                return;
+            }
+            cancelAsyncOperations = false;
+            function removeCSSRulesFromSheet(sheet) {
+                for (var i = sheet.cssRules.length - 1; i >= 0; i--) {
+                    sheet.deleteRule(i);
+                }
+            }
+            function prepareOverridesSheet() {
+                if (!syncStyle) {
+                    createSyncStyle();
+                }
+                syncStylePositionWatcher && syncStylePositionWatcher.stop();
+                insertStyle();
+                if (syncStyle.sheet == null) {
+                    syncStyle.textContent = '';
+                }
+                var sheet = syncStyle.sheet;
+                removeCSSRulesFromSheet(sheet);
+                if (syncStylePositionWatcher) {
+                    syncStylePositionWatcher.run();
+                }
+                else {
+                    syncStylePositionWatcher = watchForNodePosition(syncStyle, 'prev-sibling', function () {
+                        forceRenderStyle = true;
+                        buildOverrides();
+                    });
+                }
+                return syncStyle.sheet;
+            }
+            function buildOverrides() {
+                var force = forceRenderStyle;
+                forceRenderStyle = false;
+                sheetModifier.modifySheet({
+                    prepareSheet: prepareOverridesSheet,
+                    sourceCSSRules: rules,
+                    theme: theme,
+                    ignoreImageAnalysis: ignoreImageAnalysis,
+                    force: force,
+                    isAsyncCancelled: function () { return cancelAsyncOperations; },
+                });
+                isOverrideEmpty = syncStyle.sheet.cssRules.length === 0;
+                if (sheetModifier.shouldRebuildStyle()) {
+                    addReadyStateCompleteListener(function () { return update(); });
+                }
+            }
+            buildOverrides();
+        }
+        function getRulesOrError() {
+            try {
+                if (element.sheet == null) {
+                    return [null, null];
+                }
+                return [element.sheet.cssRules, null];
+            }
+            catch (err) {
+                return [null, err];
+            }
+        }
+        function isStillLoadingError(error) {
+            return error && error.message && error.message.includes('loading');
+        }
+        function safeGetSheetRules() {
+            var _a = __read(getRulesOrError(), 2), cssRules = _a[0], err = _a[1];
+            if (err) {
+                logWarn(err);
+                return null;
+            }
+            return cssRules;
+        }
+        function watchForSheetChanges() {
+            watchForSheetChangesUsingProxy();
+            if (!isThunderbird && !(canOptimizeUsingProxy$1 && element.sheet)) {
+                watchForSheetChangesUsingRAF();
+            }
+        }
+        var rulesChangeKey = null;
+        var rulesCheckFrameId = null;
+        function getRulesChangeKey() {
+            var rules = safeGetSheetRules();
+            return rules ? rules.length : null;
+        }
+        function didRulesKeyChange() {
+            return getRulesChangeKey() !== rulesChangeKey;
+        }
+        function watchForSheetChangesUsingRAF() {
+            rulesChangeKey = getRulesChangeKey();
+            stopWatchingForSheetChangesUsingRAF();
+            var checkForUpdate = function () {
+                if (didRulesKeyChange()) {
+                    rulesChangeKey = getRulesChangeKey();
+                    update();
+                }
+                if (canOptimizeUsingProxy$1 && element.sheet) {
+                    stopWatchingForSheetChangesUsingRAF();
+                    return;
+                }
+                rulesCheckFrameId = requestAnimationFrame(checkForUpdate);
+            };
+            checkForUpdate();
+        }
+        function stopWatchingForSheetChangesUsingRAF() {
+            cancelAnimationFrame(rulesCheckFrameId);
+        }
+        var areSheetChangesPending = false;
+        function onSheetChange() {
+            canOptimizeUsingProxy$1 = true;
+            stopWatchingForSheetChangesUsingRAF();
+            if (areSheetChangesPending) {
+                return;
+            }
+            function handleSheetChanges() {
+                areSheetChangesPending = false;
+                if (cancelAsyncOperations) {
+                    return;
+                }
+                update();
+            }
+            areSheetChangesPending = true;
+            if (typeof queueMicrotask === 'function') {
+                queueMicrotask(handleSheetChanges);
+            }
+            else {
+                requestAnimationFrame(handleSheetChanges);
+            }
+        }
+        function watchForSheetChangesUsingProxy() {
+            element.addEventListener('__darkreader__updateSheet', onSheetChange);
+        }
+        function stopWatchingForSheetChangesUsingProxy() {
+            element.removeEventListener('__darkreader__updateSheet', onSheetChange);
+        }
+        function stopWatchingForSheetChanges() {
+            stopWatchingForSheetChangesUsingProxy();
+            stopWatchingForSheetChangesUsingRAF();
+        }
+        function pause() {
+            observer.disconnect();
+            cancelAsyncOperations = true;
+            corsCopyPositionWatcher && corsCopyPositionWatcher.stop();
+            syncStylePositionWatcher && syncStylePositionWatcher.stop();
+            stopWatchingForSheetChanges();
+        }
+        function destroy() {
+            pause();
+            removeNode(corsCopy);
+            removeNode(syncStyle);
+            loadingEnd();
+            if (rejectorsForLoadingLinks.has(loadingLinkId)) {
+                var reject = rejectorsForLoadingLinks.get(loadingLinkId);
+                rejectorsForLoadingLinks.delete(loadingLinkId);
+                reject && reject();
+            }
+        }
+        function watch() {
+            observer.observe(element, observerOptions);
+            if (element instanceof HTMLStyleElement) {
+                watchForSheetChanges();
+            }
+        }
+        var maxMoveCount = 10;
+        var moveCount = 0;
+        function restore() {
+            if (!syncStyle) {
+                return;
+            }
+            moveCount++;
+            if (moveCount > maxMoveCount) {
+                logWarn('Style sheet was moved multiple times', element);
+                return;
+            }
+            logWarn('Restore style', syncStyle, element);
+            insertStyle();
+            corsCopyPositionWatcher && corsCopyPositionWatcher.skip();
+            syncStylePositionWatcher && syncStylePositionWatcher.skip();
+            if (!isOverrideEmpty) {
+                forceRenderStyle = true;
+                update();
+            }
+        }
+        return {
+            details: details,
+            render: render,
+            pause: pause,
+            destroy: destroy,
+            watch: watch,
+            restore: restore,
+        };
+    }
+    function linkLoading(link, loadingId) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2, new Promise(function (resolve, reject) {
+                        var cleanUp = function () {
+                            link.removeEventListener('load', onLoad);
+                            link.removeEventListener('error', onError);
+                            rejectorsForLoadingLinks.delete(loadingId);
+                        };
+                        var onLoad = function () {
+                            cleanUp();
+                            logInfo("Linkelement ".concat(loadingId, " has been loaded"));
+                            resolve();
+                        };
+                        var onError = function () {
+                            cleanUp();
+                            reject("Linkelement ".concat(loadingId, " couldn't be loaded. ").concat(link.href));
+                        };
+                        rejectorsForLoadingLinks.set(loadingId, function () {
+                            cleanUp();
+                            reject();
+                        });
+                        link.addEventListener('load', onLoad);
+                        link.addEventListener('error', onError);
+                        if (!link.href) {
+                            onError();
+                        }
+                    })];
+            });
+        });
+    }
+    function getCSSImportURL(importDeclaration) {
+        return getCSSURLValue(importDeclaration.substring(7).trim().replace(/;$/, '').replace(/screen$/, ''));
+    }
+    function loadText(url) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!url.startsWith('data:')) return [3, 3];
+                        return [4, fetch(url)];
+                    case 1: return [4, (_a.sent()).text()];
+                    case 2: return [2, _a.sent()];
+                    case 3: return [4, bgFetch({ url: url, responseType: 'text', mimeType: 'text/css', origin: window.location.origin })];
+                    case 4: return [2, _a.sent()];
+                }
+            });
+        });
+    }
+    function replaceCSSImports(cssText, basePath, cache) {
+        if (cache === void 0) { cache = new Map(); }
+        return __awaiter(this, void 0, void 0, function () {
+            var importMatches, importMatches_1, importMatches_1_1, match, importURL, absoluteURL, importedCSS, err_3, e_1_1;
+            var e_1, _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        cssText = removeCSSComments(cssText);
+                        cssText = replaceCSSFontFace(cssText);
+                        cssText = replaceCSSRelativeURLsWithAbsolute(cssText, basePath);
+                        importMatches = getMatches(cssImportRegex, cssText);
+                        _b.label = 1;
+                    case 1:
+                        _b.trys.push([1, 10, 11, 12]);
+                        importMatches_1 = __values(importMatches), importMatches_1_1 = importMatches_1.next();
+                        _b.label = 2;
+                    case 2:
+                        if (!!importMatches_1_1.done) return [3, 9];
+                        match = importMatches_1_1.value;
+                        importURL = getCSSImportURL(match);
+                        absoluteURL = getAbsoluteURL(basePath, importURL);
+                        importedCSS = void 0;
+                        if (!cache.has(absoluteURL)) return [3, 3];
+                        importedCSS = cache.get(absoluteURL);
+                        return [3, 7];
+                    case 3:
+                        _b.trys.push([3, 6, , 7]);
+                        return [4, loadText(absoluteURL)];
+                    case 4:
+                        importedCSS = _b.sent();
+                        cache.set(absoluteURL, importedCSS);
+                        return [4, replaceCSSImports(importedCSS, getCSSBaseBath(absoluteURL), cache)];
+                    case 5:
+                        importedCSS = _b.sent();
+                        return [3, 7];
+                    case 6:
+                        err_3 = _b.sent();
+                        logWarn(err_3);
+                        importedCSS = '';
+                        return [3, 7];
+                    case 7:
+                        cssText = cssText.split(match).join(importedCSS);
+                        _b.label = 8;
+                    case 8:
+                        importMatches_1_1 = importMatches_1.next();
+                        return [3, 2];
+                    case 9: return [3, 12];
+                    case 10:
+                        e_1_1 = _b.sent();
+                        e_1 = { error: e_1_1 };
+                        return [3, 12];
+                    case 11:
+                        try {
+                            if (importMatches_1_1 && !importMatches_1_1.done && (_a = importMatches_1.return)) _a.call(importMatches_1);
+                        }
+                        finally { if (e_1) throw e_1.error; }
+                        return [7];
+                    case 12:
+                        cssText = cssText.trim();
+                        return [2, cssText];
+                }
+            });
+        });
+    }
+    function createCORSCopy(srcElement, cssText) {
+        if (!cssText) {
+            return null;
+        }
+        var cors = document.createElement('style');
+        cors.classList.add('darkreader');
+        cors.classList.add('darkreader--cors');
+        cors.media = 'screen';
+        cors.textContent = cssText;
+        srcElement.parentNode.insertBefore(cors, srcElement.nextSibling);
+        cors.sheet.disabled = true;
+        corsStyleSet.add(cors);
+        return cors;
+    }
+
+    var observers = [];
+    var observedRoots;
+    var undefinedGroups = new Map();
+    var elementsDefinitionCallback;
+    function collectUndefinedElements(root) {
+        if (!isDefinedSelectorSupported) {
+            return;
+        }
+        forEach(root.querySelectorAll(':not(:defined)'), function (el) {
+            var tag = el.tagName.toLowerCase();
+            if (!tag.includes('-')) {
+                var extendedTag = el.getAttribute('is');
+                if (extendedTag) {
+                    tag = extendedTag;
+                }
+                else {
+                    return;
+                }
+            }
+            if (!undefinedGroups.has(tag)) {
+                undefinedGroups.set(tag, new Set());
+                customElementsWhenDefined(tag).then(function () {
+                    if (elementsDefinitionCallback) {
+                        var elements = undefinedGroups.get(tag);
+                        undefinedGroups.delete(tag);
+                        elementsDefinitionCallback(Array.from(elements));
+                    }
+                });
+            }
+            undefinedGroups.get(tag).add(el);
+        });
+    }
+    var canOptimizeUsingProxy = false;
+    document.addEventListener('__darkreader__inlineScriptsAllowed', function () {
+        canOptimizeUsingProxy = true;
+    });
+    var resolvers = new Map();
+    function handleIsDefined(e) {
+        canOptimizeUsingProxy = true;
+        if (resolvers.has(e.detail.tag)) {
+            var resolve = resolvers.get(e.detail.tag);
+            resolve();
+        }
+    }
+    function customElementsWhenDefined(tag) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2, new Promise(function (resolve) {
+                        if (window.customElements && typeof customElements.whenDefined === 'function') {
+                            customElements.whenDefined(tag).then(function () { return resolve(); });
+                        }
+                        else if (canOptimizeUsingProxy) {
+                            resolvers.set(tag, resolve);
+                            document.dispatchEvent(new CustomEvent('__darkreader__addUndefinedResolver', { detail: { tag: tag } }));
+                        }
+                        else {
+                            var checkIfDefined_1 = function () {
+                                var elements = undefinedGroups.get(tag);
+                                if (elements && elements.size > 0) {
+                                    if (elements.values().next().value.matches(':defined')) {
+                                        resolve();
+                                    }
+                                    else {
+                                        requestAnimationFrame(checkIfDefined_1);
+                                    }
+                                }
+                            };
+                            requestAnimationFrame(checkIfDefined_1);
+                        }
+                    })];
+            });
+        });
+    }
+    function watchWhenCustomElementsDefined(callback) {
+        elementsDefinitionCallback = callback;
+    }
+    function unsubscribeFromDefineCustomElements() {
+        elementsDefinitionCallback = null;
+        undefinedGroups.clear();
+        document.removeEventListener('__darkreader__isDefined', handleIsDefined);
+    }
+    function watchForStyleChanges(currentStyles, update, shadowRootDiscovered) {
+        stopWatchingForStyleChanges();
+        var prevStyles = new Set(currentStyles);
+        var prevStyleSiblings = new WeakMap();
+        var nextStyleSiblings = new WeakMap();
+        function saveStylePosition(style) {
+            prevStyleSiblings.set(style, style.previousElementSibling);
+            nextStyleSiblings.set(style, style.nextElementSibling);
+        }
+        function forgetStylePosition(style) {
+            prevStyleSiblings.delete(style);
+            nextStyleSiblings.delete(style);
+        }
+        function didStylePositionChange(style) {
+            return (style.previousElementSibling !== prevStyleSiblings.get(style) ||
+                style.nextElementSibling !== nextStyleSiblings.get(style));
+        }
+        currentStyles.forEach(saveStylePosition);
+        function handleStyleOperations(operations) {
+            var createdStyles = operations.createdStyles, removedStyles = operations.removedStyles, movedStyles = operations.movedStyles;
+            createdStyles.forEach(function (s) { return saveStylePosition(s); });
+            movedStyles.forEach(function (s) { return saveStylePosition(s); });
+            removedStyles.forEach(function (s) { return forgetStylePosition(s); });
+            createdStyles.forEach(function (s) { return prevStyles.add(s); });
+            removedStyles.forEach(function (s) { return prevStyles.delete(s); });
+            if (createdStyles.size + removedStyles.size + movedStyles.size > 0) {
+                update({
+                    created: Array.from(createdStyles),
+                    removed: Array.from(removedStyles),
+                    moved: Array.from(movedStyles),
+                    updated: [],
+                });
+            }
+        }
+        function handleMinorTreeMutations(_a) {
+            var additions = _a.additions, moves = _a.moves, deletions = _a.deletions;
+            var createdStyles = new Set();
+            var removedStyles = new Set();
+            var movedStyles = new Set();
+            additions.forEach(function (node) { return getManageableStyles(node).forEach(function (style) { return createdStyles.add(style); }); });
+            deletions.forEach(function (node) { return getManageableStyles(node).forEach(function (style) { return removedStyles.add(style); }); });
+            moves.forEach(function (node) { return getManageableStyles(node).forEach(function (style) { return movedStyles.add(style); }); });
+            handleStyleOperations({ createdStyles: createdStyles, removedStyles: removedStyles, movedStyles: movedStyles });
+            additions.forEach(function (n) {
+                iterateShadowHosts(n, subscribeForShadowRootChanges);
+                collectUndefinedElements(n);
+            });
+        }
+        function handleHugeTreeMutations(root) {
+            var styles = new Set(getManageableStyles(root));
+            var createdStyles = new Set();
+            var removedStyles = new Set();
+            var movedStyles = new Set();
+            styles.forEach(function (s) {
+                if (!prevStyles.has(s)) {
+                    createdStyles.add(s);
+                }
+            });
+            prevStyles.forEach(function (s) {
+                if (!styles.has(s)) {
+                    removedStyles.add(s);
+                }
+            });
+            styles.forEach(function (s) {
+                if (!createdStyles.has(s) && !removedStyles.has(s) && didStylePositionChange(s)) {
+                    movedStyles.add(s);
+                }
+            });
+            handleStyleOperations({ createdStyles: createdStyles, removedStyles: removedStyles, movedStyles: movedStyles });
+            iterateShadowHosts(root, subscribeForShadowRootChanges);
+            collectUndefinedElements(root);
+        }
+        function handleAttributeMutations(mutations) {
+            var updatedStyles = new Set();
+            var removedStyles = new Set();
+            mutations.forEach(function (m) {
+                var target = m.target;
+                if (target.isConnected) {
+                    if (shouldManageStyle(target)) {
+                        updatedStyles.add(target);
+                    }
+                    else if (target instanceof HTMLLinkElement && target.disabled) {
+                        removedStyles.add(target);
+                    }
+                }
+            });
+            if (updatedStyles.size + removedStyles.size > 0) {
+                update({
+                    updated: Array.from(updatedStyles),
+                    created: [],
+                    removed: Array.from(removedStyles),
+                    moved: [],
+                });
+            }
+        }
+        function observe(root) {
+            var treeObserver = createOptimizedTreeObserver(root, {
+                onMinorMutations: handleMinorTreeMutations,
+                onHugeMutations: handleHugeTreeMutations,
+            });
+            var attrObserver = new MutationObserver(handleAttributeMutations);
+            attrObserver.observe(root, { attributes: true, attributeFilter: ['rel', 'disabled', 'media'], subtree: true });
+            observers.push(treeObserver, attrObserver);
+            observedRoots.add(root);
+        }
+        function subscribeForShadowRootChanges(node) {
+            var shadowRoot = node.shadowRoot;
+            if (shadowRoot == null || observedRoots.has(shadowRoot)) {
+                return;
+            }
+            observe(shadowRoot);
+            shadowRootDiscovered(shadowRoot);
+        }
+        observe(document);
+        iterateShadowHosts(document.documentElement, subscribeForShadowRootChanges);
+        watchWhenCustomElementsDefined(function (hosts) {
+            var newStyles = [];
+            hosts.forEach(function (host) { return push(newStyles, getManageableStyles(host.shadowRoot)); });
+            update({ created: newStyles, updated: [], removed: [], moved: [] });
+            hosts.forEach(function (host) {
+                var shadowRoot = host.shadowRoot;
+                if (shadowRoot == null) {
+                    return;
+                }
+                subscribeForShadowRootChanges(host);
+                iterateShadowHosts(shadowRoot, subscribeForShadowRootChanges);
+                collectUndefinedElements(shadowRoot);
+            });
+        });
+        document.addEventListener('__darkreader__isDefined', handleIsDefined);
+        collectUndefinedElements(document);
+    }
+    function resetObservers() {
+        observers.forEach(function (o) { return o.disconnect(); });
+        observers.splice(0, observers.length);
+        observedRoots = new WeakSet();
+    }
+    function stopWatchingForStyleChanges() {
+        resetObservers();
+        unsubscribeFromDefineCustomElements();
+    }
+
+    function hexify(number) {
+        return ((number < 16 ? '0' : '') + number.toString(16));
+    }
+    function generateUID() {
+        if ('randomUUID' in crypto) {
+            var uuid = crypto.randomUUID();
+            return uuid.substring(0, 8) + uuid.substring(9, 13) + uuid.substring(14, 18) + uuid.substring(19, 23) + uuid.substring(24);
+        }
+        return Array.from(crypto.getRandomValues(new Uint8Array(16))).map(function (x) { return hexify(x); }).join('');
+    }
+
+    var adoptedStyleOverrides = new WeakMap();
+    var overrideList = new WeakSet();
+    function createAdoptedStyleSheetOverride(node) {
+        var cancelAsyncOperations = false;
+        function injectSheet(sheet, override) {
+            var newSheets = __spreadArray([], __read(node.adoptedStyleSheets), false);
+            var sheetIndex = newSheets.indexOf(sheet);
+            var existingIndex = newSheets.indexOf(override);
+            if (sheetIndex === existingIndex - 1) {
+                return;
+            }
+            if (existingIndex >= 0) {
+                newSheets.splice(existingIndex, 1);
+            }
+            newSheets.splice(sheetIndex + 1, 0, override);
+            node.adoptedStyleSheets = newSheets;
+        }
+        function destroy() {
+            cancelAsyncOperations = true;
+            var newSheets = __spreadArray([], __read(node.adoptedStyleSheets), false);
+            node.adoptedStyleSheets.forEach(function (adoptedStyleSheet) {
+                if (overrideList.has(adoptedStyleSheet)) {
+                    var existingIndex = newSheets.indexOf(adoptedStyleSheet);
+                    if (existingIndex >= 0) {
+                        newSheets.splice(existingIndex, 1);
+                    }
+                    adoptedStyleOverrides.delete(adoptedStyleSheet);
+                    overrideList.delete(adoptedStyleSheet);
+                }
+            });
+            node.adoptedStyleSheets = newSheets;
+        }
+        function render(theme, ignoreImageAnalysis) {
+            node.adoptedStyleSheets.forEach(function (sheet) {
+                if (overrideList.has(sheet)) {
+                    return;
+                }
+                var rules = sheet.rules;
+                var override = new CSSStyleSheet();
+                function prepareOverridesSheet() {
+                    for (var i = override.cssRules.length - 1; i >= 0; i--) {
+                        override.deleteRule(i);
+                    }
+                    injectSheet(sheet, override);
+                    adoptedStyleOverrides.set(sheet, override);
+                    overrideList.add(override);
+                    return override;
+                }
+                var sheetModifier = createStyleSheetModifier();
+                sheetModifier.modifySheet({
+                    prepareSheet: prepareOverridesSheet,
+                    sourceCSSRules: rules,
+                    theme: theme,
+                    ignoreImageAnalysis: ignoreImageAnalysis,
+                    force: false,
+                    isAsyncCancelled: function () { return cancelAsyncOperations; },
+                });
+            });
+        }
+        return {
+            render: render,
+            destroy: destroy
+        };
+    }
+
+    function injectProxy(enableStyleSheetsProxy) {
+        document.dispatchEvent(new CustomEvent('__darkreader__inlineScriptsAllowed'));
+        var addRuleDescriptor = Object.getOwnPropertyDescriptor(CSSStyleSheet.prototype, 'addRule');
+        var insertRuleDescriptor = Object.getOwnPropertyDescriptor(CSSStyleSheet.prototype, 'insertRule');
+        var deleteRuleDescriptor = Object.getOwnPropertyDescriptor(CSSStyleSheet.prototype, 'deleteRule');
+        var removeRuleDescriptor = Object.getOwnPropertyDescriptor(CSSStyleSheet.prototype, 'removeRule');
+        var documentStyleSheetsDescriptor = enableStyleSheetsProxy ?
+            Object.getOwnPropertyDescriptor(Document.prototype, 'styleSheets') : null;
+        var shouldWrapHTMLElement = [
+            'baidu.com',
+            'baike.baidu.com',
+            'ditu.baidu.com',
+            'map.baidu.com',
+            'maps.baidu.com',
+            'haokan.baidu.com',
+            'pan.baidu.com',
+            'passport.baidu.com',
+            'tieba.baidu.com',
+            'www.baidu.com'
+        ].includes(location.hostname);
+        var getElementsByTagNameDescriptor = shouldWrapHTMLElement ?
+            Object.getOwnPropertyDescriptor(Element.prototype, 'getElementsByTagName') : null;
+        var cleanUp = function () {
+            Object.defineProperty(CSSStyleSheet.prototype, 'addRule', addRuleDescriptor);
+            Object.defineProperty(CSSStyleSheet.prototype, 'insertRule', insertRuleDescriptor);
+            Object.defineProperty(CSSStyleSheet.prototype, 'deleteRule', deleteRuleDescriptor);
+            Object.defineProperty(CSSStyleSheet.prototype, 'removeRule', removeRuleDescriptor);
+            document.removeEventListener('__darkreader__cleanUp', cleanUp);
+            document.removeEventListener('__darkreader__addUndefinedResolver', addUndefinedResolver);
+            if (enableStyleSheetsProxy) {
+                Object.defineProperty(Document.prototype, 'styleSheets', documentStyleSheetsDescriptor);
+            }
+            if (shouldWrapHTMLElement) {
+                Object.defineProperty(Element.prototype, 'getElementsByTagName', getElementsByTagNameDescriptor);
+            }
+        };
+        var addUndefinedResolver = function (e) {
+            customElements.whenDefined(e.detail.tag).then(function () {
+                document.dispatchEvent(new CustomEvent('__darkreader__isDefined', { detail: { tag: e.detail.tag } }));
+            });
+        };
+        document.addEventListener('__darkreader__cleanUp', cleanUp);
+        document.addEventListener('__darkreader__addUndefinedResolver', addUndefinedResolver);
+        var updateSheetEvent = new Event('__darkreader__updateSheet');
+        function proxyAddRule(selector, style, index) {
+            addRuleDescriptor.value.call(this, selector, style, index);
+            if (this.ownerNode && !this.ownerNode.classList.contains('darkreader')) {
+                this.ownerNode.dispatchEvent(updateSheetEvent);
+            }
+            return -1;
+        }
+        function proxyInsertRule(rule, index) {
+            var returnValue = insertRuleDescriptor.value.call(this, rule, index);
+            if (this.ownerNode && !this.ownerNode.classList.contains('darkreader')) {
+                this.ownerNode.dispatchEvent(updateSheetEvent);
+            }
+            return returnValue;
+        }
+        function proxyDeleteRule(index) {
+            deleteRuleDescriptor.value.call(this, index);
+            if (this.ownerNode && !this.ownerNode.classList.contains('darkreader')) {
+                this.ownerNode.dispatchEvent(updateSheetEvent);
+            }
+        }
+        function proxyRemoveRule(index) {
+            removeRuleDescriptor.value.call(this, index);
+            if (this.ownerNode && !this.ownerNode.classList.contains('darkreader')) {
+                this.ownerNode.dispatchEvent(updateSheetEvent);
+            }
+        }
+        function proxyDocumentStyleSheets() {
+            var _this = this;
+            var getCurrentValue = function () {
+                var docSheets = documentStyleSheetsDescriptor.get.call(_this);
+                var filteredSheets = __spreadArray([], __read(docSheets), false).filter(function (styleSheet) {
+                    return !styleSheet.ownerNode.classList.contains('darkreader');
+                });
+                filteredSheets.item = function (item) {
+                    return filteredSheets[item];
+                };
+                return Object.setPrototypeOf(filteredSheets, StyleSheetList.prototype);
+            };
+            var elements = getCurrentValue();
+            var styleSheetListBehavior = {
+                get: function (_, property) {
+                    return getCurrentValue()[property];
+                }
+            };
+            elements = new Proxy(elements, styleSheetListBehavior);
+            return elements;
+        }
+        function proxyGetElementsByTagName(tagName) {
+            var _this = this;
+            if (tagName !== 'style') {
+                return getElementsByTagNameDescriptor.value.call(this, tagName);
+            }
+            var getCurrentElementValue = function () {
+                var elements = getElementsByTagNameDescriptor.value.call(_this, tagName);
+                return Object.setPrototypeOf(__spreadArray([], __read(elements), false).filter(function (element) {
+                    return !element.classList.contains('darkreader');
+                }), NodeList.prototype);
+            };
+            var elements = getCurrentElementValue();
+            var nodeListBehavior = {
+                get: function (_, property) {
+                    return getCurrentElementValue()[Number(property) || property];
+                }
+            };
+            elements = new Proxy(elements, nodeListBehavior);
+            return elements;
+        }
+        Object.defineProperty(CSSStyleSheet.prototype, 'addRule', Object.assign({}, addRuleDescriptor, { value: proxyAddRule }));
+        Object.defineProperty(CSSStyleSheet.prototype, 'insertRule', Object.assign({}, insertRuleDescriptor, { value: proxyInsertRule }));
+        Object.defineProperty(CSSStyleSheet.prototype, 'deleteRule', Object.assign({}, deleteRuleDescriptor, { value: proxyDeleteRule }));
+        Object.defineProperty(CSSStyleSheet.prototype, 'removeRule', Object.assign({}, removeRuleDescriptor, { value: proxyRemoveRule }));
+        if (enableStyleSheetsProxy) {
+            Object.defineProperty(Document.prototype, 'styleSheets', Object.assign({}, documentStyleSheetsDescriptor, { get: proxyDocumentStyleSheets }));
+        }
+        if (shouldWrapHTMLElement) {
+            Object.defineProperty(Element.prototype, 'getElementsByTagName', Object.assign({}, getElementsByTagNameDescriptor, { value: proxyGetElementsByTagName }));
+        }
+    }
+
+    var INSTANCE_ID = generateUID();
+    var styleManagers = new Map();
+    var adoptedStyleManagers = [];
+    var filter = null;
+    var fixes = null;
+    var isIFrame$1 = null;
+    var ignoredImageAnalysisSelectors = null;
+    var ignoredInlineSelectors = null;
+    function createOrUpdateStyle(className, root) {
+        if (root === void 0) { root = document.head || document; }
+        var element = root.querySelector(".".concat(className));
+        if (!element) {
+            element = document.createElement('style');
+            element.classList.add('darkreader');
+            element.classList.add(className);
+            element.media = 'screen';
+            element.textContent = '';
+        }
+        return element;
+    }
+    function createOrUpdateScript(className, root) {
+        if (root === void 0) { root = document.head || document; }
+        var element = root.querySelector(".".concat(className));
+        if (!element) {
+            element = document.createElement('script');
+            element.classList.add('darkreader');
+            element.classList.add(className);
+        }
+        return element;
+    }
+    var nodePositionWatchers = new Map();
+    function setupNodePositionWatcher(node, alias) {
+        nodePositionWatchers.has(alias) && nodePositionWatchers.get(alias).stop();
+        nodePositionWatchers.set(alias, watchForNodePosition(node, 'parent'));
+    }
+    function stopStylePositionWatchers() {
+        forEach(nodePositionWatchers.values(), function (watcher) { return watcher.stop(); });
+        nodePositionWatchers.clear();
+    }
+    function createStaticStyleOverrides() {
+        var fallbackStyle = createOrUpdateStyle('darkreader--fallback', document);
+        fallbackStyle.textContent = getModifiedFallbackStyle(filter, { strict: true });
+        document.head.insertBefore(fallbackStyle, document.head.firstChild);
+        setupNodePositionWatcher(fallbackStyle, 'fallback');
+        var userAgentStyle = createOrUpdateStyle('darkreader--user-agent');
+        userAgentStyle.textContent = getModifiedUserAgentStyle(filter, isIFrame$1, filter.styleSystemControls);
+        document.head.insertBefore(userAgentStyle, fallbackStyle.nextSibling);
+        setupNodePositionWatcher(userAgentStyle, 'user-agent');
+        var textStyle = createOrUpdateStyle('darkreader--text');
+        if (filter.useFont || filter.textStroke > 0) {
+            textStyle.textContent = createTextStyle(filter);
+        }
+        else {
+            textStyle.textContent = '';
+        }
+        document.head.insertBefore(textStyle, fallbackStyle.nextSibling);
+        setupNodePositionWatcher(textStyle, 'text');
+        var invertStyle = createOrUpdateStyle('darkreader--invert');
+        if (fixes && Array.isArray(fixes.invert) && fixes.invert.length > 0) {
+            invertStyle.textContent = [
+                "".concat(fixes.invert.join(', '), " {"),
+                "    filter: ".concat(getCSSFilterValue(__assign(__assign({}, filter), { contrast: filter.mode === 0 ? filter.contrast : clamp(filter.contrast - 10, 0, 100) })), " !important;"),
+                '}',
+            ].join('\n');
+        }
+        else {
+            invertStyle.textContent = '';
+        }
+        document.head.insertBefore(invertStyle, textStyle.nextSibling);
+        setupNodePositionWatcher(invertStyle, 'invert');
+        var inlineStyle = createOrUpdateStyle('darkreader--inline');
+        inlineStyle.textContent = getInlineOverrideStyle();
+        document.head.insertBefore(inlineStyle, invertStyle.nextSibling);
+        setupNodePositionWatcher(inlineStyle, 'inline');
+        var overrideStyle = createOrUpdateStyle('darkreader--override');
+        overrideStyle.textContent = fixes && fixes.css ? replaceCSSTemplates(fixes.css) : '';
+        document.head.appendChild(overrideStyle);
+        setupNodePositionWatcher(overrideStyle, 'override');
+        var variableStyle = createOrUpdateStyle('darkreader--variables');
+        var selectionColors = getSelectionColor(filter);
+        var darkSchemeBackgroundColor = filter.darkSchemeBackgroundColor, darkSchemeTextColor = filter.darkSchemeTextColor, lightSchemeBackgroundColor = filter.lightSchemeBackgroundColor, lightSchemeTextColor = filter.lightSchemeTextColor, mode = filter.mode;
+        var schemeBackgroundColor = mode === 0 ? lightSchemeBackgroundColor : darkSchemeBackgroundColor;
+        var schemeTextColor = mode === 0 ? lightSchemeTextColor : darkSchemeTextColor;
+        schemeBackgroundColor = modifyBackgroundColor(parse(schemeBackgroundColor), filter);
+        schemeTextColor = modifyForegroundColor(parse(schemeTextColor), filter);
+        variableStyle.textContent = [
+            ":root {",
+            "   --darkreader-neutral-background: ".concat(schemeBackgroundColor, ";"),
+            "   --darkreader-neutral-text: ".concat(schemeTextColor, ";"),
+            "   --darkreader-selection-background: ".concat(selectionColors.backgroundColorSelection, ";"),
+            "   --darkreader-selection-text: ".concat(selectionColors.foregroundColorSelection, ";"),
+            "}"
+        ].join('\n');
+        document.head.insertBefore(variableStyle, inlineStyle.nextSibling);
+        setupNodePositionWatcher(variableStyle, 'variables');
+        var rootVarsStyle = createOrUpdateStyle('darkreader--root-vars');
+        document.head.insertBefore(rootVarsStyle, variableStyle.nextSibling);
+        var proxyScript = createOrUpdateScript('darkreader--proxy');
+        proxyScript.append("(".concat(injectProxy, ")(!").concat(fixes && fixes.disableStyleSheetsProxy, ")"));
+        document.head.insertBefore(proxyScript, rootVarsStyle.nextSibling);
+        proxyScript.remove();
+    }
+    var shadowRootsWithOverrides = new Set();
+    function createShadowStaticStyleOverrides(root) {
+        var inlineStyle = createOrUpdateStyle('darkreader--inline', root);
+        inlineStyle.textContent = getInlineOverrideStyle();
+        root.insertBefore(inlineStyle, root.firstChild);
+        var overrideStyle = createOrUpdateStyle('darkreader--override', root);
+        overrideStyle.textContent = fixes && fixes.css ? replaceCSSTemplates(fixes.css) : '';
+        root.insertBefore(overrideStyle, inlineStyle.nextSibling);
+        var invertStyle = createOrUpdateStyle('darkreader--invert', root);
+        if (fixes && Array.isArray(fixes.invert) && fixes.invert.length > 0) {
+            invertStyle.textContent = [
+                "".concat(fixes.invert.join(', '), " {"),
+                "    filter: ".concat(getCSSFilterValue(__assign(__assign({}, filter), { contrast: filter.mode === 0 ? filter.contrast : clamp(filter.contrast - 10, 0, 100) })), " !important;"),
+                '}',
+            ].join('\n');
+        }
+        else {
+            invertStyle.textContent = '';
+        }
+        root.insertBefore(invertStyle, overrideStyle.nextSibling);
+        shadowRootsWithOverrides.add(root);
+    }
+    function replaceCSSTemplates($cssText) {
+        return $cssText.replace(/\${(.+?)}/g, function (_, $color) {
+            var color = tryParseColor($color);
+            if (color) {
+                return modifyColor(color, filter);
+            }
+            logWarn("Couldn't parse CSSTemplate's color.");
+            return $color;
+        });
+    }
+    function cleanFallbackStyle() {
+        var fallback = document.querySelector('.darkreader--fallback');
+        if (fallback) {
+            fallback.textContent = '';
+        }
+    }
+    function createDynamicStyleOverrides() {
+        cancelRendering();
+        var allStyles = getManageableStyles(document);
+        var newManagers = allStyles
+            .filter(function (style) { return !styleManagers.has(style); })
+            .map(function (style) { return createManager(style); });
+        newManagers
+            .map(function (manager) { return manager.details({ secondRound: false }); })
+            .filter(function (detail) { return detail && detail.rules.length > 0; })
+            .forEach(function (detail) {
+            variablesStore.addRulesForMatching(detail.rules);
+        });
+        variablesStore.matchVariablesAndDependants();
+        variablesStore.setOnRootVariableChange(function () {
+            variablesStore.putRootVars(document.head.querySelector('.darkreader--root-vars'), filter);
+        });
+        variablesStore.putRootVars(document.head.querySelector('.darkreader--root-vars'), filter);
+        styleManagers.forEach(function (manager) { return manager.render(filter, ignoredImageAnalysisSelectors); });
+        if (loadingStyles.size === 0) {
+            cleanFallbackStyle();
+        }
+        newManagers.forEach(function (manager) { return manager.watch(); });
+        var inlineStyleElements = toArray(document.querySelectorAll(INLINE_STYLE_SELECTOR));
+        iterateShadowHosts(document.documentElement, function (host) {
+            createShadowStaticStyleOverrides(host.shadowRoot);
+            var elements = host.shadowRoot.querySelectorAll(INLINE_STYLE_SELECTOR);
+            if (elements.length > 0) {
+                push(inlineStyleElements, elements);
+            }
+        });
+        inlineStyleElements.forEach(function (el) { return overrideInlineStyle(el, filter, ignoredInlineSelectors, ignoredImageAnalysisSelectors); });
+        handleAdoptedStyleSheets(document);
+    }
+    var loadingStylesCounter = 0;
+    var loadingStyles = new Set();
+    function createManager(element) {
+        var loadingStyleId = ++loadingStylesCounter;
+        logInfo("New manager for element, with loadingStyleID ".concat(loadingStyleId), element);
+        function loadingStart() {
+            if (!isDOMReady() || !didDocumentShowUp) {
+                loadingStyles.add(loadingStyleId);
+                logInfo("Current amount of styles loading: ".concat(loadingStyles.size));
+                var fallbackStyle = document.querySelector('.darkreader--fallback');
+                if (!fallbackStyle.textContent) {
+                    fallbackStyle.textContent = getModifiedFallbackStyle(filter, { strict: false });
+                }
+            }
+        }
+        function loadingEnd() {
+            loadingStyles.delete(loadingStyleId);
+            logInfo("Removed loadingStyle ".concat(loadingStyleId, ", now awaiting: ").concat(loadingStyles.size));
+            logInfo("To-do to be loaded", loadingStyles);
+            if (loadingStyles.size === 0 && isDOMReady()) {
+                cleanFallbackStyle();
+            }
+        }
+        function update() {
+            var details = manager.details({ secondRound: true });
+            if (!details) {
+                return;
+            }
+            variablesStore.addRulesForMatching(details.rules);
+            variablesStore.matchVariablesAndDependants();
+            manager.render(filter, ignoredImageAnalysisSelectors);
+        }
+        var manager = manageStyle(element, { update: update, loadingStart: loadingStart, loadingEnd: loadingEnd });
+        styleManagers.set(element, manager);
+        return manager;
+    }
+    function removeManager(element) {
+        var manager = styleManagers.get(element);
+        if (manager) {
+            manager.destroy();
+            styleManagers.delete(element);
+        }
+    }
+    var throttledRenderAllStyles = throttle(function (callback) {
+        styleManagers.forEach(function (manager) { return manager.render(filter, ignoredImageAnalysisSelectors); });
+        adoptedStyleManagers.forEach(function (manager) { return manager.render(filter, ignoredImageAnalysisSelectors); });
+        callback && callback();
+    });
+    var cancelRendering = function () {
+        throttledRenderAllStyles.cancel();
+    };
+    function onDOMReady() {
+        if (loadingStyles.size === 0) {
+            cleanFallbackStyle();
+            return;
+        }
+        logWarn("DOM is ready, but still have styles being loaded.", loadingStyles);
+    }
+    var documentVisibilityListener = null;
+    var didDocumentShowUp = !document.hidden;
+    function watchForDocumentVisibility(callback) {
+        var alreadyWatching = Boolean(documentVisibilityListener);
+        documentVisibilityListener = function () {
+            if (!document.hidden) {
+                stopWatchingForDocumentVisibility();
+                callback();
+                didDocumentShowUp = true;
+            }
+        };
+        if (!alreadyWatching) {
+            document.addEventListener('visibilitychange', documentVisibilityListener);
+        }
+    }
+    function stopWatchingForDocumentVisibility() {
+        document.removeEventListener('visibilitychange', documentVisibilityListener);
+        documentVisibilityListener = null;
+    }
+    function createThemeAndWatchForUpdates() {
+        createStaticStyleOverrides();
+        function runDynamicStyle() {
+            createDynamicStyleOverrides();
+            watchForUpdates();
+        }
+        if (document.hidden && !filter.immediateModify) {
+            watchForDocumentVisibility(runDynamicStyle);
+        }
+        else {
+            runDynamicStyle();
+        }
+        changeMetaThemeColorWhenAvailable(filter);
+    }
+    function handleAdoptedStyleSheets(node) {
+        try {
+            if (Array.isArray(node.adoptedStyleSheets)) {
+                if (node.adoptedStyleSheets.length > 0) {
+                    var newManger = createAdoptedStyleSheetOverride(node);
+                    adoptedStyleManagers.push(newManger);
+                    newManger.render(filter, ignoredImageAnalysisSelectors);
+                }
+            }
+        }
+        catch (err) {
+            logWarn('Error occured in handleAdoptedStyleSheets: ', err);
+        }
+    }
+    function watchForUpdates() {
+        var managedStyles = Array.from(styleManagers.keys());
+        watchForStyleChanges(managedStyles, function (_a) {
+            var created = _a.created, updated = _a.updated, removed = _a.removed, moved = _a.moved;
+            var stylesToRemove = removed;
+            var stylesToManage = created.concat(updated).concat(moved)
+                .filter(function (style) { return !styleManagers.has(style); });
+            var stylesToRestore = moved
+                .filter(function (style) { return styleManagers.has(style); });
+            logInfo("Styles to be removed:", stylesToRemove);
+            stylesToRemove.forEach(function (style) { return removeManager(style); });
+            var newManagers = stylesToManage
+                .map(function (style) { return createManager(style); });
+            newManagers
+                .map(function (manager) { return manager.details({ secondRound: false }); })
+                .filter(function (detail) { return detail && detail.rules.length > 0; })
+                .forEach(function (detail) {
+                variablesStore.addRulesForMatching(detail.rules);
+            });
+            variablesStore.matchVariablesAndDependants();
+            newManagers.forEach(function (manager) { return manager.render(filter, ignoredImageAnalysisSelectors); });
+            newManagers.forEach(function (manager) { return manager.watch(); });
+            stylesToRestore.forEach(function (style) { return styleManagers.get(style).restore(); });
+        }, function (shadowRoot) {
+            createShadowStaticStyleOverrides(shadowRoot);
+            handleAdoptedStyleSheets(shadowRoot);
+        });
+        watchForInlineStyles(function (element) {
+            overrideInlineStyle(element, filter, ignoredInlineSelectors, ignoredImageAnalysisSelectors);
+            if (element === document.documentElement) {
+                var styleAttr = element.getAttribute('style') || '';
+                if (styleAttr.includes('--')) {
+                    variablesStore.matchVariablesAndDependants();
+                    variablesStore.putRootVars(document.head.querySelector('.darkreader--root-vars'), filter);
+                }
+            }
+        }, function (root) {
+            createShadowStaticStyleOverrides(root);
+            var inlineStyleElements = root.querySelectorAll(INLINE_STYLE_SELECTOR);
+            if (inlineStyleElements.length > 0) {
+                forEach(inlineStyleElements, function (el) { return overrideInlineStyle(el, filter, ignoredInlineSelectors, ignoredImageAnalysisSelectors); });
+            }
+        });
+        addDOMReadyListener(onDOMReady);
+    }
+    function stopWatchingForUpdates() {
+        styleManagers.forEach(function (manager) { return manager.pause(); });
+        stopStylePositionWatchers();
+        stopWatchingForStyleChanges();
+        stopWatchingForInlineStyles();
+        removeDOMReadyListener(onDOMReady);
+        cleanReadyStateCompleteListeners();
+    }
+    function createDarkReaderInstanceMarker() {
+        var metaElement = document.createElement('meta');
+        metaElement.name = 'darkreader';
+        metaElement.content = INSTANCE_ID;
+        document.head.appendChild(metaElement);
+    }
+    function isAnotherDarkReaderInstanceActive() {
+        var meta = document.querySelector('meta[name="darkreader"]');
+        if (meta) {
+            if (meta.content !== INSTANCE_ID) {
+                return true;
+            }
+            return false;
+        }
+        createDarkReaderInstanceMarker();
+        return false;
+    }
+    function createOrUpdateDynamicTheme(filterConfig, dynamicThemeFixes, iframe) {
+        filter = filterConfig;
+        fixes = dynamicThemeFixes;
+        if (fixes) {
+            ignoredImageAnalysisSelectors = Array.isArray(fixes.ignoreImageAnalysis) ? fixes.ignoreImageAnalysis : [];
+            ignoredInlineSelectors = Array.isArray(fixes.ignoreInlineStyle) ? fixes.ignoreInlineStyle : [];
+        }
+        else {
+            ignoredImageAnalysisSelectors = [];
+            ignoredInlineSelectors = [];
+        }
+        if (filter.immediateModify) {
+            setIsDOMReady(function () {
+                return true;
+            });
+        }
+        isIFrame$1 = iframe;
+        if (document.head) {
+            if (isAnotherDarkReaderInstanceActive()) {
+                return;
+            }
+            document.documentElement.setAttribute('data-darkreader-mode', 'dynamic');
+            document.documentElement.setAttribute('data-darkreader-scheme', filter.mode ? 'dark' : 'dimmed');
+            createThemeAndWatchForUpdates();
+        }
+        else {
+            if (!isFirefox) {
+                var fallbackStyle = createOrUpdateStyle('darkreader--fallback');
+                document.documentElement.appendChild(fallbackStyle);
+                fallbackStyle.textContent = getModifiedFallbackStyle(filter, { strict: true });
+            }
+            var headObserver_1 = new MutationObserver(function () {
+                if (document.head) {
+                    headObserver_1.disconnect();
+                    if (isAnotherDarkReaderInstanceActive()) {
+                        removeDynamicTheme();
+                        return;
+                    }
+                    createThemeAndWatchForUpdates();
+                }
+            });
+            headObserver_1.observe(document, { childList: true, subtree: true });
+        }
+    }
+    function removeProxy() {
+        document.dispatchEvent(new CustomEvent('__darkreader__cleanUp'));
+        removeNode(document.head.querySelector('.darkreader--proxy'));
+    }
+    function removeDynamicTheme() {
+        document.documentElement.removeAttribute("data-darkreader-mode");
+        document.documentElement.removeAttribute("data-darkreader-scheme");
+        cleanDynamicThemeCache();
+        removeNode(document.querySelector('.darkreader--fallback'));
+        if (document.head) {
+            restoreMetaThemeColor();
+            removeNode(document.head.querySelector('.darkreader--user-agent'));
+            removeNode(document.head.querySelector('.darkreader--text'));
+            removeNode(document.head.querySelector('.darkreader--invert'));
+            removeNode(document.head.querySelector('.darkreader--inline'));
+            removeNode(document.head.querySelector('.darkreader--override'));
+            removeNode(document.head.querySelector('.darkreader--variables'));
+            removeNode(document.head.querySelector('.darkreader--root-vars'));
+            removeNode(document.head.querySelector('meta[name="darkreader"]'));
+            removeProxy();
+        }
+        shadowRootsWithOverrides.forEach(function (root) {
+            removeNode(root.querySelector('.darkreader--inline'));
+            removeNode(root.querySelector('.darkreader--override'));
+        });
+        shadowRootsWithOverrides.clear();
+        forEach(styleManagers.keys(), function (el) { return removeManager(el); });
+        loadingStyles.clear();
+        cleanLoadingLinks();
+        forEach(document.querySelectorAll('.darkreader'), removeNode);
+        adoptedStyleManagers.forEach(function (manager) {
+            manager.destroy();
+        });
+        adoptedStyleManagers.splice(0);
+    }
+    function cleanDynamicThemeCache() {
+        variablesStore.clear();
+        parsedURLCache.clear();
+        stopWatchingForDocumentVisibility();
+        cancelRendering();
+        stopWatchingForUpdates();
+        cleanModificationCache();
+    }
+
+    var blobRegex = /url\(\"(blob\:.*?)\"\)/g;
+    function replaceBlobs(text) {
+        return __awaiter(this, void 0, void 0, function () {
+            var promises, data;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        promises = [];
+                        getMatches(blobRegex, text, 1).forEach(function (url) {
+                            var promise = loadAsDataURL(url);
+                            promises.push(promise);
+                        });
+                        return [4, Promise.all(promises)];
+                    case 1:
+                        data = _a.sent();
+                        return [2, text.replace(blobRegex, function () { return "url(\"".concat(data.shift(), "\")"); })];
+                }
+            });
+        });
+    }
+    var banner = "/*\n                        _______\n                       /       \\\n                      .==.    .==.\n                     ((  ))==((  ))\n                    / \"==\"    \"==\"\\\n                   /____|| || ||___\\\n       ________     ____    ________  ___    ___\n       |  ___  \\   /    \\   |  ___  \\ |  |  /  /\n       |  |  \\  \\ /  /\\  \\  |  |  \\  \\|  |_/  /\n       |  |   )  /  /__\\  \\ |  |__/  /|  ___  \\\n       |  |__/  /  ______  \\|  ____  \\|  |  \\  \\\n_______|_______/__/ ____ \\__\\__|___\\__\\__|___\\__\\____\n|  ___  \\ |  ____/ /    \\   |  ___  \\ |  ____|  ___  \\\n|  |  \\  \\|  |___ /  /\\  \\  |  |  \\  \\|  |___|  |  \\  \\\n|  |__/  /|  ____/  /__\\  \\ |  |   )  |  ____|  |__/  /\n|  ____  \\|  |__/  ______  \\|  |__/  /|  |___|  ____  \\\n|__|   \\__\\____/__/      \\__\\_______/ |______|__|   \\__\\\n                https://darkreader.org\n*/\n\n/*! Dark reader generated CSS | Licensed under MIT https://github.com/darkreader/darkreader/blob/master/LICENSE */\n";
+    function collectCSS() {
+        return __awaiter(this, void 0, void 0, function () {
+            function addStaticCSS(selector, comment) {
+                var staticStyle = document.querySelector(selector);
+                if (staticStyle && staticStyle.textContent) {
+                    css.push("/* ".concat(comment, " */"));
+                    css.push(staticStyle.textContent);
+                    css.push('');
+                }
+            }
+            var css, modifiedCSS, formattedCSS, _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        css = [banner];
+                        addStaticCSS('.darkreader--fallback', 'Fallback Style');
+                        addStaticCSS('.darkreader--user-agent', 'User-Agent Style');
+                        addStaticCSS('.darkreader--text', 'Text Style');
+                        addStaticCSS('.darkreader--invert', 'Invert Style');
+                        addStaticCSS('.darkreader--variables', 'Variables Style');
+                        modifiedCSS = [];
+                        document.querySelectorAll('.darkreader--sync').forEach(function (element) {
+                            forEach(element.sheet.cssRules, function (rule) {
+                                rule && rule.cssText && modifiedCSS.push(rule.cssText);
+                            });
+                        });
+                        if (!modifiedCSS.length) return [3, 2];
+                        formattedCSS = formatCSS(modifiedCSS.join('\n'));
+                        css.push('/* Modified CSS */');
+                        _b = (_a = css).push;
+                        return [4, replaceBlobs(formattedCSS)];
+                    case 1:
+                        _b.apply(_a, [_c.sent()]);
+                        css.push('');
+                        _c.label = 2;
+                    case 2:
+                        addStaticCSS('.darkreader--override', 'Override Style');
+                        return [2, css.join('\n')];
+                }
+            });
+        });
+    }
+
+    var isDarkReaderEnabled = false;
+    var isIFrame = (function () {
+        try {
+            return window.self !== window.top;
+        }
+        catch (err) {
+            console.warn(err);
+            return true;
+        }
+    })();
+    function enable(themeOptions, fixes) {
+        if (themeOptions === void 0) { themeOptions = {}; }
+        if (fixes === void 0) { fixes = null; }
+        var theme = __assign(__assign({}, DEFAULT_THEME), themeOptions);
+        if (theme.engine !== ThemeEngines.dynamicTheme) {
+            throw new Error('Theme engine is not supported.');
+        }
+        createOrUpdateDynamicTheme(theme, fixes, isIFrame);
+        isDarkReaderEnabled = true;
+    }
+    function isEnabled() {
+        return isDarkReaderEnabled;
+    }
+    function disable() {
+        removeDynamicTheme();
+        isDarkReaderEnabled = false;
+    }
+    var darkScheme = matchMedia('(prefers-color-scheme: dark)');
+    var store = {
+        themeOptions: null,
+        fixes: null,
+    };
+    function handleColorScheme() {
+        if (darkScheme.matches) {
+            enable(store.themeOptions, store.fixes);
+        }
+        else {
+            disable();
+        }
+    }
+    function auto(themeOptions, fixes) {
+        if (themeOptions === void 0) { themeOptions = {}; }
+        if (fixes === void 0) { fixes = null; }
+        if (themeOptions) {
+            store = { themeOptions: themeOptions, fixes: fixes };
+            handleColorScheme();
+            if (isMatchMediaChangeEventListenerSupported) {
+                darkScheme.addEventListener('change', handleColorScheme);
+            }
+            else {
+                darkScheme.addListener(handleColorScheme);
+            }
+        }
+        else {
+            if (isMatchMediaChangeEventListenerSupported) {
+                darkScheme.removeEventListener('change', handleColorScheme);
+            }
+            else {
+                darkScheme.removeListener(handleColorScheme);
+            }
+            disable();
+        }
+    }
+    function exportGeneratedCSS() {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4, collectCSS()];
+                    case 1: return [2, _a.sent()];
+                }
+            });
+        });
+    }
+    var setFetchMethod = setFetchMethod$1;
+
+    exports.auto = auto;
+    exports.disable = disable;
+    exports.enable = enable;
+    exports.exportGeneratedCSS = exportGeneratedCSS;
+    exports.isEnabled = isEnabled;
+    exports.setFetchMethod = setFetchMethod;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));

static/js/navbar.js

@@ -8,6 +8,9 @@ const updateNavBar = () => {
     $('#navbar-toggler').removeClass('navbar-dark');
     $('#navbar-toggler').addClass('navbar-light');
 
+    // color theme selector a.k.a. dark mode
+    $('#navbar-theme-icon-svg').removeClass('navbar-icon-svg-dark');
+
     // get the main logo from hidden img tag
     let mainLogo = document.getElementById("main-logo")
     if (mainLogo !== null) {
@@ -22,6 +25,9 @@ const updateNavBar = () => {
     $('#navbar-toggler').removeClass('navbar-light');
     $('#navbar-toggler').addClass('navbar-dark');
 
+    // color theme selector a.k.a. dark mode
+    $('#navbar-theme-icon-svg').addClass('navbar-icon-svg-dark');
+
     // get the inverted logo from hidden img tag
     let invertedLogo = document.getElementById("inverted-logo")
     if (invertedLogo !== null) {