npm - @eui/mobile-core - Versions diffs - 16.10.0-snapshot-1713366109950 → 17.0.0-next.10 - Mend

@eui/mobile-core 16.10.0-snapshot-1713366109950 → 17.0.0-next.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (436) hide show

package/docs/modules/{EuimMenuModule.html → EuimAboutModule.html} RENAMED Viewed

@@ -13,6 +13,64 @@
         <link rel="stylesheet" href="../styles/material.css">
     </head>
     <body>
+          <script>
+               // Blocking script to avaoid flickering dark mode
+               // Dark mode toggle button
+               var useDark = window.matchMedia('(prefers-color-scheme: dark)');
+               var darkModeState = useDark.matches;
+               var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
+               var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
+               var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
+               function checkToggle(check) {
+                    for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
+                         $darkModeToggleSwitchers[i].checked = check;
+                    }
+               }
+               function toggleDarkMode(state) {
+                    if (window.localStorage) {
+                         localStorage.setItem('compodoc_darkmode-state', state);
+                    }
+                    checkToggle(state);
+                    const hasClass = document.body.classList.contains('dark');
+                    if (state) {
+                         for (var i = 0; i < $darkModeToggles.length; i++) {
+                              $darkModeToggles[i].classList.add('dark');
+                         }
+                         if (!hasClass) {
+                              document.body.classList.add('dark');
+                         }
+                    } else {
+                         for (var i = 0; i < $darkModeToggles.length; i++) {
+                              $darkModeToggles[i].classList.remove('dark');
+                         }
+                         if (hasClass) {
+                              document.body.classList.remove('dark');
+                         }
+                    }
+               }
+               useDark.addEventListener('change', function (evt) {
+                    toggleDarkMode(evt.matches);
+               });
+               if (darkModeStateLocal) {
+                    darkModeState = darkModeStateLocal === 'true';
+               }
+               toggleDarkMode(darkModeState);
+               if ($darkModeToggles.length > 0) {
+                    for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
+                         $darkModeToggleSwitchers[i].addEventListener('change', function (event) {
+                              darkModeState = !darkModeState;
+                              toggleDarkMode(darkModeState);
+                         });
+                    }
+               }
+          </script>
         <div class="navbar navbar-default navbar-fixed-top d-block d-sm-none">
             <a href="../" class="navbar-brand">csdr documentation</a>
@@ -36,7 +94,7 @@
 <ol class="breadcrumb">
     <li class="breadcrumb-item">Modules</li>
-    <li class="breadcrumb-item" >EuimMenuModule</li>
+    <li class="breadcrumb-item" >EuimAboutModule</li>
 </ol>
@@ -56,7 +114,7 @@
             <h3>File</h3>
         </p>
         <p class="comment">
-            <code>packages/eui-mobile/packages/core/src/lib/components/euim-menu/euim-menu.module.ts</code>
+            <code>packages/eui-mobile/packages/core/src/lib/components/euim-about/euim-about.module.ts</code>
         </p>
@@ -70,7 +128,22 @@
                             title="Official documentation about module declarations"><span class="icon ion-ios-information-circle-outline"></span></a></h3>
                     <ul class="list-group">
                         <li class="list-group-item">
-                            <a href="../components/EuimMenuComponent.html">EuimMenuComponent</a>
+                            <a href="../components/EuimAboutComponent.html">EuimAboutComponent</a>
+                        </li>
+                        <li class="list-group-item">
+                            <a href="../components/EuimChangelogComponent.html">EuimChangelogComponent</a>
+                        </li>
+                        <li class="list-group-item">
+                            <a href="../components/EuimContactSupportComponent.html">EuimContactSupportComponent</a>
+                        </li>
+                        <li class="list-group-item">
+                            <a href="../components/EuimLegalNoticeComponent.html">EuimLegalNoticeComponent</a>
+                        </li>
+                        <li class="list-group-item">
+                            <a href="../components/EuimOpenSourceLicencesComponent.html">EuimOpenSourceLicencesComponent</a>
+                        </li>
+                        <li class="list-group-item">
+                            <a href="../components/EuimPrivacyStatementComponent.html">EuimPrivacyStatementComponent</a>
                         </li>
                     </ul>
                 </div>
