javierm42 / tailwind-mode-aware-colors Goto Github PK

I really want to use this with my nativewind project. However not sure if it works or not. It just seems to default to light and doesn't switch mode when the appearance changes.

Tailwind recommends using selector over class: https://tailwindcss.com/docs/dark-mode#supporting-system-preference-and-manual-selection

From what I can tell, selector is basically class that falls back to media when the selector isn't present.

Types reference: https://github.com/tailwindlabs/tailwindcss/blob/d86fd0bb5b69c9aa5c75d4e78f8fe78969d6ff50/types/config.d.ts#L69-L83

The plugin currently only supports theme.colors and extend.theme.colors, but it would be very useful to also have:

• theme.textColor and extend.theme.textColor
• theme.backgroundColor and extend.theme.backgroundColor
• theme.borderColor and extend.theme.borderColor
• theme.outlineColor and extend.theme.outlineColor

Why? So I can use text-primary instead of text-text-primary in my classnames, or bg-surface instead of bg-background-surface. It helps simplify the naming scheme when working with existing design systems. Thanks!

Hi there,

I found a problem with Tailwinds media dark mode strategy. Whenever I try to use darkMode: 'media' together with the tailwind-mode-aware-colors plugin, it outputs a malformed css for the dark mode colors. It isn't wrapping the color vars in the html { } selector. This only happens for the media dark mode strategy, while the class strategy is working. I'm using Vite as asset bundler.

My tailwind.config.js looks like this:

const colors = require('./resources/tailwind/colors');

/** @type {import('tailwindcss').Config} */
module.exports = require('tailwind-mode-aware-colors')({
    theme: {
         colors: {
            'primary': {
                light: colors.primary['40'],
                dark: colors.primary['80'],
            },
            'on-primary': {
                light: colors.primary['100'],
                dark: colors.primary['20']
            }
            ...
        }
    }
});

The colors in the array:

module.exports = {
    primary: {
        100: '#ffffff',
        99: '#fffbff',
        98: '#fff8f3',
        95: '#ffeeda',
        ...
    },
    ...
}

And the generated css looks like this:

html {
    --color-primary: 127 86 0;
    --color-on-primary: 255 255 255;
    ...
}

@media (prefers-color-scheme: dark) {
    --color-primary: 252 187 74;
    --color-on-primary: 67 44 0;
    ...
    {}
}

While the expected css would look like this:

html {
    --color-primary: 127 86 0;
    --color-on-primary: 255 255 255;
    ...
}

@media (prefers-color-scheme: dark) {
    html {
        --color-primary: 252 187 74;
        --color-on-primary: 67 44 0;
        ...
    }
}

Defining theme.colors as a function generates an empty config.colors value ({}):

const config = {
  theme: {
    colors: ({ colors }) => ({
      black: colors.black,
      white: colors.white,
      primary: {
        light: '#bbffa3',
        dark: '#144b00'
      },
    }),
  },
};

A workaround is to import the default colors instead:

const colors = require('tailwindcss/colors')

const config = {
  theme: {
    colors: {
      black: colors.black,
      white: colors.white,
      primary: {
        light: '#bbffa3',
        dark: '#144b00'
      },
    },
  },
};