# Article Theming (/docs/article-theming)



EarlySEO articles are designed to **inherit your site's theme** automatically. Whether you use WordPress, Shopify, Ghost, Webflow, Wix, Framer, or a custom webhook, published articles will match your site's fonts, colors, and spacing without any extra configuration.

How It Works [#how-it-works]

When EarlySEO generates an article, it produces clean, semantic HTML — standard tags like `<h2>`, `<p>`, `<ul>`, `<a>`, `<table>`, etc. No inline styles are injected into individual elements.

Each integration handles theming differently:

| Integration       | Theming Approach                                                                                                                                                      |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **WordPress**     | Clean HTML — your WordPress theme controls all styling. The EarlySEO Sync plugin enqueues a lightweight companion stylesheet that only adds spacing/layout if needed. |
| **WordPress.com** | Clean HTML — your WordPress.com theme applies its own typography and colors.                                                                                          |
| **Shopify**       | Clean HTML — your Shopify blog theme controls the look of articles. EarlySEO strips all embedded styles before publishing.                                            |
| **Ghost**         | Clean HTML — your Ghost theme's post template styles the content.                                                                                                     |
| **Webflow**       | Clean HTML — your Webflow Designer styles apply to collection items.                                                                                                  |
| **Wix**           | Clean HTML — Wix blog themes control the article's appearance.                                                                                                        |
| **Framer**        | Clean HTML — Framer manages its own rendering pipeline.                                                                                                               |
| **Notion**        | Converted to native Notion blocks — renders using Notion's own styling.                                                                                               |
| **Squarespace**   | Hosted blog — uses your configured domain and theme settings.                                                                                                         |
| **Webhook**       | Three HTML variants + companion CSS provided in the payload — you choose which to use.                                                                                |

Webhook Integration [#webhook-integration]

The webhook payload includes **two versions** of the article HTML:

content_html (recommended) [#content_html-recommended]

Fully styled HTML wrapped in a `.earlyseo-article` div with an embedded `<style>` block. **Works out of the box** — tables, blockquotes, code blocks, and lists are properly styled even if your site has no CSS for those elements.

All colors use CSS custom properties, so they automatically inherit your theme. To customize, just set the variables on your site — the embedded defaults will be overridden.

```html
<!-- content_html — works immediately, no extra setup -->
<div class="earlyseo-article">
  <style>
    .earlyseo-article { color: var(--earlyseo-text-color, inherit); ... }
    .earlyseo-article blockquote { color: var(--earlyseo-muted-color, #6b7280); ... }
    .earlyseo-article table { ... }
  </style>
  <h2>Introduction</h2>
  <p>Your article content with <a href="/related">internal links</a>...</p>
  <blockquote><p>Properly styled even if your site has no blockquote CSS.</p></blockquote>
  <table>
    <thead><tr><th>Feature</th><th>Status</th></tr></thead>
    <tbody><tr><td>Tables</td><td>Styled</td></tr></tbody>
  </table>
</div>
```

**To customize colors**, add CSS variables to your site — they override the defaults:

```css
:root {
  --earlyseo-text-color: #333;
  --earlyseo-heading-color: #111;
  --earlyseo-link-color: #0066cc;
  --earlyseo-border-color: #ddd;
}
```

content_raw_html [#content_raw_html]

Completely bare HTML — no wrapper div, no styles. Use this only if your site already has full CSS for all HTML elements (tables, blockquotes, code blocks, lists, etc.).

```html
<h2>Introduction</h2>
<p>Your article content...</p>
```

CSS Custom Properties [#css-custom-properties]

The embedded `<style>` block in `content_html` uses CSS custom properties for **every color value**. The defaults are **semi-transparent** (`rgba`) so they automatically adapt to both light and dark backgrounds — no configuration needed.

If you want to fine-tune for your brand, override any variable on your site — your values take priority over the embedded defaults:

```css
/* Example: brand overrides */
:root {
  --earlyseo-text-color: #333333;
  --earlyseo-heading-color: #111111;
  --earlyseo-link-color: #0066cc;
  --earlyseo-font-family: "Inter", sans-serif;
  --earlyseo-muted-color: #6b7280;
  --earlyseo-border-color: #e0e0e0;
  --earlyseo-code-bg: #f5f5f5;
  --earlyseo-pre-bg: #fafafa;
  --earlyseo-th-bg: #f5f5f5;
}
```

Available Tokens [#available-tokens]

| Token                      | What it controls                             | Default                  |
| -------------------------- | -------------------------------------------- | ------------------------ |
| `--earlyseo-text-color`    | Body text color                              | `inherit`                |
| `--earlyseo-heading-color` | Heading color (h1–h6)                        | `inherit`                |
| `--earlyseo-link-color`    | Link color                                   | `inherit`                |
| `--earlyseo-font-family`   | Body font family                             | `inherit`                |
| `--earlyseo-muted-color`   | Blockquote / secondary text color            | `inherit` (0.75 opacity) |
| `--earlyseo-border-color`  | All borders (h2, blockquote, pre, table, hr) | `rgba(128,128,128,0.2)`  |
| `--earlyseo-code-bg`       | Inline code background                       | `rgba(128,128,128,0.1)`  |
| `--earlyseo-pre-bg`        | Code block background                        | `rgba(128,128,128,0.06)` |
| `--earlyseo-th-bg`         | Table header background                      | `rgba(128,128,128,0.1)`  |

**Why semi-transparent defaults?** Because `rgba(128,128,128,0.1)` creates a subtle tint on **any** background — slightly darker on white, slightly lighter on black. This means tables, code blocks, and blockquotes look correct on both light and dark themes without any user configuration.

Text color, heading color, link color, and font family all `inherit` from the surrounding page, so articles automatically match the site's typography.

Dark Mode Support [#dark-mode-support]

Articles work on dark themes **out of the box** because all background/border defaults use semi-transparent `rgba()` values that adapt to any background color.

If you want to fine-tune colors for dark mode, override the tokens:

```css
@media (prefers-color-scheme: dark) {
  :root {
    --earlyseo-text-color: #e5e7eb;
    --earlyseo-heading-color: #f9fafb;
    --earlyseo-link-color: #60a5fa;
    --earlyseo-muted-color: #9ca3af;
  }
}
```

If your site uses a class-based dark mode (e.g., `.dark` on `<html>`), use the same overrides inside that selector:

```css
html.dark {
  --earlyseo-text-color: #e5e7eb;
  --earlyseo-heading-color: #f9fafb;
  --earlyseo-link-color: #60a5fa;
  --earlyseo-muted-color: #9ca3af;
}
```

Background/border tokens (`--earlyseo-border-color`, `--earlyseo-code-bg`, etc.) usually don't need dark-mode overrides because the semi-transparent defaults already adapt. Only override them if you want specific values.

FAQ [#faq]

My articles look different from the rest of my blog [#my-articles-look-different-from-the-rest-of-my-blog]

This should no longer happen. EarlySEO articles now deliver **clean semantic HTML** to all CMS platforms, and your site's theme CSS controls their appearance. If you're using the webhook integration, use `content_html` with `content_css` — it provides proper styling for tables, blockquotes, and lists even if your site doesn't have CSS for those elements.

Can I add custom CSS for EarlySEO articles only? [#can-i-add-custom-css-for-earlyseo-articles-only]

Yes. All article content is wrapped in a `<div class="earlyseo-article">` container (for CMS platforms that support it) or uses CSS custom properties. You can target this class:

```css
.earlyseo-article h2 {
  border-bottom: 2px solid var(--your-brand-color);
}
```

How do I override styles for a specific platform? [#how-do-i-override-styles-for-a-specific-platform]

Each CMS strips embedded styles before publishing, so your theme is always in control. If you need platform-specific overrides, use your CMS's built-in custom CSS feature (e.g., WordPress Customizer, Shopify theme editor, Webflow Designer).

Do articles support RTL layouts? [#do-articles-support-rtl-layouts]

Yes. Since articles use semantic HTML that inherits from the parent, RTL support depends on your site's `dir="rtl"` attribute and theme CSS. No special configuration is needed in EarlySEO.