@@ -83,10 +156,10 @@
                             <a href="../modules/EuimAvatarIconModule.html">EuimAvatarIconModule</a>
                         </li>
                         <li class="list-group-item">
-                            <a href="../modules/EuimLabelModule.html">EuimLabelModule</a>
+                            <a href="../modules/EuimHeaderDetailsModule.html">EuimHeaderDetailsModule</a>
                         </li>
                         <li class="list-group-item">
-                            <a href="../modules/EuimNotificationItemModule.html">EuimNotificationItemModule</a>
+                            <a href="../modules/EuimLabelModule.html">EuimLabelModule</a>
                         </li>
                     </ul>
                 </div>
@@ -96,7 +169,22 @@
                                 class="icon ion-ios-information-circle-outline"></a></h3>
                     <ul class="list-group">
                         <li class="list-group-item">
-                            <a href="../components/EuimMenuComponent.html">EuimMenuComponent</a>
+                            <a href="../components/EuimAboutComponent.html">EuimAboutComponent</a>
+                        </li>
+                        <li class="list-group-item">
+                            <a href="../components/EuimChangelogComponent.html">EuimChangelogComponent</a>
+                        </li>
+                        <li class="list-group-item">
+                            <a href="../components/EuimContactSupportComponent.html">EuimContactSupportComponent</a>
+                        </li>
+                        <li class="list-group-item">
+                            <a href="../components/EuimLegalNoticeComponent.html">EuimLegalNoticeComponent</a>
+                        </li>
+                        <li class="list-group-item">
+                            <a href="../components/EuimOpenSourceLicencesComponent.html">EuimOpenSourceLicencesComponent</a>
+                        </li>
+                        <li class="list-group-item">
+                            <a href="../components/EuimPrivacyStatementComponent.html">EuimPrivacyStatementComponent</a>
                         </li>
                     </ul>
                 </div>
@@ -151,7 +239,7 @@
        <script>
             var COMPODOC_CURRENT_PAGE_DEPTH = 1;
             var COMPODOC_CURRENT_PAGE_CONTEXT = 'module';
-            var COMPODOC_CURRENT_PAGE_URL = 'EuimMenuModule.html';
+            var COMPODOC_CURRENT_PAGE_URL = 'EuimAboutModule.html';
             var MAX_SEARCH_RESULTS = 15;
        </script>

package/docs/modules/EuimAlertMessageModule.html CHANGED Viewed

@@ -13,6 +13,64 @@
         <link rel="stylesheet" href="../styles/material.css">
     </head>
     <body>
+          <script>
+               // Blocking script to avaoid flickering dark mode
+               // Dark mode toggle button
+               var useDark = window.matchMedia('(prefers-color-scheme: dark)');
+               var darkModeState = useDark.matches;
+               var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
+               var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
+               var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
+               function checkToggle(check) {
+                    for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
+                         $darkModeToggleSwitchers[i].checked = check;
+                    }
+               }
+               function toggleDarkMode(state) {
+                    if (window.localStorage) {
+                         localStorage.setItem('compodoc_darkmode-state', state);
+                    }
+                    checkToggle(state);
+                    const hasClass = document.body.classList.contains('dark');
+                    if (state) {
+                         for (var i = 0; i < $darkModeToggles.length; i++) {
+                              $darkModeToggles[i].classList.add('dark');
+                         }
+                         if (!hasClass) {
+                              document.body.classList.add('dark');
+                         }
+                    } else {
+                         for (var i = 0; i < $darkModeToggles.length; i++) {
+                              $darkModeToggles[i].classList.remove('dark');
+                         }
+                         if (hasClass) {
+                              document.body.classList.remove('dark');
+                         }
+                    }
+               }
+               useDark.addEventListener('change', function (evt) {
+                    toggleDarkMode(evt.matches);
+               });
+               if (darkModeStateLocal) {
+                    darkModeState = darkModeStateLocal === 'true';
+               }
+               toggleDarkMode(darkModeState);
+               if ($darkModeToggles.length > 0) {
+                    for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
+                         $darkModeToggleSwitchers[i].addEventListener('change', function (event) {
+                              darkModeState = !darkModeState;
+                              toggleDarkMode(darkModeState);
+                         });
+                    }
+               }
+          </script>
         <div class="navbar navbar-default navbar-fixed-top d-block d-sm-none">
             <a href="../" class="navbar-brand">csdr documentation</a>
