Dark Mode

[pspeter3]

Given that the typography sets colors for elements, how should those colors change with the new experimental dark mode?

[pspeter3]

I followed @stefanzweifel's article https://stefanzweifel.io/posts/2020/07/20/add-dark-mode-support-to-at-tailwindcsstypography/. Instead of adding a dark as a theme, you need to add dark as a variant for the typography plugin.

[dkast]

Hi, @pspeter3 do you think you could share your dark variant config of your tailwind.config.js? I'm kinda lost with this, an example would be very helpful. Thanks!

[stefanzweifel]

@dkast Author of that blog post here. Here's an example tailwind.config.js where you configure both light and dark version of the typography plugin.

Light settings go to default.
Dark settings go to dark.

module.exports = {
    theme: {

        typography: (theme) => ({
            default: {
                css: {
                    color: theme('colors.gray.900'),

                    a: {
                        color: theme('colors.blue.500'),
                        '&:hover': {
                            color: theme('colors.blue.700'),
                        },
                    },
                },
            },

            dark: {
                css: {
                    color: theme('colors.gray.100'),

                    a: {
                        color: theme('colors.blue.100'),
                        '&:hover': {
                            color: theme('colors.blue.100'),
                        },
                    },
                },
            },
        }),

    },

    plugins: [
        require('@tailwindcss/typography')({
            modifiers: [],
        }),
    ]
}

[dkast]

@stefanzweifel awesome, thank you!

[pspeter3]

I think as an extension, if you want to use the experimental darkModeVariant, you likely want to add the following to your config:

{
  // ...rest of config
  variants: {
    typography: ["responsive", "dark"]
  }
}

[pspeter3]

I am curious though what the Tailwind team thinks the right colors for text should be in dark mode. I suspect it will depend on the new color palette as well.

