> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Connect a Custom Element's Colors and Fonts to a Site Theme

## Article: Connect a Custom Element's Colors and Fonts to a Site Theme

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-widgets/connect-a-custom-element-s-colors-and-fonts-to-a-site-theme.md

## Article Content:

# Connect a Custom Element's Colors and Fonts to a Site Theme

When site owners design a Wix site, linking elements to the site's theme ensures a clean, cohesive, and professional design. A color theme provides a predefined set of colors, while a typography theme defines the appearance of site text. Learn more about [site themes in Wix Studio](https://support.wix.com/en/article/studio-editor-about-site-styles) and [site themes in Wix Editor](https://support.wix.com/en/article/wix-editor-customizing-your-sites-theme-and-design).

If you're building a site widget with a custom element, you can configure it to automatically adopt the site's theme styles. This ensures your widget integrates seamlessly into the site's design, maintaining consistency across all components.

## Access theme styles with CSS variables

Every site's theme styles are exposed as CSS variables on the web page, making it easy to reference and apply them to your custom elements. These variables include design tokens for the colors and fonts that match the site's theme. For a comprehensive list of available styles, refer to the [site theme CSS variables](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/custom-css/site-theme-css-variables.md).

By using CSS variables, your custom element will automatically adapt to changes in the site's theme. This ensures your element remains consistent with the site's updated design without requiring manual intervention.

## Assign theme styles to custom elements

To connect your custom element's styles to the site's theme, resolve the appropriate CSS variables and apply them in your code. The following are examples of integrating theme colors and fonts.

<blockquote class="tip">

**Tips:**

* Test your widget on sites with different themes to ensure it works well across various designs and settings.
* Always use fallback values in case a theme variable is undefined. For example:

```js
.title {
  color: var(--wst-color-text-primary, #000000);
} 
```

</blockquote>

### Connect to a theme color

Assign a theme's primary background color to your custom element:

```js
.container {
   background-color: var(--wst-color-fill-background-primary);
```

Replace `--wst-color-fill-background-primary` with any other theme color variable depending on your design requirements.

### Connect to a theme font

Apply a theme's font style to a text element:

```js
.title {
   font: var(--wst-font-style-h2);
```

Ensure you use the correct CSS variable for the specific font style, such as `--wst-font-title`,`--wst-font-paragraph`, or others, depending on the text's purpose.

### Embed site theme styles in a shadow DOM or internal iframe

Normally, the theme stylesheet is automatically included with the webpage, ensuring consistent styling across the site. However, when working with custom elements that use a shadow DOM or an internal iframe, the page's stylesheet may be inaccessible.
When working with custom elements in Wix, you might encounter situations where the page's main stylesheet is inaccessible. In such cases, you can use [`getSiteThemeHtml()`](https://dev.wix.com/docs/sdk/frontend-modules/site/introduction.md) to dynamically embed the site's theme styles directly into your custom element, including colors and fonts.

The following example shows how to use `getSiteThemeHtml()` to dynamically apply your Wix site's theme styles to a custom element's shadow DOM:

```js
import { site } from '@wix/site-site'; // Import the site module for theme handling

class ThemedCustomElement extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.loadSiteTheme();
  }

  async loadSiteTheme() {
    // Fetch the site's theme HTML
    const themeHtml = await site.getSiteThemeHtml();

    // Attach the shadow DOM
    const shadow = this.attachShadow({ mode: 'open' });

    // Embed the theme CSS and content directly into the shadow root
    shadow.innerHTML = `
      ${themeHtml}
      <div>
        This is a themed element with site styles applied.
      </div>
    `;
  }
}

// Register the custom element
customElements.define('themed-custom-element', ThemedCustomElement);
```