fix: screen flash on changing themes

Deep-Codes commented 2 years ago

Attempts to fix #75

There are 2 approaches for this issue

Run a script in the <head> tag

This works well when was have theme data attribute in the HTML element So when the page loads we can get the theme based on preference and localStorage and assign it before the <body> starts executing.

const docHtml = document.documentElement.dataset;
docHtml.theme =getTheme();

and then we add it to _document.tsx

import Document, { Html, Head, Main, NextScript } from 'next/document';
import React from 'react';

class MyDocument extends Document {
    render() {
        return (
            <Html lang="en">
                <Head>
                    {/* To Avoid Flickering */}
                    <script type="text/javascript" src="/static/theme.js" />
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

export default MyDocument;

Since we aren't using the data theme attribute here instead we are assigning the theme based on className to the body element.

Using next-themes

Things I have done in this PR:

added the package next-themes (1.59 kb)
wrapped app component with <ThemeProvider />
by default next-themes uses data attribute so passing attribute="class"
adding base styles to body <body className="bg-white dark:bg-gray-875">
using useTheme() hook to get current theme and setTheme function to toggle

Some implementations

https://github.com/leerob/leerob.io/blob/7bd1fdfdb0f5bf7ad0945b14f7a0da26eaa68c11/pages/_app.tsx#L13

vercel[bot] commented 2 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/sliphq/run-wasm/H6QpxwjrpBAeeQTsHQQUEZ9DDYvg
✅ Preview: https://run-wasm-git-fork-deep-codes-fix-dark-mode-sliphq.vercel.app

kennethcassel commented 2 years ago

Thanks for the PR and detailed info! Can you resolve the merge conflicts? We merged a few PR earlier today (dark mode toggle seems to be missing on your preview deploy)

Deep-Codes commented 2 years ago

Thanks for the PR and detailed info! Can you resolve the merge conflicts? We merged a few PR earlier today (dark mode toggle seems to be missing on your preview deploy)

Yeah was on it, doing

kennethcassel commented 2 years ago

Ah one small thing is the toggle icon isn't showing up on mobile safari

Deep-Codes commented 2 years ago

Ah one small thing is the toggle icon isn't showing up on mobile safari

Simulator Screen Shot - iPhone 12 Pro Max - 2021-10-02 at 06 24 32

Adding width and height should solve it commiting

Deep-Codes commented 2 years ago

Verified on iPhone Safari let me know if anything else 👍🏽

kennethcassel commented 2 years ago

It's great thank you!

slipHQ / run-wasm

fix: screen flash on changing themes #87