prevent fading into dark theme if we're immediately setting it on load

2026-06-13 19:55:26 -04:00 · 2022-02-06 12:25:48 -05:00
parent 4e7f235ed5
commit ee1b708b99
16 changed files with 50 additions and 35 deletions
@@ -11,6 +11,7 @@

 .link {
  color: inherit;
+  text-decoration: none;
 }

 .row {
@@ -22,6 +22,7 @@
  padding: 0 0.25em;
  color: var(--medium-light);
  font-weight: 300;
+  text-decoration: none;
  opacity: 0; /* overridden on hover below (except on small screens) */
 }
 .anchor::before {
@@ -1,4 +1,5 @@
 import Head from "next/head";
+import Script from "next/script";
 import { useTheme } from "next-themes";
 import classNames from "classnames";
 import Header from "../Header/Header";
@@ -18,11 +19,17 @@ const Layout = ({ noContainer, className, children, ...rest }: Props) => {

  return (
    <>
-      {resolvedTheme && (
-        <Head>
-          <meta name="theme-color" content={themeColors[resolvedTheme]} />
-        </Head>
-      )}
+      <Head>
+        {resolvedTheme && <meta name="theme-color" content={themeColors[resolvedTheme]} />}
+
+        {/* kinda a hack to prevent dramatically fading into dark theme if we're immediately setting it on load */}
+        <style>{`.page.loading,.page.loading *{transition:none!important}`}</style>
+      </Head>
+
+      {/* remove the `.loading` class above from body once the page is finished loading */}
+      <Script id="unblock-transitions" strategy="lazyOnload">
+        {`try{const cl=document.body.classList;cl.remove("loading");cl.add("loaded")}catch(e){}`}
+      </Script>

      <div className={classNames(styles.flex, className)} {...rest}>
        <Header />
@@ -4,6 +4,7 @@
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% var(--link-underline-size);
+  text-decoration: none;
  padding-bottom: 0.2rem;

  /* background-size is for hover animation, color & border are for theme fading: */
@@ -3,6 +3,7 @@
  align-items: center;
  color: var(--medium-dark);
  line-height: 1;
+  text-decoration: none;
  padding: 0.6em;
 }

@@ -45,6 +45,7 @@
 .date_link,
 .edit_link {
  color: inherit;
+  text-decoration: none;
 }

 .views {
@@ -11,6 +11,7 @@

 .link {
  color: inherit;
+  text-decoration: none;
 }

@media screen and (max-width: 768px) {
@@ -1,6 +1,7 @@
 .link {
  margin: 0 0.4em;
  color: var(--text);
+  text-decoration: none;
 }

 .link:hover {
@@ -7,6 +7,7 @@

 .link {
  color: inherit;
+  text-decoration: none;
 }

@media screen and (max-width: 768px) {
@@ -37,6 +37,7 @@

 .meta_link {
  color: inherit;
+  text-decoration: none;
 }

 .meta_link:hover {
@@ -2,6 +2,7 @@
  display: inline-flex;
  align-items: center;
  color: var(--medium-dark);
+  text-decoration: none;
 }

 .link:hover {