Do not set CSS variables if they are equal to the default values.

Author: adamdehaven

README.md

@@ -250,7 +250,7 @@ What is
 
 ## Options
 
-Pass any of the options listed below to `Vue.use(VueCustomTooltip, {...})` to customize the plugin for your project _(not available with [in-component installation](#in-component-install))_.
+Pass any of the options listed below to `Vue.use(VueCustomTooltip, {...})` to customize the plugin for your project _(not available with [in-component installation](#in-component-install) - see the [CSS Variables section](#css-variables) below)_.
 
 > **A note on options tied to CSS properties**
 >
@@ -339,6 +339,20 @@ Vue.use(VueCustomTooltip, {
 })
 ```
 
+## CSS Variables
+
+In addition to customizing styles via the [Plugin Options](#options), you can alternatively choose to customize styles via CSS variables as shown below:
+
+```css
+/* Default values are shown */
+:root {
+  --vue-custom-tooltip-color: #fff;
+  --vue-custom-tooltip-background: #000;
+  --vue-custom-tooltip-border-radius: 100px;
+  --vue-custom-tooltip-font-weight: 400;
+}
+```
+
 ## Props
 
 In addition to the [Plugin Options](#options) above, you may also pass props to the component itself to customize both the look and behavior of the tooltip element.

src/VueCustomTooltip.vue

@@ -38,10 +38,24 @@ export default defineComponent({
       const htmlRoot: HTMLElement | null = document && document.documentElement ? document.documentElement : null
       if (htmlRoot) {
         /* eslint-disable @typescript-eslint/no-non-null-assertion */
-        htmlRoot.style.setProperty('--vue-custom-tooltip-color', tooltipOptions.color!)
-        htmlRoot.style.setProperty('--vue-custom-tooltip-background', tooltipOptions.background!)
-        htmlRoot.style.setProperty('--vue-custom-tooltip-border-radius', `${tooltipOptions.borderRadius!}px`)
-        htmlRoot.style.setProperty('--vue-custom-tooltip-font-weight', tooltipOptions.fontWeight!.toString())
+        htmlRoot.style.setProperty(
+          '--vue-custom-tooltip-color',
+          tooltipOptions.color !== defaultTooltipOptions.color ? tooltipOptions.color! : null,
+        )
+        htmlRoot.style.setProperty(
+          '--vue-custom-tooltip-background',
+          tooltipOptions.background !== defaultTooltipOptions.background ? tooltipOptions.background! : null,
+        )
+        htmlRoot.style.setProperty(
+          '--vue-custom-tooltip-border-radius',
+          tooltipOptions.borderRadius !== defaultTooltipOptions.borderRadius
+            ? `${tooltipOptions.borderRadius!}px`
+            : null,
+        )
+        htmlRoot.style.setProperty(
+          '--vue-custom-tooltip-font-weight',
+          tooltipOptions.fontWeight !== defaultTooltipOptions.fontWeight ? tooltipOptions.fontWeight!.toString() : null,
+        )
         /* eslint-enable @typescript-eslint/no-non-null-assertion */
       }
     }