question on preventing css flickering when implementing dark mode #12533

aquaductape · 2020-05-05T19:35:36Z

aquaductape
May 5, 2020

I have a simple setup that persists a theme(such as dark mode) by using css variables and localStorage. My goal is to load the page with the correct theme, without the flashing of the default css theme(in this case it would be a light theme).

Here's an example below that shows flashing as I refresh. The flashing is more prevalent upon loading routes.

The way I prevented flashing was running a script before the content loads, to read local storage, get theme, and set css variables to the appropriate theme.

_document.js

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <script src="/static/theme.js"></script>
        </Head>
        <body>
          {/* some sources placed script inside body, before Main, but I experienced flashing */}
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

/static/theme.js

(function () {
  var currentTheme;

  function changeTheme(inputTheme) {
    if (inputTheme === "dark") {
      const theme = themeConfig.dark;
      for (let key in theme) {
        setCSSVar(key, theme[key]);
      }
      localStorage.setItem("theme", inputTheme);
    } else {
      const theme = themeConfig.light;
      for (let key in theme) {
        setCSSVar(key, theme[key]);
      }
      localStorage.setItem("theme", inputTheme);
    }
  }

  function setCSSVar(property, color) {
    document.documentElement.style.setProperty(property, color);
  }
  try {
    currentTheme = localStorage.getItem("theme") || "light";

    var themeConfig = {
      dark: {
        "--color-homepage-bg": "#0e141b",
        "--color-text": "#fff",
        "--code": "#ccc",
        "--color-blue": "#f300e0",
        "--color-grey": "#ccc",
      },
      light: {
        "--color-homepage-bg": "#fff",
        "--color-text": "#000",
        "--code": "#f1f1f1",
        "--color-blue": "#0070f3",
        "--color-grey": "#eaeaea",
      },
    };

    changeTheme(currentTheme);
  } catch (err) {
    console.log(new Error("accessing theme has been denied"));
  }
})();

Here's the result with no flashing, as I refresh. Live Demo

Even though I solved my problem, is it optimal or a bad solution? Here's the source code.

Answered by rafaelalmeidatk

May 5, 2020

Yeah this is a good solution, Dan did the same with his blog: https://github.com/gaearon/overreacted.io/blob/master/src/html.js#L21

But I would inline the JS like he did instead of making a request for it.

View full answer

rafaelalmeidatk · 2020-05-05T20:36:06Z

rafaelalmeidatk
May 5, 2020

Yeah this is a good solution, Dan did the same with his blog: https://github.com/gaearon/overreacted.io/blob/master/src/html.js#L21

But I would inline the JS like he did instead of making a request for it.

4 replies

rafaelalmeidatk May 5, 2020

Btw, this is unrelated for the question but the static folder has been deprecated in favor of the public folder

aquaductape May 5, 2020
Author

Interesting, I didn't know that static was a special directory, I named it that way because on my main project, I was working with typescript. Since the script is a JS file I placed it in a different folder, which I named static.

Placing the script file in public has issues when navigating to routes through url address. Loading home page it finds the script, but when loading to other pages it tries to find the script on that pathname rather than getting it at root of public.
For example, I'll open http://localhost:3000/docs/fish which results in GET http://localhost:3000/docs/theme.js net::ERR_ABORTED 404 (Not Found)

Previous attempt to run script by accessing it from public
_document.js

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <script src="theme.js"></script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

But that doesn't matter since I'm switching to inline JS in script tag that you recommended, which by the way, thanks 👍 😁

jason-shen Apr 21, 2021

i follow your code but still getting the flash very strange one here

aquaductape May 5, 2021
Author

@jason-shen Mind sharing the a reproducible example?

brianlovin · 2020-05-05T21:28:51Z

brianlovin
May 5, 2020

Yep, this looks good - basically the same thing that https://joshwcomeau.com/gatsby/dark-mode/ found as well, but as @rafaelalmeidatk mentions, inlining the JS is probably more correct.

3 replies

HiranmayaGundu May 17, 2020

Hey @brianlovin! I'm trying to do the same thing that was suggested in the blog above. I had to replace Object.entries().forEach with a for (key in object) because it seems like Object.entries was automatically being pollyfilled. Is there any way to prevent the pollyfilling?

aquaductape May 17, 2020
Author

I'd suggest you stick with for in.. loop instead of Object.entries because of speed. In this specific case I would value speed over readability since we want to the script to finish the dark mode logic as fast as possible since it's blocking the rendering of the page content.

