Tencent Cloud

Recent Pages

React

Last updated: 2024-11-22 11:55:28

React UIKit provides pre-built light and dark themes. You can pass the theme property to the root <UIKitProvider> component  to switch between these themes. Additionally, you can fully customize the theme colors to match your brand.
﻿
﻿
﻿
Pre-built Theme
React UIKit provides pre-built light theme and dark theme. You can set the theme property to 'light' (the default) or 'dark' in the root <UIKitProvider> component to switch the current color theme.
Tip：
If the theme property is not passed to the <UIKitProvider> component, the UI will default to the light theme.
Dark theme example:
import { UIKitProvider } from '@tencentcloud/uikit-base-component-react';
import '@tencentcloud/chat-uikit-react/dist/esm/index.css';
﻿
export default function App() {
  // language support en-US(default) / zh-CN / ja-JP / ko-KR / zh-TW
  // theme support light(default) / dark
  return (
    <div style={{display: 'flex', height: '100vh'}}>
      <UIKitProvider language='en-US' theme='dark'>
      
      </UIKitProvider>
    </div>   
  );
}
Use useState to manage the theme example：
import { useState } from 'react';
import { UIKitProvider } from '@tencentcloud/uikit-base-component-react';
import '@tencentcloud/chat-uikit-react/dist/esm/index.css';
﻿
export default function App() {
  const [theme, setTheme] = useState('light');
  return (
    <div style={{display: 'flex', height: '100vh'}}>
      <UIKitProvider theme={theme}>
        {/* ... */}
      </UIKitProvider>
    </div>
  );
}
﻿