# Preview image for own themes
**URL:** https://meta.discourse.org/t/preview-image-for-own-themes/389978
**Category:** Support
**Created:** [November 30, 2025, 4:53pm UTC](https://meta.discourse.org/t/preview-image-for-own-themes/389978 "2025-11-30T16:53:25Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@Roi](https://meta.discourse.org/u/Roi)
#### Post date: [November 30, 2025, 4:53pm UTC](https://meta.discourse.org/t/preview-image-for-own-themes/389978/1 "2025-11-30T16:53:25Z")
Hi all,
first of all, I would like to point out that my question is about a totally unimportant thing, but I wanted to ask it anyway 😉:
Where/how do I set a preview image for own themes. It looks a bit naked in the admin area without a proper preview image:
My inner Adrian Monk makes himself known here every time. And I know everyone has an inner Adrian Monk, and some are like mine. 😛 So it might matter at least a little bit to other people as well.
Please forgive me if this was already answered here on Meta. But I did not find anything suitable through the search.
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [November 30, 2025, 5:06pm UTC](https://meta.discourse.org/t/preview-image-for-own-themes/389978/2 "2025-11-30T17:06:01Z")
I remember this guide, but I don’t know if that’s what you are looking for:
> [@Adding preview screenshots to Discourse themes](https://meta.discourse.org/t/adding-preview-screenshots-to-discourse-themes/365083):
>
> bookmark This guide explains how to add preview screenshots to your Discourse theme to showcase how it looks in both light and dark modes. person_raising_hand Required user: Theme developers Adding preview screenshots to your Discourse theme helps users quickly understand how your theme looks before they install it. This guide will walk you through adding light and dark mode screenshots to your theme. Creating the screenshots folder To add preview screenshots to your theme: Create a…
---
### Author:  [@Roi](https://meta.discourse.org/u/Roi)
#### Post date: [November 30, 2025, 9:12pm UTC](https://meta.discourse.org/t/preview-image-for-own-themes/389978/3 "2025-11-30T21:12:08Z")
Thank you, but not really. Or I do not understand - which is always a possibility. 😉
I created the theme in the screenshot of the standard theme from my self-hosted Discourse instance. So I did not download or upload it anywhere. Also I do not see a theme directory in the shared file paths outside the Docker container.
So I am still a little lost here… 🤷♂️
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [November 30, 2025, 11:28pm UTC](https://meta.discourse.org/t/preview-image-for-own-themes/389978/4 "2025-11-30T23:28:07Z")
I believe the screenshots are only for themes you create yourself from Github, like developing it yourself. Hence it’s in #Documentation > Developer Guides.
---
### Author:  [@Roi](https://meta.discourse.org/u/Roi)
#### Post date: [December 1, 2025, 12:23pm UTC](https://meta.discourse.org/t/preview-image-for-own-themes/389978/5 "2025-12-01T12:23:37Z")
Yeah. So the question remains. Is there any way?
And again, not the most important question and feature of all. 😉
---
### Author:  [@RGJ](https://meta.discourse.org/u/RGJ)
#### Post date: [December 1, 2025, 12:34pm UTC](https://meta.discourse.org/t/preview-image-for-own-themes/389978/6 "2025-12-01T12:34:06Z")
> [@Roi](#):
>
> Is there any way?
If you created the theme purely via the admin user interface, no.
In order to have screenshots you should have a local file/directory structure that mirrors the theme.
You could export the theme, unzip it, add the screenshots as in the guide mentioned above, re-zip it and import it. But then again, screenshots are used mostly to show _other people_ what your theme looks like, so if you didn’t upload it anywhere, who would that be ?
---
### Author:  [@Roi](https://meta.discourse.org/u/Roi)
#### Post date: [December 1, 2025, 1:02pm UTC](https://meta.discourse.org/t/preview-image-for-own-themes/389978/7 "2025-12-01T13:02:11Z")
> [@RGJ](#):
>
> If you created the theme purely via the admin user interface, no.
Okay. Thank you. Then it is as it is. 🙂
> [@RGJ](#):
>
> But then again, screenshots are used mostly to show _other people_ what your theme looks like, so if you didn’t upload it anywhere, who would that be ?
Other admins for example. But as I said, it is not really important. I just notice it every time I am there to edit something in the theme.
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [December 1, 2025, 2:40pm UTC](https://meta.discourse.org/t/preview-image-for-own-themes/389978/8 "2025-12-01T14:40:55Z")
> [@Roi](#):
>
> Is there any way?
It’s maybe a little hacky, but you can replace the default SVG pattern with a custom image with the help of CSS.
Example result
In the uploads section of your theme, you add the screenshot
and in the CSS tab of “edit code” you add
lowercase & replace spaces with hyphens
```css
.theme-card.=THEME_NAME= .theme-card__image-wrapper svg {
display: none;
}
.theme-card.=THEME_NAME= .theme-card__image-wrapper {
background-image: url($=UPLOAD_NAME=);
background-size: cover;
background-position: center;
}
```
I hope this is enough to bring a little more relaxation to your inner Monk.
---
### Author:  [@Roi](https://meta.discourse.org/u/Roi)
#### Post date: [December 1, 2025, 4:10pm UTC](https://meta.discourse.org/t/preview-image-for-own-themes/389978/9 "2025-12-01T16:10:47Z")
> [@Moin](#):
>
> It’s maybe a little hacky, but you can replace the default SVG pattern with a custom image with the help of CSS.
Wow thank you very much for that. It worked right you described it. And it was just copy-paste thanks to your post. Cool! 👍
My inner Monk seems not to be there anymore. At least when it comes to this. 😛
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [December 31, 2025, 4:11pm UTC](https://meta.discourse.org/t/preview-image-for-own-themes/389978/10 "2025-12-31T16:11:10Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
---
### Author:  [@Tris20](https://meta.discourse.org/u/Tris20)
#### Post date: [May 22, 2026, 11:30am UTC](https://meta.discourse.org/t/preview-image-for-own-themes/389978/11 "2026-05-22T11:30:30Z")
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [May 22, 2026, 11:44am UTC](https://meta.discourse.org/t/preview-image-for-own-themes/389978/12 "2026-05-22T11:44:56Z")
The code I shared above broke recently. The class name changed, so the CSS selector no longer matched (I think it happened in [#40001](https://github.com/discourse/discourse/pull/40001)). This is the updated version I use on my forum now:
lowercase & replace spaces with hyphens
SCSS var name
```css
.theme-card.=THEME_NAME= .theme-card-preview__image-wrapper svg {
display: none;
}
.theme-card.=THEME_NAME= .theme-card-preview__image-wrapper {
background-image: url($=UPLOAD_NAME=);
background-size: cover;
background-position: center;
}
```
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [June 21, 2026, 11:45am UTC](https://meta.discourse.org/t/preview-image-for-own-themes/389978/13 "2026-06-21T11:45:51Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.