Where to change dark mode background color? #263

mshumayl · 2021-10-24T10:00:15Z

mshumayl
Oct 24, 2021

Hi timlrx, I'd like to preface this question by saying thank you very much for this awesome starter! It's amazing how much functionality you manage to fit in in such a customizable way.

I have a question, how do I set the background color for the whole page, and customize for both dark mode and light mode?

This is what I've tried (in _app.tsx):

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="light">
      <Head>
        <meta content="width=device-width, initial-scale=1" name="viewport" />
      </Head>
      <Analytics />
      {/* Page-wide background color here */}
      <div className="bg-primaryCol dark:bg-darkCol">
        <LayoutWrapper>
          <Component {...pageProps} />
        </LayoutWrapper>
      </div>
    </ThemeProvider>
  )
}

This sets a page-wide background color of primaryCol (defined in tailwind.config.js) for light mode, but it stays with primaryCol for dark mode too.

What is the right way of doing this, and is there a smarter way of doing this rather than just throwing in a random div in _app.tsx?

Thank you in advance for your time and help. I really appreciate it.

Answered by vahidtakro

Oct 24, 2021

I have a question, how do I set the background color for the whole page, and customize for both dark mode and light mode?

Hello @mshumayl ,
you need to go to /pages/_document.js
line 37:

  <body className="antialiased text-black bg-white dark:bg-gray-900 dark:text-white">

this is where bg color sleeps.
Tailwind Background Colors

View full answer

vahidtakro · 2021-10-24T10:06:33Z

vahidtakro
Oct 24, 2021

I have a question, how do I set the background color for the whole page, and customize for both dark mode and light mode?

Hello @mshumayl ,
you need to go to /pages/_document.js
line 37:

  <body className="antialiased text-black bg-white dark:bg-gray-900 dark:text-white">

this is where bg color sleeps.
Tailwind Background Colors

1 reply

mshumayl Oct 24, 2021
Author

Thank you very much for the pointer, @vahidtakro!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Where to change dark mode background color? #263

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Where to change dark mode background color? #263

mshumayl Oct 24, 2021

Replies: 1 comment · 1 reply

vahidtakro Oct 24, 2021

mshumayl Oct 24, 2021 Author

mshumayl
Oct 24, 2021

Replies: 1 comment 1 reply

vahidtakro
Oct 24, 2021

mshumayl Oct 24, 2021
Author