I can't change the Telegram Mini App Background Color.

[crystal-patronus]

Now I am building a telegram mini app using @telegram-apps/sdk-react library. And I have a problem with telegram mini app background. By default, the background color is white. Now I want to change it to something else(for example, black). I tried to use miniApp api, but it doesn't work. This is the code snippet.

import { useEffect } from 'react';
import { RouterProvider } from 'react-router-dom';
import { initMiniApp, initViewport } from '@telegram-apps/sdk-react';
import { router } from './pages/router';
import { MainLayout } from './components/Layouts';
import ImageProvider, { imagesToPreload } from './providers/ImageProvider';
// import './telegram-web-app.d.ts';

function App() {
  const [miniApp] = initMiniApp();
  const [viewPort] = initViewport();

  useEffect(() => {
    miniApp.ready();
    miniApp.setBgColor('#000000');
    miniApp.setHeaderColor('bg_color');

    viewPort.then((data) => {
      data.expand();
    });
  }, [miniApp]);

  return (
    <MainLayout>
      <ImageProvider images={imagesToPreload}>
        <RouterProvider router={router} />
      </ImageProvider>
    </MainLayout>
  )
}

export default App

Please help me to fix this issue.
Thank you.

[heyqbnk]

Mini Apps 6.9 supports specifying a specific color. Passed color key (bg_color or secondary_bg_color) refers to a theme palette color, not the actual value in the miniApp instance.

miniApp.setHeaderColor('#ffffff');

[luckyman816]

You can change style of mainLayout.