@@ -70,7 +128,22 @@
                             title="Official documentation about module declarations"><span class="icon ion-ios-information-circle-outline"></span></a></h3>
                     <ul class="list-group">
                         <li class="list-group-item">
-                            <a href="../components/EuimAlertMessageComponent.html">EuimAlertMessageComponent</a>
+                            <a href="../components/EuimAboutComponent.html">EuimAboutComponent</a>
+                        </li>
+                        <li class="list-group-item">
+                            <a href="../components/EuimChangelogComponent.html">EuimChangelogComponent</a>
+                        </li>
+                        <li class="list-group-item">
+                            <a href="../components/EuimContactSupportComponent.html">EuimContactSupportComponent</a>
+                        </li>
+                        <li class="list-group-item">
+                            <a href="../components/EuimLegalNoticeComponent.html">EuimLegalNoticeComponent</a>
+                        </li>
+                        <li class="list-group-item">
+                            <a href="../components/EuimOpenSourceLicencesComponent.html">EuimOpenSourceLicencesComponent</a>
+                        </li>
+                        <li class="list-group-item">
+                            <a href="../components/EuimPrivacyStatementComponent.html">EuimPrivacyStatementComponent</a>
                         </li>
                     </ul>
                 </div>
@@ -90,7 +163,22 @@
                                 class="icon ion-ios-information-circle-outline"></a></h3>
                     <ul class="list-group">
                         <li class="list-group-item">
-                            <a href="../components/EuimAlertMessageComponent.html">EuimAlertMessageComponent</a>
+                            <a href="../components/EuimAboutComponent.html">EuimAboutComponent</a>
+                        </li>
+                        <li class="list-group-item">
+                            <a href="../components/EuimChangelogComponent.html">EuimChangelogComponent</a>
+                        </li>
+                        <li class="list-group-item">
+                            <a href="../components/EuimContactSupportComponent.html">EuimContactSupportComponent</a>
+                        </li>
+                        <li class="list-group-item">
+                            <a href="../components/EuimLegalNoticeComponent.html">EuimLegalNoticeComponent</a>
+                        </li>
+                        <li class="list-group-item">
+                            <a href="../components/EuimOpenSourceLicencesComponent.html">EuimOpenSourceLicencesComponent</a>
+                        </li>
+                        <li class="list-group-item">
+                            <a href="../components/EuimPrivacyStatementComponent.html">EuimPrivacyStatementComponent</a>
                         </li>
                     </ul>
                 </div>

package/docs/modules/EuimAllModule.html CHANGED Viewed

@@ -13,6 +13,64 @@
         <link rel="stylesheet" href="../styles/material.css">
     </head>
     <body>
+          <script>
+               // Blocking script to avaoid flickering dark mode
+               // Dark mode toggle button
+               var useDark = window.matchMedia('(prefers-color-scheme: dark)');
+               var darkModeState = useDark.matches;
+               var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
+               var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
+               var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
+               function checkToggle(check) {
+                    for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
+                         $darkModeToggleSwitchers[i].checked = check;
+                    }
+               }
+               function toggleDarkMode(state) {
+                    if (window.localStorage) {
+                         localStorage.setItem('compodoc_darkmode-state', state);
+                    }
+                    checkToggle(state);
+                    const hasClass = document.body.classList.contains('dark');
+                    if (state) {
+                         for (var i = 0; i < $darkModeToggles.length; i++) {
+                              $darkModeToggles[i].classList.add('dark');
+                         }
+                         if (!hasClass) {
+                              document.body.classList.add('dark');
+                         }
+                    } else {
+                         for (var i = 0; i < $darkModeToggles.length; i++) {
+                              $darkModeToggles[i].classList.remove('dark');
+                         }
+                         if (hasClass) {
+                              document.body.classList.remove('dark');
+                         }
+                    }
+               }
+               useDark.addEventListener('change', function (evt) {
+                    toggleDarkMode(evt.matches);
+               });
+               if (darkModeStateLocal) {
+                    darkModeState = darkModeStateLocal === 'true';
+               }
+               toggleDarkMode(darkModeState);
+               if ($darkModeToggles.length > 0) {
+                    for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
+                         $darkModeToggleSwitchers[i].addEventListener('change', function (event) {
+                              darkModeState = !darkModeState;
+                              toggleDarkMode(darkModeState);
+                         });
+                    }
+               }
+          </script>
         <div class="navbar navbar-default navbar-fixed-top d-block d-sm-none">
             <a href="../" class="navbar-brand">csdr documentation</a>
