# How to customize appearance of discourse embeds?

**URL:** https://meta.discourse.org/t/how-to-customize-appearance-of-discourse-embeds/240026
**Category:** Support
**Created:** [September 25, 2022, 8:29pm UTC](https://meta.discourse.org/t/how-to-customize-appearance-of-discourse-embeds/240026 "2022-09-25T20:29:20Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![kirupa](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kirupa/32/374711_2.png) [@kirupa](https://meta.discourse.org/u/kirupa)
#### Post date: [September 25, 2022, 8:29pm UTC](https://meta.discourse.org/t/how-to-customize-appearance-of-discourse-embeds/240026/1 "2022-09-25T20:29:20Z")

</div>

Hi everyone,

I use the discourse embed feature to surface posts on a non-discourse site. When I have dark mode on the main site enabled, I would like to style the discourse embeds to appear appropriately as well:

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/8/d/f8dfc07e228b32669cc802a4be52f4fdc1bbc91e.jpeg)

Is there a way for me to have the embedded instance inherit the styles from the parent page? I believe it is iframed right now, and that is limiting style sharing.

Thanks,  
Kirupa

---

<div class="post-metadata">

### Author: ![kirupa](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kirupa/32/374711_2.png) [@kirupa](https://meta.discourse.org/u/kirupa)
#### Post date: [September 28, 2022, 3:25am UTC](https://meta.discourse.org/t/how-to-customize-appearance-of-discourse-embeds/240026/2 "2022-09-28T03:25:28Z")

</div>

Another thing is that the code syntax highlighting is also missing. Is there a way to make the embed look more natural with the site it is being displayed in while also retaining syntax highlighting? 🙂

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [September 28, 2022, 3:48am UTC](https://meta.discourse.org/t/how-to-customize-appearance-of-discourse-embeds/240026/3 "2022-09-28T03:48:27Z")

</div>

I think the auto-dark embeds has cropped up before if this is any use:

> [@Automatic dark mode for embedded comments as well?](https://meta.discourse.org/t/automatic-dark-mode-for-embedded-comments-as-well/184347):
>
> [Automatic Dark Mode color scheme switching](https://meta.discourse.org/t/automatic-dark-mode-color-scheme-switching/161593) is a fantastic addition, thanks for integrating it! With (automatic) color scheme switching available, I’m wondering if there might also be some way to switch back and forth between light and dark Discourse modes when embedded as comments in a blog. Specifically, my Ghost blog has a toggle that users can click on to manually switch back and forth between light and dark modes. I know that my blog’s CSS can’t effect the CSS within Discourse’s iframe, but…

---

<div class="post-metadata">

### Author: ![weallwegot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/weallwegot/32/124753_2.png) [@weallwegot](https://meta.discourse.org/u/weallwegot)
#### Post date: [September 28, 2022, 4:00am UTC](https://meta.discourse.org/t/how-to-customize-appearance-of-discourse-embeds/240026/4 "2022-09-28T04:00:12Z")

</div>

And as another potential helpful thread there are a few CSS pointers here, though I haven’t done it myself:

> [@Style the embedded Discourse frame on your web page](https://meta.discourse.org/t/how-to-style-the-embedded-discourse-frame-on-your-web-page/35861):
>
> How to style the embedded Discourse frame on your web page Getting Started To get started you have to create a new CSS stylesheet under admin -\> customize -\> css/html, even if you don’t want to change the normal styling of your forum. Just leave the other categories empty and just modify Embedded CSS. Don’t forget to set it to enabled under the textfield. Link and Button Colors You probably want to style the links and buttons according to your web page. footer a.button { background-color: …

---

<div class="post-metadata">

### Author: ![kirupa](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kirupa/32/374711_2.png) [@kirupa](https://meta.discourse.org/u/kirupa)
#### Post date: [October 6, 2022, 2:10am UTC](https://meta.discourse.org/t/how-to-customize-appearance-of-discourse-embeds/240026/5 "2022-10-06T02:10:16Z")

</div>

Thanks so much for the suggestions! I’ll try setting custom CSS via the approach you have described 🙂

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [November 5, 2022, 2:11am UTC](https://meta.discourse.org/t/how-to-customize-appearance-of-discourse-embeds/240026/6 "2022-11-05T02:11:13Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
