Built-in Component

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.

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.

BlocksDoc
主题色板主题色板
基础颜色基础颜色
ButtonButton 按钮
CheckboxCheckbox 多选框
InputInput 输入框
SelectSelect 选择器
EditorEditor 编辑器
ActionBarActionBar 操作组
ActivityBarActivityBar 左右侧活动栏
Bottom PanelBottom Panel 底部面板
ExplorerExplorer 资源管理器
KeybindingKeybinding 快捷键页
MenuBarMenuBar 菜单栏
MessageMessage 全局提示
ModalModal 对话框
NotificationNotification 通知提醒框
PopoverPopover 气泡卡片
SCMSCM 源代码管理
SearchSearch 搜索
SettingSetting 设置页
SidebarSidebar 侧边栏面板
StatusBarStatusBar 底部状态栏
TabTab 标签页
ToolBarToolBar 工具栏
TooltipTooltip 文字提示

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>