@@ -71,13 +129,13 @@
                                 class="icon ion-ios-information-circle-outline"></a></h3>
                     <ul class="list-group">
                         <li class="list-group-item">
-                            <a href="../modules/EuimAlertMessageModule.html">EuimAlertMessageModule</a>
+                            <a href="../modules/EuimAboutModule.html">EuimAboutModule</a>
                         </li>
                         <li class="list-group-item">
-                            <a href="../modules/EuimAppModule.html">EuimAppModule</a>
+                            <a href="../modules/EuimAlertMessageModule.html">EuimAlertMessageModule</a>
                         </li>
                         <li class="list-group-item">
-                            <a href="../modules/EuimAppSidebarModule.html">EuimAppSidebarModule</a>
+                            <a href="../modules/EuimAppModule.html">EuimAppModule</a>
                         </li>
                         <li class="list-group-item">
                             <a href="../modules/EuimAvatarIconModule.html">EuimAvatarIconModule</a>
@@ -91,9 +149,6 @@
                         <li class="list-group-item">
                             <a href="../modules/EuimChipSelectorComponentModule.html">EuimChipSelectorComponentModule</a>
                         </li>
-                        <li class="list-group-item">
-                            <a href="../modules/EuimControlFeedbackModule.html">EuimControlFeedbackModule</a>
-                        </li>
                         <li class="list-group-item">
                             <a href="../modules/EuimDataSummaryModule.html">EuimDataSummaryModule</a>
                         </li>
@@ -103,33 +158,18 @@
                         <li class="list-group-item">
                             <a href="../modules/EuimEmptyListPlaceholderModule.html">EuimEmptyListPlaceholderModule</a>
                         </li>
-                        <li class="list-group-item">
-                            <a href="../modules/EuimFieldsetModule.html">EuimFieldsetModule</a>
-                        </li>
                         <li class="list-group-item">
                             <a href="../modules/EuimHeaderDetailsModule.html">EuimHeaderDetailsModule</a>
                         </li>
-                        <li class="list-group-item">
-                            <a href="../modules/EuimInfoScreenModule.html">EuimInfoScreenModule</a>
-                        </li>
-                        <li class="list-group-item">
-                            <a href="../modules/EuimItemDividerModule.html">EuimItemDividerModule</a>
-                        </li>
                         <li class="list-group-item">
                             <a href="../modules/EuimLabelModule.html">EuimLabelModule</a>
                         </li>
                         <li class="list-group-item">
                             <a href="../modules/EuimLanguageSelectorModule.html">EuimLanguageSelectorModule</a>
                         </li>
-                        <li class="list-group-item">
-                            <a href="../modules/EuimListHeaderModule.html">EuimListHeaderModule</a>
-                        </li>
                         <li class="list-group-item">
                             <a href="../modules/EuimMediaHeaderModule.html">EuimMediaHeaderModule</a>
                         </li>
-                        <li class="list-group-item">
-                            <a href="../modules/EuimMenuModule.html">EuimMenuModule</a>
-                        </li>
                         <li class="list-group-item">
                             <a href="../modules/EuimMessageModule.html">EuimMessageModule</a>
                         </li>
@@ -157,15 +197,9 @@
                         <li class="list-group-item">
                             <a href="../modules/EuimSliderInfoScreenModule.html">EuimSliderInfoScreenModule</a>
                         </li>
-                        <li class="list-group-item">
-                            <a href="../modules/EuimSliderModule.html">EuimSliderModule</a>
-                        </li>
                         <li class="list-group-item">
                             <a href="../modules/EuimSpinnerComponentModule.html">EuimSpinnerComponentModule</a>
                         </li>
-                        <li class="list-group-item">
-                            <a href="../modules/EuimStepperComponentModule.html">EuimStepperComponentModule</a>
-                        </li>
                         <li class="list-group-item">
                             <a href="../modules/EuimToolbarComponentModule.html">EuimToolbarComponentModule</a>
                         </li>
