Tencent Cloud

Recent Pages

React

Last updated: 2024-10-25 11:34:23

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/chat-uikit-react';
import '@tencentcloud/chat-uikit-react/dist/cjs/index.css';
﻿
export default function SampleChat() {
  return (
    <div style={{display: 'flex', height: '100vh'}}>
      <UIKitProvider theme="dark">
        {/* ... */}
      </UIKitProvider>
    </div>
  );
}
Use useState to manage the theme example：
import { useState } from 'react';
import { UIKitProvider } from '@tencentcloud/chat-uikit-react';
import '@tencentcloud/chat-uikit-react/dist/cjs/index.css';
﻿
export default function SampleChat() {
  const [theme, setTheme] = useState('light');
  return (
    <div style={{display: 'flex', height: '100vh'}}>
      <UIKitProvider theme={theme}>
        {/* ... */}
      </UIKitProvider>
    </div>
  );
}