Dark Mode #69

pspeter3 · 2020-09-11T16:21:52Z

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

pspeter3 · 2020-09-13T17:58:14Z

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 · 2020-09-14T18:29:51Z

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 · 2020-09-14T18:38:50Z

@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 · 2020-09-14T19:23:23Z

@stefanzweifel awesome, thank you!

pspeter3 · 2020-09-15T18:53:41Z

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 · 2020-09-15T18:54:26Z

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 · 2020-10-29T11:39:28Z

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 · 2020-10-31T23:19:35Z

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 · 2020-11-25T04:05:15Z

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 · 2020-12-03T03:35:37Z

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 · 2020-12-04T04:46:20Z

@vinayakkulkarni @jhull You forgot to enable the variant:

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

MatthewCaseres · 2020-12-15T13:45:16Z

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 · 2020-12-30T02:55:01Z

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

jacobdalamb · 2020-12-30T16:53:15Z

@benji014628 well with TailwindCSS 2.0 you need to do that

MildTomato · 2020-12-31T04:53:53Z

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

adamwathan · 2020-12-31T12:32:06Z

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:

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

kripod · 2020-12-31T13:41:02Z

@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 · 2020-12-31T15:39:21Z

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 · 2020-12-31T21:53:06Z

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 · 2021-02-11T02:15:59Z

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:

Enable dark mode in Tailwind, documented here: https://tailwindcss.com/docs/dark-mode

Add a "light" text modifier for the plugin, documented here: https://github.com/tailwindlabs/tailwindcss-typography#adding-new-modifiers

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 · 2021-02-12T09:12:58Z

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.

Add it to the README so people do not need to find tailwindlabs#69

pspeter3 · 2021-02-12T22:24:13Z

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

jjranalli · 2021-02-16T16:00:44Z

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 · 2021-04-15T17:14:02Z

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

References: - https://tailwindcss.com/docs/dark-mode - tailwindlabs/tailwindcss-typography#69 (comment) - https://stefanzweifel.io/posts/2020/07/20/add-dark-mode-support-to-at-tailwindcsstypography/

@adamwathan

Use Tailwind 2.0's ability to use class-based dark mode. The dark-mode switch comes from: - https://github.com/donavon/use-dark-mode - https://github.com/wKovacs64/gatsby-plugin-use-dark-mode - https://github.com/JoseRFelix/react-toggle-dark-mode To extend tailwind-typography, use the CSS @adamwathan shared in [this comment](tailwindlabs/tailwindcss-typography#69 (comment)).

@adamwathan

Use Tailwind 2.0's ability to use class-based dark mode. The dark-mode switch comes from: - https://github.com/donavon/use-dark-mode - https://github.com/wKovacs64/gatsby-plugin-use-dark-mode - https://github.com/JoseRFelix/react-toggle-dark-mode To extend tailwind-typography, use the CSS @adamwathan shared in [this comment](tailwindlabs/tailwindcss-typography#69 (comment)).

vidhanio · 2021-12-10T18:40:04Z

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

pspeter3 · 2021-12-10T18:42:39Z

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

vidhanio · 2021-12-10T19:43:21Z

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

adamwathan · 2021-12-20T20:12:21Z

Gonna close this I guess 😅 Enjoy!

beeman · 2021-12-20T20:59:13Z

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 · 2022-01-08T08:25:22Z

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

rjitsu · 2022-01-15T08:23:27Z

+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 · 2022-01-15T10:34:18Z

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

#233

kripod mentioned this issue Dec 31, 2020

Add light modifier for dark mode #122

Closed

mmolinari mentioned this issue Jan 9, 2021

Update formatting of terms and privacy policy mmolinari/oggiposso#6

Open

vinayakkulkarni mentioned this issue Jan 11, 2021

docs: update nuxt 2.15 & tailwindcss 2.x with typography & dark-mode example nuxt-modules/tailwindcss#243

Closed

4 tasks

edjw mentioned this issue Jan 25, 2021

dark mode edjw/edjw-old-blog#173

Open

adamwathan mentioned this issue Feb 5, 2021

[feature] dark mode support #136

Closed

pspeter3 added a commit to pspeter3/tailwindcss-typography that referenced this issue Feb 12, 2021

Add Dark Mode documentation

934757e

Add it to the README so people do not need to find tailwindlabs#69

pspeter3 mentioned this issue Feb 12, 2021

Add Dark Mode documentation #141

Closed