[vinayakkulkarni]

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  experimental: {
    darkModeVariant: true,
  },
  dark: 'class',
  future: {
    defaultLineHeights: true,
    standardFontWeights: true,
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  theme: {
    extend: {
      colors: {
        twitter: '#1DA1F2',
        linkedIn: '#2867B2',
        github: '#333333',
        ...defaultTheme.colors,
      },
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
    typography: (theme) => ({
      dark: {
        css: {
          color: theme('colors.gray.100'),
          a: {
            color: theme('colors.blue.100'),
            '&:hover': {
              color: theme('colors.blue.100'),
            },
          },
        },
      },
    }),
  },
  plugins: [
    require('@tailwindcss/ui'),
    require('@tailwindcss/custom-forms'),
    require('@tailwindcss/typography')({
      modifiers: [],
    }),
  ],
};

      <article
        class="prose dark:prose-dark dark:text-gray-100"
      >
	  ...
	  </article>

Unfortunately, this doesn't seem to work!

I'm using color-mode nuxt module ( https://color-mode.nuxtjs.org/#tailwind-v18 )

[jhull]

Same problem here.

    typography: (theme) => ({
      default: {
        css: {
          color: theme('colors.gray-500')
        },
      }

is changing colors in light mode nicely (if I change above value), but under dark key nothing is changed (with prose dark:prose-dark as shown above).

Same setup with nuxt and color-mode module.

[jacobdalamb]

okay valid but this is a feature request and a workaround would be

'@media (prefers-color-scheme: dark)': {
              h1: {
                color: '#d4d4d8',
              },
              h2: {
                color: '#d4d4d8',
              },
              a: {
                color: '#d4d4d8',
              },
              color: '#d4d4d8',
            },

[chiefpansancolt]

Since the dark mode is now GA in 2.0 typography with prose should have a module apart that is configurable and documented on the usage of dark mode with it.

[Apostolique]

@vinayakkulkarni @jhull You forgot to enable the variant:

  variants: {
    extend: {
      typography: ['dark']
    }
  },

[MatthewCaseres]

agree that there should be documentation on the subject. I found a good config for 2.0 at the bottom of this closed issue: #94

[Bilal-io]

@benji014628 seems like extending typography works when you do DEFAULT uppercase.
I am still trying to understand how to extend dark mode.

[jacobdalamb]

@benji014628 well with TailwindCSS 2.0 you need to do that

[MildTomato]

Also came here wondering if tailwind2.0 dark mode support was officially supported with this plugin ?

[adamwathan]

Haven't added it by default but it's 100% possible to add with all of the existing options in Tailwind + the plugin. Here's a quick 5 minute version:

https://play.tailwindcss.com/xTOjz3kR3m?file=config

The steps to do this were:

1. Enable dark mode in Tailwind, documented here: https://tailwindcss.com/docs/dark-mode
2. Add a "light" text modifier for the plugin, documented here: https://github.com/tailwindlabs/tailwindcss-typography#adding-new-modifiers
3. Enable the "dark" variant for the typography plugin, documented here: https://tailwindcss.com/docs/dark-mode#enabling-for-other-utilities

[kripod]

@adamwathan Thank you for providing clear instructions about how it should be done. Based on that, I’ve just opened #122 to address this issue for everyone.

[MildTomato]

I have a feeling it wasn't working for me because i didn't have the following imports in CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

I was hoping to use this only importing the css classes required for typography.

[Bilal-io]

I got it to work.
Here is a working solution https://github.com/Bilal-io/bilalkhoukhi.com
prose and dark:prose-dark are applied in the post-layout.tsx
Theme switcher is in the header.tsx

[10thfloor]

Haven't added it by default but it's 100% possible to add with all of the existing options in Tailwind + the plugin. Here's a quick 5 minute version:

https://play.tailwindcss.com/xTOjz3kR3m?file=config

The steps to do this were:

1. Enable dark mode in Tailwind, documented here: https://tailwindcss.com/docs/dark-mode
2. Add a "light" text modifier for the plugin, documented here: https://github.com/tailwindlabs/tailwindcss-typography#adding-new-modifiers
3. Enable the "dark" variant for the typography plugin, documented here: https://tailwindcss.com/docs/dark-mode#enabling-for-other-utilities

Thank you for all you do. I nearly quit my job and moved into the forest after trying to figure this out. 😅

[gildesmarais]

Haven't added it by default but it's 100% possible to add with all of the existing options in Tailwind + the plugin. Here's a quick 5 minute version:

[...]

Thank you for the step by step instructions. I feel these steps should be mentioned in README instead of being tucked away in a comment inside this issue. Tailwind lists "dark mode" as core concept and thus the typography plugin should make that core concept easy to adapt.

[pspeter3]

I added a quick PR for the documentation in case that's helpful @adamwathan

[jjranalli]

Just wanted to let everyone know that you can also use Nightwind to easily manage the dark mode in Typography.

You can define every single color, or just let it automatically generate a dark mode for you (which should be fine in most cases).

Relevant section of the docs

[vesper8]

I've been using the solution proposed by Adam above and it seems to work very well, but today I opened the website in Facebook's embedded browser and the colours were quite wrong. It looks good in every other browser I've tried

[vidhanio]

How would this work in terms of the new Tailwind 3.0?

[pspeter3]

Per #216, I think you use dark:prose-invert?

[vidhanio]

Wow, completely missed that. That cut my className length by at least 200 characters 😄, thanks a ton!

[adamwathan]

Gonna close this I guess 😅 Enjoy!

[beeman]

Thanks @adamwathan and the rest of the team! 🎉

There's even a video on how to use it!

https://www.youtube.com/watch?v=GEYkwfYytAM

[danjac]

I don't think the dark:prose-invert solution works with the tailwindcss/typography version currently bundled with latest Tailwind standalone.

[rjitsu]

+1 on that.

I don't think the dark:prose-invert solution works with the tailwindcss/typography version currently bundled with latest Tailwind standalone.

[danjac]

I've made a separate bug report for the standalone issue:

#233