Your theme could easily go over 50 css variables, stack overflow has around 100, facebook has 350.

HiranmayaGundu May 17, 2020

Ah, did not know about the performance characteristics of the various iteration techniques. Thanks @aquaductape!

kachkaev · 2020-05-24T11:37:08Z

kachkaev
May 24, 2020

I’ve used a similar trick in https://njt.now.sh, here is the commit: kachkaev/njt@1ef3bb0

Inlining JS is quicker than making a separate network request. To further reduce the network payload a bit, it is possible to compress inline JS with terser:

// in _document.tsx:
import Terser from "terser";
import mem from "mem";

const minify = mem(Terser.minify);

const InlineJs: React.FunctionComponent<{ code: string; children?: never }> = ({
  code,
}) => {
  const minifyOutput = minify(code);

  if (minifyOutput.error) {
    throw minifyOutput.error;
  }

  if (!minifyOutput.code) {
    throw new Error("Minified code is empty");
  }

  return <script dangerouslySetInnerHTML={{ __html: minifyOutput.code }} />;
}

// ...

<InlineJs code={`...`} />

Also, thanks to a hook from the use-dark-mode package, I got auto-syncing with the macOS theme without page reload 👀

0 replies

ThanosDodd · 2022-12-29T07:48:46Z

ThanosDodd
Dec 29, 2022

Excellent solution.
Has anyone updated it for Next 13's app directory? Because it seems only next/script is accepted for one thing, plus when using Typescript you can't export a self-executing function without export {} which paradoxically returns a Uncaught SyntaxError: Unexpected token 'export' error
Also it won't execute anyway if you add it in the Head instead of inside the body

0 replies

jamesvclements · 2023-03-10T17:05:49Z

jamesvclements
Mar 10, 2023
Collaborator

Wondering if this still works for everyone in Next.js 13.
My injected script runs locally, but it doesn't seem to execute when deployed.

<body>
  {/* The script here needs to run before the rest of the body to prevent default theme flicker */}
  <MagicScriptTag />
  <ThemeProvider>
    <StoreProvider>

const MagicScriptTag = () => {
  console.log("in magic script tag...");
  const boundFn = String(setColorsByTheme).replace("✸", JSON.stringify(COLORS));
  let calledFunction = `(${boundFn})()`;
  // eslint-disable-next-line react/no-danger
  return <script dangerouslySetInnerHTML={{ __html: calledFunction }} />;
};

0 replies

hungtcs · 2023-07-06T08:59:28Z

hungtcs
Jul 6, 2023

I use a similar way in nextjs 13, It works but I need to use attribute instead of css variables,
So when I refresh the page, I get the following warning:

Warning: Extra attributes from the server: data-color-mode

const memoizedMinify = mem(minify);

export default async function RootLayout({ children }: PropsWithChildren) {
  const setColorModeCode = await memoizedMinify(`
    (function() {
      if (window.localStorage.getItem('rhino.color_mode') === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.documentElement.setAttribute('data-color-mode', 'dark');
      }
    }());
  `);

  return (
    <html lang="en">
      <head>
        <script dangerouslySetInnerHTML={{__html: setColorModeCode.code!}}></script>
      </head>
      <body className={materialSymbolsOutlinedFont.variable}>
        {children}
      </body>
    </html>
  )
}

0 replies

Arndeverafter · 2023-08-10T21:51:21Z

Arndeverafter
Aug 10, 2023

One other way to accomplish the same and prevent flickering with a pure JS implementation would be to inline the following

  (function () {
    var currentTheme = "light";

    if (localStorage.getItem("theme")) {
      currentTheme = localStorage.getItem("theme");
    } else if (
      window.matchMedia &&
      window.matchMedia("(prefers-color-scheme: dark)").matches
    ) {
      currentTheme = "dark";
    }

    if (currentTheme === "dark") {
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
    }
    document.documentElement.setAttribute("data-theme", currentTheme);
    localStorage.setItem("theme", currentTheme);
  })();

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

question on preventing css flickering when implementing dark mode #12533

{{title}}

Replies: 7 comments 7 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

question on preventing css flickering when implementing dark mode #12533

Replies: 7 comments · 7 replies

aquaductape May 5, 2020 Author

aquaductape May 5, 2021 Author

aquaductape May 17, 2020 Author

jamesvclements Mar 10, 2023 Collaborator

Replies: 7 comments 7 replies

aquaductape May 5, 2020
Author

aquaductape May 5, 2021
Author

aquaductape May 17, 2020
Author

jamesvclements
Mar 10, 2023
Collaborator