OpenSumi has built-in some basic components, which can be imported and used through the sumi-browser module when the browser-side plug-in is running.

The current built-in components include:

├── Badge
├── Button
├── Checkbox
├── Dialog
├── Icon
├── Input
├── Message
├── Notification
├── Overlay
├── Popover
├── RecycleList
├── BasicRecycleTree
├── Scrollbars
├── Select
├── Tabs
├── Tooltip

For some usage examples, see: Use Built-in Components.

Other component libraries

You can also continue to use the popular AntD component library in the community in OpenSumi, and you only need to import the theme package we provide to use it normally.

• opensumi/antd-theme - AntD theme package based on OpenSumi

The usage is as follows:

import '@opensumi/antd-theme/lib/index.css';
import { ConfigProvider } from 'antd';

// ...
return (
  <ConfigProvider prefixCls="sumi_antd">
    <App />
  </ConfigProvider>
);

其他主题库适配期待社区的贡献。

自定义适配主题的组件

For developers who do not meet the above schemes, or expect to write their own CSS styles to adapt to the theme, you can refer to the Token table below to use the corresponding CSS Token, such as Token is kt.disableForeground, you can pass var( --kt-disableForeground) reference.

Most custom tokens are usually backward compatible with Theme Color of VS Code, and you can also use these tokens directly.

If you feel that the definition of this part of the color value table cannot meet your needs, on the one hand, you can consider providing a PR for OpenSumi to expand it, on the other hand, you can also bypass this part of the limitation by processing it on the integration side To solve, two common methods are introduced below:

Style customization by ClassName

Customize through the scope of ClassName, such as:

.vs-dark {
  .a {
    color: #fff; // Dark Theme Model, the text will be white
  }
}

.vs {
  .a {
    color: #000; // Light Theme Model, the text will be black
  }
}

Use the registerColor method to register a custom token

It should be noted here that it is necessary to ensure that the registerColor method is called before the application starts, and it is recommended to introduce it in the renderApp phase.

// The entry file
import './custom-token';
// ...

renderApp({...});

// custom-token.ts
import {
  registerColor,
  ktPrimaryButtonForeground,
  ktPrimaryButtonBackground,
  ktPrimaryButtonClickBackground
} from '@opensumi/ide-theme';
import { localize } from '@opensumi/ide-core-browser';

export const ktToolbarButtonSelectionForeground = registerColor(
  'kt.toolbarButton.selectionForeground',
  {
    dark: ktPrimaryButtonForeground,
    light: ktPrimaryButtonForeground,
    hcDark: null,
    hcLight: null
  },
  localize('Active toolbar button foreground.')
);
export const ktToolbarButtonSelectionBackground = registerColor(
  'kt.toolbarButton.selectionBackground',
  {
    dark: ktPrimaryButtonBackground,
    light: ktPrimaryButtonBackground,
    hcDark: null,
    hcLight: null
  },
  localize('Active toolbar button background.')
);
export const ktToolbarButtonForeground = registerColor(
  'kt.toolbarButton.foreground',
  {
    dark: ktPrimaryButtonForeground,
    light: ktPrimaryButtonForeground,
    hcDark: null,
    hcLight: null
  },
  localize('Default toolbar button foreground.')
);
export const ktToolbarButtonBackground = registerColor(
  'kt.toolbarButton.background',
  {
    dark: ktPrimaryButtonClickBackground,
    light: ktPrimaryButtonClickBackground,
    hcDark: null,
    hcLight: null
  },
  localize('Default toolbar button background.')
);

Use floating components

When writing extensions, we will inevitably use floating windows to allow users to perform secondary interactions. When writing such codes on the OpenSumi Browser side, since the overall solution adopts a sandbox isolation mechanism, the Browser layer in the extension cannot get the top Document, so when using components with floating properties such as Modal, Dialog, Select in some libraries, you need to re-bind a rendering container for such components.

Take the Modal component in AntD as an example, you need to pass in the rendering container of the current component when using it, otherwise the corresponding component will not work properly.

// ...
<Modal title="Basic Modal" getContainer={ref.current}>
  <p>Some contents...</p>
  <p>Some contents...</p>
  <p>Some contents...</p>
</Modal>