Shadows in dark mode

[pahhh-blo]

I propose adding native support for inverted shadows to be used in dark mode.

module.exports = {
  darkMode: 'media',
  theme: {
    extend: {
      boxShadow: {
        // One example using shadow-lg -> shadow-lg-invert
        'lg-invert': '0 10px 15px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -2px rgba(255, 255, 255, 0.05)',
      },
    },
  },
  variants: {
    // Control the shadows on dark mode to invert colors
    boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus', 'dark'],
  },
}

In this way there would be a shadow-{breakpoint}-invert for every shadow-{breakpoint}.

You can see an example here: https://play.tailwindcss.com/AICHZBqsTz

Relevant docs.

[mchccn]

this is more like a glow tbh, so maybe tailwind should add glows C:

[nonissue]

I just don't ever really think that light drop shadows look good on dark backgrounds. A shadow is invariably an object 'creating' an area with less light than its surroundings, and so fundamentally it doesn't make sense for an object to cast a shadow that is lighter than the rest of the scene.

I played around a bit with the vercel design system, and this is the closest I could get to something that appeals visually:

[royvanv]

What about custom colors (see #1463)?

[Ransomware0]

You need config the follow files:

tailwind.config.js

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

theme: {
    boxShadow: {
      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
      DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
      '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
      inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
      + dark: '0 10px 15px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -2px rgba(255, 255, 255, 0.05)',
      none: 'none',
    },
}

And in your class:

className="shadow-lg dark:shadow-dark"

Grettings.

[thijssmudde]

I need something like "dark:focus:shadow-darkGray", how'd that work?

[moishinetzer]

Any interest / updates on this?

[seanwmitchell]

Isn't it covered with coloured drop shadows in v3?

[ivan-kleshnin]

"coloured drop shadows"

Coloured drop shadows are not supported AFAIK. Only box shadows get colors with TW classes.

[royvanv]

This is possible with v3:
https://tailwindcss.com/docs/box-shadow-color

[Ransomware0]

@fullhdpixel try

tailwind.config.js

theme: {
    extend: {
      colors: {
        'yourcolorname': {
          '50': '#FFEFB8',
          '100': '#FFEAA3',
          '200': '#FFE17A',
          '300': '#FFD852',
          '400': '#FFCF29',
          '500': '#FFC600',
          '600': '#C79A00',
          '700': '#8F6F00',
          '800': '#574300',
          '900': '#1F1800
         },
      },
    },
  },

ClassName:

dark:focus:bg-yourcolorname-500

Or you can try:

tailwind.config.js

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

ClassName:

dark:focus:shadow-lg

and you can customize the shadow with:

 boxShadow: {
      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
      DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
      '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
      inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
      + dark: '0 10px 15px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -2px rgba(255, 255, 255, 0.05)',
      + your-custom-shadow: indications. 
      none: 'none',
    },

Greetings. 🇲🇽

[royvanv]

Defining variants is not required in JIT mode.

[ismailarilik]

I just don't ever really think that light drop shadows look good on dark backgrounds. A shadow is invariably an object 'creating' an area with less light than its surroundings, and so fundamentally it doesn't make sense for an object to cast a shadow that is lighter than the rest of the scene.

I played around a bit with the vercel design system, and this is the closest I could get to something that appeals visually:

Light shadows can actually look cool: