[Bug]: Incorrect css variable name

[meowcorp]

Telegram Application

Telegram for iOS, Telegram Desktop

Describe the Bug

Hello, im using @tma.js/sdk-react with TelegramUI library and have problems with bg-color variable. tma.js attaching --tg-background-color and --tg-theme-background-color instead of --tg-theme-bg-color (which is described in the telegram documentation). This causes TelegramUI to display the fallback instead of the theme color.

To Reproduce

Steps to reproduce the behavior:

1. Install @tma.js/sdk-react and @tma.js/sdk
2. Check html css variables

Expected Behavior

There must be a --tg-theme-bg-color variable and --tg-theme-secondary-bg-color

[heyqbnk]

Hey! Thank you for the issue.

Unfortunately, Telegram UI and @tma.js/sdk-react were developed by different developers using different SDKs in mind. As a temporary solution, you could disable CSS vars in SDKProvider and bind variables by yourself re-implementing utilities in this folder: https://github.com/Telegram-Mini-Apps/tma.js/tree/master/packages/sdk/src/css

I am currently working at @tma.js/sdk@3.0 which will have these variables renamed and named similar with the Telegram SDK. It will be released in the next 1-2 weeks.

Not closing the issue to let you know, that SDK was released and you should update.

[novikdev]

While we are waiting @tma.js/sdk@3.0 there is a workaround:

:root {
  --tg-theme-bg-color: var(--tg-theme-background-color);
}

[heyqbnk]

Hey. A new major version of SDK was released and your problem should be solved now. I currently have no docs for it and will add it soon.

New CSS variable name must be --tg-theme-bg-color. Additionally, you can generate the CSS variable name by yourself.

Function source code: https://github.com/Telegram-Mini-Apps/tma.js/blob/master/packages/sdk/src/css-vars/bindThemeParamsCSSVars.ts

Example:

import { bindThemeParamsCSSVars } from '@tma.js/sdk';

bindThemeParamsCSSVars(new ThemeParams({}), key => {
  return `--my-prefix-${key}`;
});

As long as there is no such function as init anymore, you have to call bindThemeParamsCSSVars by yourself. In case, you have problems understanding what to do, refer the React template.