Disabled dark more on mobile, update theme-color on Safari

tonsky · Apr 3, 2024 · 12059db · 12059db
1 parent c553c98
commit 12059db
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/site/script.js b/site/script.js
@@ -58,14 +58,17 @@ function updateFlashlight(e) {
 
 function updateDarkMode(e) {
   const body = document.body;
+  const theme = document.querySelector("meta[name=theme-color]");
   if (body.classList.contains('dark')) {
     document.cookie = 'dark=true; SameSite=lax; path=/';
+    theme.content = "#000";
     updateFlashlight(e);
     ['mousemove', 'touchstart', 'touchmove', 'touchend'].forEach(function(s) {
       document.documentElement.addEventListener(s, updateFlashlight, false);
     });
   } else {
     document.cookie = 'dark=false; SameSite=lax; path=/';
+    theme.content = "#FDDB29";
     ['mousemove', 'touchstart', 'touchmove', 'touchend'].forEach(function(s) {
       document.documentElement.removeEventListener(s, updateFlashlight, false);
     });

diff --git a/site/style.css b/site/style.css
@@ -34,6 +34,9 @@ body { margin: 50px 0; background-color: #FDDB29; color: var(--text); }
 body.dark .dark_mode { background-position: 0 0; }
 #darkModeGlow { background-position: 0 -24px; outline: 1.5px solid #15FB1F; box-shadow: 0 0 10px 1.5px #15FB1F; z-index: 20; opacity: 0; position: absolute; }
 body.dark #darkModeGlow { opacity: 1; }
+@media (any-pointer: coarse) {
+  .dark_mode, #darkModeGlow { display: none; }
+}
 
 /* CONTENT */
 .content { display: flex; flex-direction: column; gap: var(--gap); align-items: center; }