🐛 (docs): loading screen is not adapted for the dark theme (#1834)

masastack · Apr 10, 2024 · 338eeb1 · 338eeb1
1 parent 647a7ab
commit 338eeb1
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 78 deletions.
diff --git a/docs/Masa.Docs.WebAssembly/wwwroot/css/app.css b/docs/Masa.Docs.WebAssembly/wwwroot/css/app.css
@@ -1,32 +1,62 @@
-.loading-progress {
-    position: relative;
-    display: block;
-    width: 8rem;
-    height: 8rem;
-    margin: 20vh auto 1rem auto;
-}
-
-    .loading-progress circle {
-        fill: none;
-        stroke: #e0e0e0;
-        stroke-width: 0.6rem;
-        transform-origin: 50% 50%;
-        transform: rotate(-90deg);
-    }
+.gegga {
+    width: 0;
+}
+
+.snurra {
+    filter: url(#gegga);
+}
+
+#app.dark {
+    background-color: #131316;
+}
+
+#app:not(.dark) .stopp1 {
+    stop-color: #4318FF;
+}
+
+#app:not(.dark) .stopp2 {
+    stop-color: #A18BFF;
+}
 
-        .loading-progress circle:last-child {
-            stroke: #1b6ec2;
-            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
-            transition: stroke-dasharray 0.05s ease-in-out;
-        }
+#app.dark .stopp1 {
+    stop-color: #A18BFF;
+}
+
+#app.dark .stopp2 {
+    stop-color: #C5C0FF;
+}
+
+.halvan {
+    animation: Snurra1 10s infinite linear;
+    stroke-dasharray: 180 800;
+    fill: none;
+    stroke: url(#gradient);
+    stroke-width: 23;
+    stroke-linecap: round;
+}
 
-.loading-progress-text {
+.strecken {
+    animation: Snurra1 3s infinite linear;
+    stroke-dasharray: 26 54;
+    fill: none;
+    stroke: url(#gradient);
+    stroke-width: 23;
+    stroke-linecap: round;
+}
+
+.skugga {
+    filter: blur(5px);
+    opacity: 0.3;
     position: absolute;
-    text-align: center;
-    font-weight: bold;
-    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
+    transform: translate(3px, 3px);
 }
 
-    .loading-progress-text:after {
-        content: var(--blazor-load-percentage-text, "Loading");
+@keyframes Snurra1 {
+    0% {
+        stroke-dashoffset: -403px;
     }
+
+    100% {
+        stroke-dashoffset: 0;
+    }
+}
diff --git a/docs/Masa.Docs.WebAssembly/wwwroot/index.html b/docs/Masa.Docs.WebAssembly/wwwroot/index.html
@@ -31,58 +31,6 @@
     <link href="_content/Masa.Docs.Shared/prism/prism-line-highlight.min.css" rel="stylesheet">
     <link href="_content/Masa.Docs.Shared/css/docs.css" rel="stylesheet">
     <link href="_content/Masa.Docs.Shared/css/docs--sm-and-down.css" rel="stylesheet" media="(max-width: 960px)">
-    <style>
-        .gegga {
-            width: 0;
-        }
-
-        .snurra {
-            filter: url(#gegga);
-        }
-
-        .stopp1 {
-            stop-color: #4318FF;
-        }
-
-        .stopp2 {
-            stop-color: #A18BFF;
-        }
-
-        .halvan {
-            animation: Snurra1 10s infinite linear;
-            stroke-dasharray: 180 800;
-            fill: none;
-            stroke: url(#gradient);
-            stroke-width: 23;
-            stroke-linecap: round;
-        }
-
-        .strecken {
-            animation: Snurra1 3s infinite linear;
-            stroke-dasharray: 26 54;
-            fill: none;
-            stroke: url(#gradient);
-            stroke-width: 23;
-            stroke-linecap: round;
-        }
-
-        .skugga {
-            filter: blur(5px);
-            opacity: 0.3;
-            position: absolute;
-            transform: translate(3px, 3px);
-        }
-
-        @keyframes Snurra1 {
-            0% {
-                stroke-dashoffset: -403px;
-            }
-
-            100% {
-                stroke-dashoffset: 0;
-            }
-        }
-    </style>
 </head>
 
 <body>
@@ -121,6 +69,12 @@
         <a class="dismiss">🗙</a>
     </div>
 
+    <script>
+        const dark = localStorage.getItem("masablazor@theme");
+        if ((!dark && window.matchMedia('(prefers-color-scheme: dark)').matches) || dark === "dark") {
+            document.getElementById("app").classList.add("dark")
+        }
+    </script>
     <script src="js/sw.js"></script>
     <script src="_framework/blazor.webassembly.js" autostart="false"></script>
     <script src="_content/BlazorComponent/js/blazor-component.js"></script>