Dark mode on printers

[dario-baumberger]

We have an application that has a light mode and a dark mode. We need to be able to print some pages. If dark mode is active, this means that the page is printed in dark mode. I assume that nobody wants this - after all, we all put white paper in the printer. :)

Here is a code example with a simple HTML file and a simple tailwind setup: https://stackblitz.com/~/github.com/dario-baumberger/taiwlindcss-dark-mode-print-dialog

• npm i
• npm run tw
• npm run serve

In the printer preview there is the setting whether "background graphics" should be printed. It works in the code example. The switch button removes the background and adjusts the font colour. This is basically okay, but we should be able to define the behaviour more precisely.

We could set the colours explicitly for light: dark: and print:, that should work. However, light: and print: would always be exactly the same.

We have tried various things. The desired output should look like this:

@media not print {
.dark .dark\:border-green-500 {
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity));
  }
...
}

Unfortunately, we didn't manage to do this...

For this to work with the dark class `darkMode: "false"? in tailwind.config.js,
must be set. Otherwise all addVariant('dark', '...') which have dark as variantName will not work.

---

With addVariant("dark", ".dark &"); the result is roughly the same as if darkMode: 'class' is set, simply without is().

.dark .dark\:border-green-500 { --tw-border-opacity: 1; border-color: rgb(34 197 94 / var(--tw-border-opacity)); }

---

In the documentation there is an example with @media https://tailwindcss.com/docs/plugins#static-variants

None of this worked:

---

tailwind.config.js:

 addVariant('dark', '@media not print .dark &')

Result:

@media not print .dark & {
  .dark\:border-green-500 {
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity));
  }
...}

no valid css or results

---

tailwind.config.js:

addVariant('dark', '@media not print .dark');

Result:

@media not print .dark {
  .dark\:border-green-500 {
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity));
  }
...
}

no valid css or results

---

In the v2.2.16 documentation there are further examples of how to extend flexibly:
https://v2.tailwindcss.com/docs/plugins#complex-variants

That didn't work either:

---

tailwind.config.js:

addVariant("dark", ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `@media not print {.dark .${e(
            dark${separator}${className}
          )}}`;
        });
      });

Result:

@media not print {.dark .dark\:border-green-500} {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity));
}

no valid css or results

---

Is there a way to solve this? I haven't found anything in the documentation. I have looked at the code, but have not found a solution either?

[fordaaron]

To get your desired output, you can update your addVariant to

addVariant('dark', '@media not print { .dark & }')

This will output css of

@media not print {
  .dark .dark\:border-green-500{
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity))
  
  /* ... */
}

Additionally, using darkMode: null, instead of darkMode: 'false', will resolve the ts error.

Example: https://play.tailwindcss.com/ARHjiqGpf5?file=config

---

If you want to have the same css output as v3.4.0 of tailwind, but within the @media not print {...}, you could do

addVariant('dark', '@media not print { :is(:where(.dark) &) }')

This will output css of

@media not print {
  :is(:where(.dark) .dark\:border-green-500){
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity))
  
  /* ... */
}

Example: https://play.tailwindcss.com/M8YQLdVeki?file=config

[dario-baumberger]

Thank you very much, works perfectly!

[justingolden21]

Not working for me.

Light mode print:

Dark mode print:

Only differences are I'm using dark: in front of my tailwind classes.

plugins: [
		plugin(function ({ addVariant }) {
			addVariant('dark', '@media not print { .dark & }');
		})
	]

in tailwind.config.cjs

In case it's relevant:

	safelist: ['dark'],
	darkMode: 'class',

[dario-baumberger]

In my case I had to disable the default darkMode behaviour of tailwind with darkMode: null.

darkMode: null

otherwise, taiwlind modifies/overwrites all generated dark: classes with its default behaviour.

Or try this: #11534 (reply in thread)

[justingolden21]

Oh wow, thanks! I'm surprised darkMode: null both makes print work and also still works for seemingly the rest of the UI, even though dark mode is controlled by class in my app...

Thanks again!

[yardensachs]

How does this trick work for Tailwind 4?

Is it like this?

@custom-variant dark (&:where(@media not print { .dark, .dark * }));

[alexwass-lr]

This is what I ended up with in v4 @yardensachs

@custom-variant dark {
    @media not print {
        &:where(.dark, .dark *) {
            @slot
        }
    }
}