> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velt.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Comments Sidebar Button Wireframes
> Wireframe components for building custom Comments Sidebar Button interfaces with maximum flexibility.
We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
## VeltSidebarButtonWireframe
```jsx theme={null}
```
```html theme={null}
```
### Icon
```jsx theme={null}
```
```html theme={null}
```
### CommentsCount
```jsx theme={null}
```
```html theme={null}
```
### UnreadIcon
```jsx theme={null}
```
```html theme={null}
```
## Styling
### Disable ShadowDOM
* By default, ShadowDOM 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`
### Example
```jsx theme={null}
{/* If you use floating mode, you can turn off the shadow dom for the sidebar using this: */}
```
### Example
```html theme={null}
```
### Dark Mode
By default, all components are in Light Mode, but there are several properties and methods to enable Dark Mode.
`Default: false`
To enable Dark Mode for sidebar button:
### Example
```js theme={null}
```
### API methods
```jsx theme={null}
const commentElement = client.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();
```
### Example
```js theme={null}
```
### API methods
```jsx theme={null}
const commentElement = Velt.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();
```