Dark mode

[antoniobologna]

Great plugin :) is there a chance there will be an future update to include dark mode?

i.e. dark:loading-gray

[christhofer]

Great suggestion!! I'm also a huge fan of dark mode, it's just that my company hasn't got a chance to build a website that requires dark mode.

I'll try to implement it tonight, I'll let you know. ^^

[christhofer]

Hey... Turns out that it is already support dark mode by default. I haven't changed anything.

Check this out https://play.tailwindcss.com/1RyMSjgZqw

I'll update the documentation to include dark mode example.

[antoniobologna]

Hey thanks forthe quick reply @christhofer! I think I still don't see dark mode. I did your approach previously but had no luck. I'm on the latest Tailwind version (2.2.7) and using the following configuration:

module.exports = {
  purge: {
    enabled: true,
    content: [
      'src/**/*.ts',
      'src/**/*.tsx',
      'public/**/*.html',
      './node_modules/tailwindcss-dark-mode/prefers-dark.js',
    ],
  },
  darkMode: 'class',
  theme: {
    skeletonScreen: {
      DEFAULT: {
        baseColor: '#efefef',
        movingColor:
          'linear-gradient(to right, transparent 0%, #eaeaea 50%, transparent 100%)',
        duration: '1s',
        timing: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
      },
      dark: {
        baseColor: colors.gray[800],
        movingColor: `linear-gradient(to right, transparent 0%, ${colors.gray[700]} 50%, transparent 100%)`,
        duration: '1s',
        timing: 'ease',
      },
    },
    extend: {
      ...
    },
  },
  plugins: [
    require('@gradin/tailwindcss-skeleton-screen'),
  ],
};

IDK if setting darkMode = 'media' is doing this. In the meantime, I'm getting the theme preference from the class attribute and then setting the appropriate loading-dark style accordingly without relying on dark:...

[christhofer]

@antoniobologna you can go to the tailwindplay link I gave above, change the tailwind config darkMode to class, and try to toggle the in dark class in the html

If you are using darkMode: 'media', you can see that in action by changing your OS mode to dark. I don't know about other OS, but if you are using windows, you can set it here

[christhofer]

Sorry, I accidentally clicked close.

@antoniobologna I see that you are not using JIT

Without JIT, only color-related class get dark: variants, and because .loading is not a built-in tailwind class, it does not have dark: by default It need to have something like this, but I think the plugin need to add support for this config.

My example above is using mode: 'jit'

[deadcoder0904]

thank you @christhofer i was using react-loading-screen but now i can successfully ditch that as this works the same but has a much better api :)