Fix #5808 auto dark theme detection flickering

app/Resources/static/themes/material/index.js

@@ -19,7 +19,7 @@ import './css/index.scss';
 
 const mobileMaxWidth = 993;
 
-function darkTheme() {
+(function darkTheme() {
   const rootEl = document.querySelector('html');
   const themeDom = {
     darkClass: 'dark-theme',
@@ -87,7 +87,9 @@ function darkTheme() {
       return true;
     },
   };
-  preferedColorScheme.init();
+
+  const addDarkThemeListeners = () => {
+    $(document).ready(() => {
       const lightThemeButtons = document.querySelectorAll('.js-theme-toggle[data-theme="light"]');
       [...lightThemeButtons].map((lightThemeButton) => {
         lightThemeButton.addEventListener('click', (e) => {
@@ -115,7 +117,12 @@ function darkTheme() {
         });
         return true;
       });
-}
+    });
+  };
+
+  preferedColorScheme.init();
+  addDarkThemeListeners();
+}());
 
 const stickyNav = () => {
   const nav = $('.js-entry-nav-top');
@@ -150,7 +157,6 @@ const articleScroll = () => {
 $(document).ready(() => {
   // sideNav
   $('.button-collapse').sideNav();
-  darkTheme();
   $('select').material_select();
   $('.collapsible').collapsible({
     accordion: false,