Trying to fix flickering on reload

https://dev.to/ayc0/light-dark-mode-avoid-flickering-on-reload-1567
utensil · Sep 30, 2024 · 99e4af8 · 99e4af8
1 parent 37ede60
commit 99e4af8
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/assets/uts-layout.xsl b/assets/uts-layout.xsl
@@ -13,6 +13,7 @@
     <html>
       <head>
         <meta name="viewport" content="width=device-width" />
+        <style> :root { background-color: #151a1f !important; }</style>
         <link rel="stylesheet" href="style.css" />
         <link rel="stylesheet" href="katex.min.css" />
         <!-- uts-begin -->
@@ -37,7 +38,7 @@
       </head>
       <body>
         <ninja-keys placeholder="Start typing a note title or ID"></ninja-keys>
-        
+
         <header class="header">
           <nav class="nav">
             <div class="logo">
@@ -53,7 +54,7 @@
             </div>
           </nav>
         </header>
-        
+
         <div id="grid-wrapper">
           <article>
             <xsl:apply-templates select="f:tree" />
@@ -70,4 +71,4 @@
       </body>
     </html>
   </xsl:template>
-</xsl:stylesheet>
+</xsl:stylesheet>
diff --git a/bun/uts-style.css b/bun/uts-style.css
@@ -79,7 +79,7 @@ body {
     }
 }
 
-:root,
+
 :root[data-applied-mode="light"] {
     color-scheme: light;
     --uts-text: black;
@@ -91,17 +91,18 @@ body {
     /* #f4ecd9; */
 }
 
+:root,
 :root[data-applied-mode="dark"] {
     color-scheme: dark;
-    --uts-text: #d5d4d0;
-    --uts-link: #d5d4d0;
+    --uts-text: #cbd1db;
+    --uts-link: #cbd1db;
     --uts-text-gentle: rgb(174, 174, 174);
     --uts-text-cite: #8cd295;
-    --uts-background: #262626;
+    --uts-background: #151a1f;
     --uts-vocab: #db8c84;
 }
 
-body {
+:root {
     background-color: var(--uts-background) !important;
 }