Default Dark Mode

[rajansagarwal]

tried using next-themes and ThemeProvider to make add default dark mode, but it wouldn't work. what i noticed is that i can only customize the body with css/scss (the stuff within the page and on the mdx files), rather than the entire page.

could someone please guide me on how to implement this?

[geekplux]

hi @itsrajan , which theme, doc or blog

[rajansagarwal]

hi @itsrajan , which theme, doc or blog

Docs theme :)

[hmmhmmhm]

You can temporarily set the default theme by inserting the code below into the head element of theme.config.js.

<script
  lang="javascript"
  dangerouslySetInnerHTML={{
    __html: `if (!window.localStorage.getItem("theme_default")) {
      window.localStorage.setItem("theme", "dark");
      window.localStorage.setItem("theme_default", "dark");
      document.documentElement.classList.add("dark");
      document.documentElement.classList.remove("light");
    }`,
  }}
/>;

[wottpal]

would be cool to have this as a config option though! @shuding

[shuding]

https://nextra.site/docs/docs-theme/theme-configuration#dark-mode-and-themes

You can pass

nextThemes: {
  defaultTheme: 'dark'
}

[adesai1000]

where can I pass this? for reference I'm trying to do it to this template template

[Pathsis]

You can temporarily set the default theme by inserting the code below into the head element of theme.config.js.

<script
  lang="javascript"
  dangerouslySetInnerHTML={{
    __html: `if (!window.localStorage.getItem("theme_default")) {
      window.localStorage.setItem("theme", "dark");
      window.localStorage.setItem("theme_default", "dark");
      document.documentElement.classList.add("dark");
      document.documentElement.classList.remove("light");
    }`,
  }}
/>;

This is a disaster, since I ran this code, all my next.js programs for local debugging, are in dark mode! Can you tell me how to clear this effect? Much appreciated.

[nurwah1d]

https://nextra.site/docs/docs-theme/theme-configuration#dark-mode-and-themes

You can pass

nextThemes: {
  defaultTheme: 'dark'
}

This exactly work!

[imonish8]

This is theme.config.js | Where to put it ?

const YEAR = new Date().getFullYear()

export default {

  footer: (
    <small style={{ display: 'block', marginTop: '8rem' }}>
      <time>{YEAR}</time> © Monish Nule 
      <a href="#"_blank">Source</a>
      <style jsx>{`
        a {
          float: right;
        }
        @media screen and (max-width: 480px) {
          article {
            padding-top: 2rem;
            padding-bottom: 4rem;
          }
        }
      `}</style>
       
    </small>
  )

[Pathsis]

It's just a crappy program, what's there to waste time on it?

This is theme.config.js | Where to put it ?

const YEAR = new Date().getFullYear()

export default {

  footer: (
    <small style={{ display: 'block', marginTop: '8rem' }}>
      <time>{YEAR}</time> © Monish Nule 
      <a href="#"_blank">Source</a>
      <style jsx>{`
        a {
          float: right;
        }
        @media screen and (max-width: 480px) {
          article {
            padding-top: 2rem;
            padding-bottom: 4rem;
          }
        }
      `}</style>
       
    </small>
  )

It's just a crappy program, what's there to waste time on it?

[imonish8]

It's just a crappy program, what's there to waste time on it?

This is theme.config.js | Where to put it ?

const YEAR = new Date().getFullYear()

export default {

  footer: (
    <small style={{ display: 'block', marginTop: '8rem' }}>
      <time>{YEAR}</time> © Monish Nule 
      <a href="#"_blank">Source</a>
      <style jsx>{`
        a {
          float: right;
        }
        @media screen and (max-width: 480px) {
          article {
            padding-top: 2rem;
            padding-bottom: 4rem;
          }
        }
      `}</style>
       
    </small>
  )

It's just a crappy program, what's there to waste time on it?

where should I place the dark mode code from Nextra? I want to add a toggle in there for dark mode.