Implementing Dark and Light theme on front page

[ShiroTohu]

Question or Support Request

Describe your question or ask for support

I don't understand how we are supposed to change the tailwind styling depending on what theme has been selected (Dark/Light Theme). I've tried a lot of things as described below but to no avail.

What has been done so far

Before I get started, I have put the fixes requested #13. So I think the styles would be working.

import '@/styles/globals.css'
import type { AppProps } from 'next/app'

const App = ({ Component, pageProps }: AppProps) => {
  return <Component {...pageProps} />
}

export default App

Looking Through the Documentation

This is what I have encountered so far https://nextra.site/docs/docs-theme/theme-configuration#dark-mode-and-themes

• This showcases how to hide/toggle the Dark/Light theme button.
• It also showcases using custom themes, though I skimped by this since I don't think it addresses styling issues.

Nextra Website Source and the :global Operator

I think out of all of the options this is the one that I got the most closest too.

If I need anything to do with Nextra or Nextjs I usually head over to the Nextra source code which can be found here. I find this very useful in figuring out the best practices and what I should be doing. While look through the source of their website I found this code snippet which can be found here.

:global(.dark #docs-card img:nth-child(2)) {
      display: initial;
}

I don't really understand what global does so I looked it up and came across this. To me it seems like something to do with React CSS modules. To me it looks like that instead of making the styling apply to the module it applies it globally by removing the random numbering at the end. https://stackoverflow.com/questions/43613619/what-does-global-colon-global-do

I also took a look at the docs suggested by one of the users of the question https://github.com/css-modules/css-modules/blob/8d754656a1307daf7a6ca5abe6afb27fa930ab2c/docs/composition.md

With my limited knowledge, I tried these blocks of code.

body {
  background: linear-gradient(225deg, var(--background) 80%, var(--primary) 100%);
}

:global(.dark body) {
  background: linear-gradient(225deg, #ffffff 80%, var(--primary) 100%);
}

This one applies the styles to the body, though doesn't switch to a blinding white light when switched to dark mode.

:global(body) {
  background: linear-gradient(225deg, var(--background) 80%, var(--primary) 100%);
}

:global(.dark body) {
  background: linear-gradient(225deg, #ffffff 80%, var(--primary) 100%);
}

This didn't change anything and seem to revert to the default.

[!CAUTION] background-color doesn't seem to be working with hexadecimal's for some odd reason. Styling only works when I use linear gradients.

I also tried.

:root {
  --text: #0A060F;
  --background: #F3EFFB;
  --primary: #5E24DB;
  --secondary: #A17AF5;
  --accent: #8243FE;
}

:global(.dark) :root {
  --text: #F4F0F9;
  --background: #080410;
  --primary: #5E24DB;
  --secondary:#310A85;
  --accent: #3F01BC;
}

On inspection of the CSS the variables do not change depending on whether dark or light mode has been enabled.

Using Tailwind Dark Mode

It did come across my mind that it might possibly be paired with tailwind or something of the sort, so I tested this theory by adding styling to the heading

<h1 className="text-white dark:text-pink-200">Thread - v0.1.3</h1>

That didn't seem to change anything.

Using TSX?

I Remember seeing that Nextra has an API to see whether the theme has been changed.

https://nextra.site/docs/docs-theme/api/use-config#return-values

The useConfig hook is made to dynamically configure your project.

I don't know how to use the API, so I didn't attempt it. Though even if I knew it didn't strike me as the way to do it because dynamically allocating styles using TSX isn't good practice.

---

I have tried a lot more things on top of it, but can't seem to figure it out. I'm still trying to figure out a solution slowly, but I would figure that you would know.

[caffeine-addictt]

Looking the the nextra docs, which brings me to this github page.

Looks like to achieve custom themes would require something like this

html,
body {
  color: #000;
  background: #fff;
}

[data-theme='dark'],
[data-theme='dark'] body {
  color: #fff;
  background: #000;
}

Here is a more tailwind way

[ShiroTohu]

Awesome, thanks for the help.

[ShiroTohu]

I added the proposed changes and it seems to still not work

Adding Proposed Changes

I have just implemented the above in accordance with the styling that we want with the page.

:root {
  --text: #0A060F;
  --background: #F3EFFB;
  --primary: #5E24DB;
  --secondary: #A17AF5;
  --accent: #8243FE;
}

[data-theme="dark"] {
  --text: #F4F0F9;
  --background: #080410;
  --primary: #5E24DB;
  --secondary:#310A85;
  --accent: #3F01BC;
}

body {
  background: var(--background);
  background: linear-gradient(225deg, var(--background) 80%, var(--primary) 100%);
}

I used this as a reference: https://github.com/pacocoursey/next-themes#html--css

Just copy and pasting this didn't work as it seemed to stay on the light theme.

ThemeProvider

So I looked deeper in the documentation. https://github.com/pacocoursey/next-themes#with-pages

Using the pages router you can implement the ThemeProvider API and I did just that in our application. According to the documentation this allows us to add dark mode support. But I thought of this as odd since Nextra documentation doesn't include this in their CSS Documentation.

By implementing the following alongside the CSS already provided, the behavior of the website changed.

Now the behavior has flipped. where now our style sheet supports dark theme, but nextra theme doesn't. It doesn't even seem to be loading the Nextra theme. Though, to be honest I think this is expected behavior.

Looking at Nextra Documentation again

https://nextra.site/docs/docs-theme/theme-configuration#dark-mode-and-themes nextThemes seems to take in an object that stores the configuration of Nextra's ThemeProvider as suggested by the link accompanying it. Though, I'm don't think we can use that to fix the theme.

Without CSS Variables

I also tried tried doing it without CSS variables, but that didn't work either. https://github.com/pacocoursey/next-themes#without-css-variables

[caffeine-addictt]

Hmm, not sure if this still applies, I found this issue.

At this point, I think it may be better to go HTMX or non-nextra 😅