Multiple themes with their colorSchemes (dark/light)

[7iomka]

Hi.
I recreated myself approach with theming from react-spectrum
Also, I used tailwind.

So, for this I created UIProvider that receive theme and colorScheme props

import lightVars from 'app/styles/themes/default-theme/default-theme-light.vars.module.scss';
import darkVars from 'app/styles/themes/default-theme/default-theme-dark.vars.module.scss';

<UIProvider
  theme={{ light: lightVars, dark: darkVars, large: {}, medium: {}, global: {} }}
  defaultColorScheme="light"
  colorScheme={colorScheme}
  locale="ru"
>
  <Button type="button" onPress={() => setColorScheme(colorSchemeVariant)}>
    change {colorScheme}
  </Button>

  <UIProvider colorScheme="light">
    <div className="bg-primary"> primary </div>
  </UIProvider>
  <UIProvider colorScheme="dark">
    <div className="bg-primary"> primary </div>
  </UIProvider>
  {children}
</UIProvider>

example of content of css module for one of vars files

// dark colors
.theme-dark {
  // primary
  --primary: #7f6b38;
  --primary-active: #ffe5a1;
  --primary-light: #fff3d4;
  --primary-inverse: #000;
  // secondary
  --secondary: #fe7375;
  --secondary-active: #fc8182;
  --secondary-light: #ffecec;
  --secondary-inverse: #fff;
  // success
  --success: #58dd4d;
  --success-active: #77e06e;
  --success-light: #e5ffe3;
  --success-inverse: #000;
  // danger
  --danger: #fe7375;
  --danger-active: #fc8182;
  --danger-light: #ffecec;
  --danger-inverse: #fff;
}

As result I have

<div class="default-theme-dark_vars_theme-dark__dOXcD" style="color-scheme: dark;" lang="ru" dir="ltr">
  <button class="button_Button__6Eykw button_primary__KnYjr button_md__W4hur button_uppercase__XLVuR button_rounded-full__Tadfr" type="button"><span class="button_ButtonContent__5_eVt c-button__content">change dark</span></button>

  <div class="default-theme-light_vars_theme-light__YfrB6" lang="ru" dir="ltr" style="color-scheme: light;">
    <!-- Uses from child - light color scheme -->
    <div class="bg-primary"> primary </div>
  </div>
  <!-- Uses from root - dark color scheme -->
  <div class="bg-primary"> primary </div>
</div>

Your plugin helps a lot to generate from config r g b variants for all css variabled declared inside config.
But how can you implement this idea with your plugin?
Thanks!

[7iomka]

PS:
I made the colors in the config so that they were immediately links to css variables

colors: ({ colors }) => ({
      ...settings.themeColorKeys.reduce((acc, curr) => {
        return {
          ...acc,
          [curr]: `rgba(var(--${curr}-rgb), <alpha-value>)`,
          [`${curr}-active`]: `rgba(var(--${curr}-active-rgb), <alpha-value>)`,
        };
      }, {}),

well, similarly with all the settings that can be part of the "theme" and "color scheme"

The flow of css variables is something like this

// Simple usage: color: var(--primary);
// For custom opacity values ​​we use -rgb name
// Example: color: rgba(var(--primary-rgb), 0.3);

Now we think in terms of the theming
theme - a set of variables
a theme can have multiple color schemes, usually dark and light.
their variable sets are different.

Now in the context of the application.
We have a set of components written using css variables
and a set of pages where these components are used, with the use of Tailwind (quick layout and blablabla)

There is a section where we demonstrate the behavior of the component (let's say a button)
in the context of themes - theme1, theme2, theme3
with a dark and (next to) light color scheme

To achieve this, a provider was created that accepts css modules with variables as keys

What is the problem?
The problem is the need to create -rgb values ​​in files with variable hands in order for them to be used by Tailwind.

[mertasan]

There is a helper function ( colorVariable('--primary') ) for generating RGB colors.

I want to make sure I understand correctly what you need.

But first, I need to know if you are aware of this function and if it helps.

Is this function not working for you? Want colors to be generated automatically via variables?

https://github.com/mertasan/tailwindcss-variables#colorvariable
https://github.com/mertasan/tailwindcss-variables/blob/master/__tests__/color-variable-helper.test.js
https://github.com/mertasan/tailwindcss-variables/blob/master/src/helpers.js#L21
https://github.com/mertasan/tailwindcss-variables#forcergb
https://github.com/mertasan/tailwindcss-variables#extendcolors-for-colorvariable

https://github.com/supabase/ui/blob/alpha/ui.config.js
https://github.com/supabase/ui/blob/alpha/tailwind.config.js