# Widget rendering and theming

Source: https://developer.avalara.com/products/self-serve-tariff-code/integration-guides/classyvue-integration-guide/krg8353196248896/

Guide: ClassyVue integration guide

# Widget rendering and theming

ClassyVue renders inside an iframe on the host page and supports light and dark themes. Learn how the widget's default styles work and how to customize them to match your brand.

ClassyVue renders inside an iframe scoped to the

container you specify on the host page. The iframe is self-contained, which means the widget's styles don’t interfere with the host page's CSS, and the host page's styles don’t affect the widget.

The widget ships with default CSS applied to the `#ccce-classyvue` selector. You can override these styles in your own style sheet to match your brand's visual design:

```
#ccce-classyvue {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  box-shadow: 0 1px 5px rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12);
  z-index: 99;
  position: relative;
}
```

The drop shadow can also be removed using the `no-shadow` script attribute instead of overriding CSS.

ClassyVue autodetects the user's OS theme preference and switches between light and dark mode accordingly. You can override this behavior using the `force-theme` script attribute, setting it to `'light'` or `'dark'`. Overriding the theme isn’t recommended unless the host page itself locks a specific theme.