@@ -180,13 +214,13 @@
                                 class="icon ion-ios-information-circle-outline"></a></h3>
                     <ul class="list-group">
                         <li class="list-group-item">
-                            <a href="../modules/EuimAlertMessageModule.html">EuimAlertMessageModule</a>
+                            <a href="../modules/EuimAboutModule.html">EuimAboutModule</a>
                         </li>
                         <li class="list-group-item">
-                            <a href="../modules/EuimAppModule.html">EuimAppModule</a>
+                            <a href="../modules/EuimAlertMessageModule.html">EuimAlertMessageModule</a>
                         </li>
                         <li class="list-group-item">
-                            <a href="../modules/EuimAppSidebarModule.html">EuimAppSidebarModule</a>
+                            <a href="../modules/EuimAppModule.html">EuimAppModule</a>
                         </li>
                         <li class="list-group-item">
                             <a href="../modules/EuimAvatarIconModule.html">EuimAvatarIconModule</a>
@@ -200,9 +234,6 @@
                         <li class="list-group-item">
                             <a href="../components/EuimChipSelectorComponentModule.html">EuimChipSelectorComponentModule</a>
                         </li>
-                        <li class="list-group-item">
-                            <a href="../modules/EuimControlFeedbackModule.html">EuimControlFeedbackModule</a>
-                        </li>
                         <li class="list-group-item">
                             <a href="../modules/EuimDataSummaryModule.html">EuimDataSummaryModule</a>
                         </li>
@@ -212,33 +243,18 @@
                         <li class="list-group-item">
                             <a href="../modules/EuimEmptyListPlaceholderModule.html">EuimEmptyListPlaceholderModule</a>
                         </li>
-                        <li class="list-group-item">
-                            <a href="../modules/EuimFieldsetModule.html">EuimFieldsetModule</a>
-                        </li>
                         <li class="list-group-item">
                             <a href="../modules/EuimHeaderDetailsModule.html">EuimHeaderDetailsModule</a>
                         </li>
-                        <li class="list-group-item">
-                            <a href="../modules/EuimInfoScreenModule.html">EuimInfoScreenModule</a>
-                        </li>
-                        <li class="list-group-item">
-                            <a href="../modules/EuimItemDividerModule.html">EuimItemDividerModule</a>
-                        </li>
                         <li class="list-group-item">
                             <a href="../modules/EuimLabelModule.html">EuimLabelModule</a>
                         </li>
                         <li class="list-group-item">
                             <a href="../modules/EuimLanguageSelectorModule.html">EuimLanguageSelectorModule</a>
                         </li>
-                        <li class="list-group-item">
-                            <a href="../modules/EuimListHeaderModule.html">EuimListHeaderModule</a>
-                        </li>
                         <li class="list-group-item">
                             <a href="../modules/EuimMediaHeaderModule.html">EuimMediaHeaderModule</a>
                         </li>
-                        <li class="list-group-item">
-                            <a href="../modules/EuimMenuModule.html">EuimMenuModule</a>
-                        </li>
                         <li class="list-group-item">
                             <a href="../modules/EuimMessageModule.html">EuimMessageModule</a>
                         </li>
@@ -266,15 +282,9 @@
                         <li class="list-group-item">
                             <a href="../modules/EuimSliderInfoScreenModule.html">EuimSliderInfoScreenModule</a>
                         </li>
-                        <li class="list-group-item">
-                            <a href="../modules/EuimSliderModule.html">EuimSliderModule</a>
-                        </li>
                         <li class="list-group-item">
                             <a href="../components/EuimSpinnerComponentModule.html">EuimSpinnerComponentModule</a>
                         </li>
-                        <li class="list-group-item">
-                            <a href="../components/EuimStepperComponentModule.html">EuimStepperComponentModule</a>
-                        </li>
                         <li class="list-group-item">
                             <a href="../components/EuimToolbarComponentModule.html">EuimToolbarComponentModule</a>
                         </li>

package/docs/modules/EuimAppModule.html CHANGED Viewed

@@ -13,6 +13,64 @@
         <link rel="stylesheet" href="../styles/material.css">
     </head>
     <body>
