> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Single Editor Mode
> Wireframes for the Single Editor Mode Panel.
We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
## VeltSingleEditorModePanelWireframe
```jsx theme={null}
{/* Editor sees this button when they try to edit in a different tab */}
{/* Editor sees these buttons when Viewer requests access */}
{/* Viewer sees this button by default */}
{/* Viewer sees this button when they have already requested access */}
```
```html theme={null}
```
### ViewerText
```jsx theme={null}
```
```html theme={null}
```
### EditorText
```jsx theme={null}
```
```html theme={null}
```
### Countdown
```jsx theme={null}
```
```html theme={null}
```
### EditHere
```jsx theme={null}
```
```html theme={null}
```
### AcceptRequest
```jsx theme={null}
```
```html theme={null}
```
### RejectRequest
```jsx theme={null}
```
```html theme={null}
```
### RequestAccess
```jsx theme={null}
```
```html theme={null}
```
### CancelRequest
```jsx theme={null}
```
```html theme={null}
```
## Styling
### Disable ShadowDOM
* By default, Shadow DOM is used to ensure that your app's CSS does not interfere with the styling of the SDK components.
* Disable the shadow dom to apply your custom CSS to the component.
Default: `true`
```jsx theme={null}
```
```html theme={null}
```
### Dark Mode
By default, all components are in Light Mode. Use this prop to enable Dark Mode.
Default: `false`
```js theme={null}
```
```html theme={null}
```
### Variants
You can apply variants like you do for other components. You need to define variants using Wireframes. Read more here [here](/ui-customization/layout#create-custom-variants).
```js theme={null}
```
```html theme={null}
```