Hex and RGBA values cause one theme not to work

[RokiFoki]

When tailwindcss-theme-swapper gets HEX value for dark theme, and rgba for light theme, dark theme will not work.

For example, with the following tailwindPreset:

import themeSwapper from 'tailwindcss-theme-swapper';
...
plugins: [
themeSwapper({
  themes: [
    {
      name: 'base',
      selectors: ['.light-theme'],
      theme: {
        backgroundColor: {

          'ds-menu': '#ff0000',
        },
      },
      default: true,
    },
    {
      name: 'dark',
      selectors: ['.dark-theme'],
      theme: {
        backgroundColor: {
          'ds-menu': 'rgba(255,255,1,1)',
        },
      },
    },
  ],
})],

This will generate following CSS Custom Properties

.light-theme {
  --background-color-ds-menu: 255 0 0
}

.dark-theme {
  --background-color-ds-menu: rgba(255,255,1,1)
}

and this class

.bg-ds-menu {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--background-color-ds-menu) / var(--tw-bg-opacity))
}

rgb(rgba(...)) is not valid syntax, therefore the dark theme would not work as expected - it would have rgb(0,0,0) value instead of rgba(255,255,1,1).

[crswll]

I can adjust it to work with colors that have alpha values but it would need to disregard the alpha value (which may be confusing when using a color without an alpha value of 1).

I'd have to do this because of the opacity modifiers Tailwind CSS offers like: bg-ds-menu/50 and bg-ds-menu bg-opacity-50 and the only way to currently do this widely is with a custom property (though my next version may use color-mix() since the support for it is looking great as well).

You can fix your issue using rgb(255,255,1) instead of rgba(255,255,1,1) for now, though.

[crswll]

Let me know if you need anymore help here!

[RokiFoki]

Thanks for the quick prompt and for implementing the very useful utility.

We've decided to cast all colors to rgba before passing it to the theme sweeper.
In an ideal world, the theme sweeper would detect it and cast rgb into rgba rather than the other way around.

[crswll]

I updated it to just ignore the opacity value on colors in #45.