Git Product home page Git Product logo

Comments (2)

CSpencerND avatar CSpencerND commented on June 12, 2024

@sspenst I made a theme called dim and added the following to my global css:

:is(.dim .dark\:prose-invert) {
    --tw-prose-body: var(--tw-prose-invert-body);
    --tw-prose-headings: var(--tw-prose-invert-headings);
    --tw-prose-lead: var(--tw-prose-invert-lead);
    --tw-prose-links: var(--tw-prose-invert-links);
    --tw-prose-bold: var(--tw-prose-invert-bold);
    --tw-prose-counters: var(--tw-prose-invert-counters);
    --tw-prose-bullets: var(--tw-prose-invert-bullets);
    --tw-prose-hr: var(--tw-prose-invert-hr);
    --tw-prose-quotes: var(--tw-prose-invert-quotes);
    --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
    --tw-prose-captions: var(--tw-prose-invert-captions);
    --tw-prose-kbd: var(--tw-prose-invert-kbd);
    --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
    --tw-prose-code: var(--tw-prose-invert-code);
    --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
    --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
    --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
    --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
}

I don't know if that's what you're looking for but it did the job for my use-case.

from next-themes.

sspenst avatar sspenst commented on June 12, 2024

@CSpencerND your comment gave me some inspiration to try this again and I finally got it working. The difficulty for my case is that I want two classes:

  • one for my custom theme (eg theme-modern)
  • one for dark mode

next-themes allows mapping custom themes to different class names, but in my case I need to map each class to multiple class names. I think my implementation could be a lot simpler if this was a feature:

<ThemeProvider
  attribute='class'
  themes={Object.values(Theme)}
  value={{
    [Theme.Modern]: ['dark', 'theme-modern'],
    [Theme.Light]: ['light', 'theme-light'],
    ...
  }}
>

What I ended up doing was creating a new attribute data-theme-dark that I keep track of manually based on the the current theme, and then updated my Tailwind config to have:

  darkMode: [
    'class',
    '[data-theme-dark="true"]',
  ],

I then used the idea from #77 (comment) to update the color-scheme:

[data-theme-dark="true"] {
  color-scheme: dark;
}

Finally, for dark mode to work instantly I had to add the following script:

<script dangerouslySetInnerHTML={{
  __html: `
!function() {
  const theme = localStorage.getItem('theme');

  // set data-theme-dark for Tailwind dark classes
  document.documentElement.setAttribute('data-theme-dark', theme === 'theme-light' ? 'false' : 'true');

  // check for an invalid theme and default to theme-modern
  // ThemeProvider doesn't handle this case with defaultTheme so we have to do it manually here
  if (!${JSON.stringify(Object.values(Theme))}.includes(theme)) {
    localStorage.setItem('theme', 'theme-modern');
  }
}();
  `,
}} />

It would be great if there was a simple way to do this with next-themes, but for now this seems to get the job done.

from next-themes.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.