+          <script>
+               // Blocking script to avaoid flickering dark mode
+               // Dark mode toggle button
+               var useDark = window.matchMedia('(prefers-color-scheme: dark)');
+               var darkModeState = useDark.matches;
+               var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
+               var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
+               var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
+               function checkToggle(check) {
+                    for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
+                         $darkModeToggleSwitchers[i].checked = check;
+                    }
+               }
+               function toggleDarkMode(state) {
+                    if (window.localStorage) {
+                         localStorage.setItem('compodoc_darkmode-state', state);
+                    }
+                    checkToggle(state);
+                    const hasClass = document.body.classList.contains('dark');
+                    if (state) {
+                         for (var i = 0; i < $darkModeToggles.length; i++) {
+                              $darkModeToggles[i].classList.add('dark');
+                         }
+                         if (!hasClass) {
+                              document.body.classList.add('dark');
+                         }
+                    } else {
+                         for (var i = 0; i < $darkModeToggles.length; i++) {
+                              $darkModeToggles[i].classList.remove('dark');
+                         }
+                         if (hasClass) {
+                              document.body.classList.remove('dark');
+                         }
+                    }
+               }
+               useDark.addEventListener('change', function (evt) {
+                    toggleDarkMode(evt.matches);
+               });
+               if (darkModeStateLocal) {
+                    darkModeState = darkModeStateLocal === 'true';
+               }
+               toggleDarkMode(darkModeState);
+               if ($darkModeToggles.length > 0) {
+                    for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
+                         $darkModeToggleSwitchers[i].addEventListener('change', function (event) {
+                              darkModeState = !darkModeState;
+                              toggleDarkMode(darkModeState);
+                         });
+                    }
+               }
+          </script>
         <div class="navbar navbar-default navbar-fixed-top d-block d-sm-none">
             <a href="../" class="navbar-brand">csdr documentation</a>
@@ -79,9 +137,6 @@
                             title="Official documentation about module imports"><span
                                 class="icon ion-ios-information-circle-outline"></a></h3>
                     <ul class="list-group">
-                        <li class="list-group-item">
-                            <a href="../modules/EuimAppSidebarModule.html">EuimAppSidebarModule</a>
-                        </li>
                         <li class="list-group-item">
                             <a href="../modules/EuimLanguageSelectorModule.html">EuimLanguageSelectorModule</a>
                         </li>

package/docs/modules/EuimAvatarIconModule.html CHANGED Viewed

@@ -13,6 +13,64 @@
         <link rel="stylesheet" href="../styles/material.css">
     </head>
     <body>
+          <script>
+               // Blocking script to avaoid flickering dark mode
+               // Dark mode toggle button
+               var useDark = window.matchMedia('(prefers-color-scheme: dark)');
+               var darkModeState = useDark.matches;
+               var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
+               var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
+               var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
+               function checkToggle(check) {
+                    for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
+                         $darkModeToggleSwitchers[i].checked = check;
+                    }
+               }
+               function toggleDarkMode(state) {
+                    if (window.localStorage) {
+                         localStorage.setItem('compodoc_darkmode-state', state);
+                    }
+                    checkToggle(state);
+                    const hasClass = document.body.classList.contains('dark');
+                    if (state) {
+                         for (var i = 0; i < $darkModeToggles.length; i++) {
+                              $darkModeToggles[i].classList.add('dark');
+                         }
+                         if (!hasClass) {
+                              document.body.classList.add('dark');
+                         }
+                    } else {
+                         for (var i = 0; i < $darkModeToggles.length; i++) {
+                              $darkModeToggles[i].classList.remove('dark');
+                         }
+                         if (hasClass) {
+                              document.body.classList.remove('dark');
+                         }
+                    }
+               }
+               useDark.addEventListener('change', function (evt) {
+                    toggleDarkMode(evt.matches);
+               });
+               if (darkModeStateLocal) {
+                    darkModeState = darkModeStateLocal === 'true';
+               }
+               toggleDarkMode(darkModeState);
+               if ($darkModeToggles.length > 0) {
+                    for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
+                         $darkModeToggleSwitchers[i].addEventListener('change', function (event) {
+                              darkModeState = !darkModeState;
+                              toggleDarkMode(darkModeState);
+                         });
+                    }
+               }
+          </script>
         <div class="navbar navbar-default navbar-fixed-top d-block d-sm-none">
             <a href="../" class="navbar-brand">csdr documentation</a>