removed flickering

Author: pamparam83

templates/development.css

@@ -27,6 +27,7 @@ body {
     color: var(--page-text-color);
     background: var(--page-bg-color);
     line-height: 1;
+    display: none;
 }
 
 ul {
@@ -36,6 +37,9 @@ ul {
 
 
 /* light theme */
+.light-theme {
+    display: block;
+}
 :root {
     --page-bg-color: #fff;
     --page-text-color: #505050;
@@ -809,6 +813,8 @@ main {
     --button-color: #fff;
     --button-bg-hover: #5c636a;
     --button-color-hover: #fff;
+
+    display: block;
 }
 
 .dark-theme header {
@@ -873,77 +879,4 @@ main {
     display: inline;
 }
 
-@media (prefers-color-scheme: dark) {
-    body:not(.light-theme) {
-        --page-bg-color: rgba(46,46,46, 0.9);
-        --page-text-color: #fff;
-        --icon-color: #989898;
-        --icon-hover-color: #fff;
-    }
-
-    body:not(.light-theme) header {
-        --header-bg-color: #2e2e2e;
-        --previous-text-color: rgba(255, 255, 255, 0.8);
-        --previous-arrow-color: #fff;
-    }
-
-    body:not(.light-theme) .exception-card {
-        --exception-card-bg-color: #222;
-        --exception-card-border-color: #591e15;
-        --exception-class-text-color: #fff;
-        --exception-class-friendly-text-color: rgba(255, 255, 255, 0.5);
-        --exception-class-friendly-link-color: #E57373;
-        --exception-message-text-color: rgba(255, 255, 255, 0.8);
-    }
-
-    body:not(.light-theme) header .solution {
-        --text-color: rgba(255, 255, 255, 0.8);
-        --link-color: #03a9f4;
-        --link-hover-color: #39b9f3;
-        --blockquote-text-color: #999;
-        --blockquote-border-color: #484c50;
-        --code-bg-color: #2d333b;
-        --pre-bg-color: #2d333b;
-        --table-border-color: #484c50;
-        --separator-color: #484c50;
-    }
-
-    body:not(.light-theme) .call-stack {
-        --bg-color: #1e1e1e;
-        --border-color: transparent;
-        --box-shadow: 0 13px 20px rgba(0, 0, 0, 0.25);
-        --link-color: rgba(255, 255, 255, 0.5);
-        --error-line-bg-color: #422c2c;
-        --hover-line-bg-color: #292929;
-        --element-wrap-border-color: #141414;
-        --element-wrap-text-color: #fff;
-        --element-wrap-hover-text-color: #9cdcfe;
-        --vendor-bg-color: rgba(46,46,46, 0.9);
-        --vendor-border-color: #666;
-        --vendor-state-bg-color: #666;
-        --vendor-content-bg-color: rgba(46,46,46, 0.9);
-    }
-
-    body:not(.light-theme) .hljs {
-        --hljs-text-color: #fff;
-        --hljs-comment-text-color: #999;
-        --hljs-keyword-text-color: #88aece;
-        --hljs-attribute-text-color: #c59bc1;
-        --hljs-name-text-color: #f08d49;
-        --hljs-string-text-color: #b5bd68;
-        --hljs-code-text-color: #cccccc;
-        --hljs-delition-text-color: #de7176;
-        --hljs-addition-text-color: #76c490;
-    }
-
-    body:not(.light-theme) #dark-mode {
-        display: none;
-    }
-
-    body:not(.light-theme) #light-mode {
-        display: inline;
-    }
-}
-
-
 /* end dark-theme */

templates/development.php

@@ -191,6 +191,9 @@ class="copy-clipboard"
     <?= file_get_contents(__DIR__ . '/highlight.min.js') ?>
 </script>
 <script>
+    const LIGHT_THEME = 'light-theme';
+    const DARK_THEME = 'dark-theme';
+
     window.onload = function() {
         const codeBlocks = document.querySelectorAll('.solution pre code,.codeBlock');
         const callStackItems = document.getElementsByClassName('call-stack-item');
@@ -348,45 +351,40 @@ class="copy-clipboard"
         }
 
         function enableDarkTheme() {
-            document.body.classList.remove('light-theme');
-            document.body.classList.add('dark-theme');
-            setCookie('yii-exception-theme', 'dark-theme');
+            applyTheme(DARK_THEME);
+            setCookie('yii-exception-theme', DARK_THEME);
         }
 
         function enableLightTheme() {
-            document.body.classList.remove('dark-theme');
-            document.body.classList.add('light-theme');
-            setCookie('yii-exception-theme', 'light-theme');
+            applyTheme(LIGHT_THEME);
+            setCookie('yii-exception-theme', LIGHT_THEME);
         }
     };
 
     // Highlight lines that have text in them but still support text selection:
     document.onmousedown = function() { document.getElementsByTagName('body')[0].classList.add('mousedown'); }
     document.onmouseup = function() { document.getElementsByTagName('body')[0].classList.remove('mousedown'); }
 
-    <?php if (empty($theme)): ?>
     const themeMedia = window.matchMedia('(prefers-color-scheme: dark)');
     const theme = getCookie('yii-exception-theme');
 
     if (theme) {
         applyTheme(theme);
     } else {
-        applyTheme((themeMedia.matches ? 'dark-theme' : 'light-theme'));
+        applyTheme((themeMedia.matches ? DARK_THEME : LIGHT_THEME));
     }
 
     themeMedia.addEventListener('change', event => {
         if (!theme) {
-            applyTheme((event.matches ? 'dark-theme' : 'light-theme'));
+            applyTheme((event.matches ? DARK_THEME : LIGHT_THEME));
         }
     });
 
     function applyTheme(theme){
-        document.body.classList.remove('dark-theme', 'light-theme');
+        document.body.classList.remove(DARK_THEME, LIGHT_THEME);
         document.body.classList.add(theme);
     }
 
-    <?php endif; ?>
-
     function setCookie(name, value) {
         const date = new Date(2100, 0, 1);
         const expires = "; expires=" + date.toUTCString();