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

propertydefault valuedescription
--velt-comment-tool-icon-size2remSets the comment tool icon size
--velt-comment-tool-border-radius50pxSets the comment tool border radius
--velt-comment-tool-icon-color#8F95B2Sets the comment tool icon color
--velt-comment-tool-hover-bg-color#EAE8F9Sets the comment tool hover background color
--velt-comment-tool-active-fill-colorwhiteSets the comment tool active fill color
--velt-comment-tool-active-bg-colorvar(--velt-purple)Sets the comment tool active background color

Dark Mode

propertydefault valuedescription
--velt-comment-tool-icon-size2remSets the comment tool icon size
--velt-comment-tool-border-radius50pxSets the comment tool border radius
--velt-comment-tool-icon-color#EAE8F9Sets the comment tool icon color
--velt-comment-tool-hover-bg-color#8F95B2Sets the comment tool hover background color
--velt-comment-tool-active-fill-colorwhiteSets the comment tool active fill color
--velt-comment-tool-active-bg-colorvar(--velt-purple)Sets the comment tool active background color