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 ?