DoctorDerek mentioned this issue Mar 15, 2021

Update README.md -- specify typography: "responsive" as default variant #153

Closed

jlarmstrongiv mentioned this issue Mar 23, 2021

Plugins jlarmstrongiv/gatsby-tailwindcss-template#6

Open

tmattio mentioned this issue Jul 28, 2021

Support documentation dark mode ocaml/ocaml.org#31

Closed

awaitlink mentioned this issue Sep 2, 2021

Dark mode awaitlink/readlogs#8

Open

2 tasks

tmr08c mentioned this issue Sep 5, 2021

(site) Add dark mode style tmr08c/tmr08c.github.io#258

Merged

adamwathan closed this as completed Dec 20, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dark Mode #69

Dark Mode #69

pspeter3 commented Sep 11, 2020

pspeter3 commented Sep 13, 2020

dkast commented Sep 14, 2020

stefanzweifel commented Sep 14, 2020

dkast commented Sep 14, 2020

pspeter3 commented Sep 15, 2020 •

edited

Loading

pspeter3 commented Sep 15, 2020

vinayakkulkarni commented Oct 29, 2020

jhull commented Oct 31, 2020

jacobdalamb commented Nov 25, 2020 •

edited

Loading

chiefpansancolt commented Dec 3, 2020

Apostolique commented Dec 4, 2020

MatthewCaseres commented Dec 15, 2020

Bilal-io commented Dec 30, 2020 •

edited

Loading

jacobdalamb commented Dec 30, 2020

MildTomato commented Dec 31, 2020

adamwathan commented Dec 31, 2020 •

edited

Loading

kripod commented Dec 31, 2020 •

edited

Loading

MildTomato commented Dec 31, 2020

Bilal-io commented Dec 31, 2020

10thfloor commented Feb 11, 2021 •

edited

Loading

gildesmarais commented Feb 12, 2021

pspeter3 commented Feb 12, 2021

jjranalli commented Feb 16, 2021

vesper8 commented Apr 15, 2021

vidhanio commented Dec 10, 2021

pspeter3 commented Dec 10, 2021

vidhanio commented Dec 10, 2021

adamwathan commented Dec 20, 2021

beeman commented Dec 20, 2021

danjac commented Jan 8, 2022 •

edited

Loading

rjitsu commented Jan 15, 2022

danjac commented Jan 15, 2022

Dark Mode #69

Dark Mode #69

Comments

pspeter3 commented Sep 11, 2020

pspeter3 commented Sep 13, 2020

dkast commented Sep 14, 2020

stefanzweifel commented Sep 14, 2020

dkast commented Sep 14, 2020

pspeter3 commented Sep 15, 2020 • edited Loading

pspeter3 commented Sep 15, 2020

vinayakkulkarni commented Oct 29, 2020

jhull commented Oct 31, 2020

jacobdalamb commented Nov 25, 2020 • edited Loading

chiefpansancolt commented Dec 3, 2020

Apostolique commented Dec 4, 2020

MatthewCaseres commented Dec 15, 2020

Bilal-io commented Dec 30, 2020 • edited Loading

jacobdalamb commented Dec 30, 2020

MildTomato commented Dec 31, 2020

adamwathan commented Dec 31, 2020 • edited Loading

kripod commented Dec 31, 2020 • edited Loading

MildTomato commented Dec 31, 2020

Bilal-io commented Dec 31, 2020

10thfloor commented Feb 11, 2021 • edited Loading

gildesmarais commented Feb 12, 2021

pspeter3 commented Feb 12, 2021

jjranalli commented Feb 16, 2021

vesper8 commented Apr 15, 2021

vidhanio commented Dec 10, 2021

pspeter3 commented Dec 10, 2021

vidhanio commented Dec 10, 2021

adamwathan commented Dec 20, 2021

beeman commented Dec 20, 2021

danjac commented Jan 8, 2022 • edited Loading

rjitsu commented Jan 15, 2022

danjac commented Jan 15, 2022

pspeter3 commented Sep 15, 2020 •

edited

Loading

jacobdalamb commented Nov 25, 2020 •

edited

Loading

Bilal-io commented Dec 30, 2020 •

edited

Loading

adamwathan commented Dec 31, 2020 •

edited

Loading

kripod commented Dec 31, 2020 •

edited

Loading

10thfloor commented Feb 11, 2021 •

edited

Loading

danjac commented Jan 8, 2022 •

edited

Loading