Variables
Tool
snippyly-comment-tool {
--snippyly-comment-tool-active-bg-color: grey;
}
1
Select the Comment Tool component
You can select the Comment Tool component. Our CSS variables are set at the component level.
2
Modify a CSS variable
Set the variable to anything you want. We expose a set of variables so you can customize the component to better match your UI.
3
Check out the table below
Reference the tables below to see what parts we expose. Alternatively, you can directly inspect the component HTML to see what parts are available.
Light Mode
| property | default value | description |
|---|---|---|
--velt-comment-tool-icon-size | 2rem | Sets the comment tool icon size |
--velt-comment-tool-border-radius | 50px | Sets the comment tool border radius |
--velt-comment-tool-icon-color | #8F95B2 | Sets the comment tool icon color |
--velt-comment-tool-hover-bg-color | #EAE8F9 | Sets the comment tool hover background color |
--velt-comment-tool-active-fill-color | white | Sets the comment tool active fill color |
--velt-comment-tool-active-bg-color | var(--velt-purple) | Sets the comment tool active background color |
Dark Mode
| property | default value | description |
|---|---|---|
--velt-comment-tool-icon-size | 2rem | Sets the comment tool icon size |
--velt-comment-tool-border-radius | 50px | Sets the comment tool border radius |
--velt-comment-tool-icon-color | #EAE8F9 | Sets the comment tool icon color |
--velt-comment-tool-hover-bg-color | #8F95B2 | Sets the comment tool hover background color |
--velt-comment-tool-active-fill-color | white | Sets the comment tool active fill color |
--velt-comment-tool-active-bg-color | var(--velt-purple) | Sets the comment tool active background color |
snippyly-comment-tool {
--snippyly-comment-tool-active-bg-color: grey;
}