Skip to content
View in the app

A better way to browse. Learn more.

Unraid

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

[Plugin] Theme Engine - a webGui styler

Featured Replies

4 hours ago, DevanteWeary said:

Thank you!

Don't use the side menu but good to know the option is there to make it look better now. 😆

 

 

 

Amazing Odón. I'm using it now with a tiny bit of my own coloring.  

Question: do you happen to know how to change the color of the red elements such as the stopped icon?  

I tried changing the one called "Red Text (failed)" but that doesn't seem to affect anything.

 

And also the rollup/setting buttons?

 

 

It's these ones:

 

image.png.f9e07ee3f462d33afb8fa700e81c25f2.png

 

 

Hi friend,

 

You have the option to put the following at the end of your custom CSS code from the Theme Engine Plugin:

 

.red-text {
color: var(--base07) !important;;
}

 

That --base07 corresponds to some of the colors you have above, if you want your custom color pass the color, for example:

 

.red-text {
color: #a3be8c !important;;
}

 

I hope it helps.

  • Replies 247
  • Views 108.3k
  • Created
  • Last Reply

Top Posters In This Topic

Most Popular Posts

  • In the works  

  • Replacement now published No it doesn't Replacement Theme Engine is now within Apps. Uninstall the original from the plugins tab and reinstall the new one from Apps Note that this plugin will be 1

  • THANK YOU FOR THIS PLUGIN.   Allowed to make it look like something not from 20 years ago        

Posted Images

Hi i try to hide the ugly blue square on the gray theme but theme engine doesn't seem to modify anything when the gray theme is used. I've tried many different theme. Imported, put everything in yellow disabled custom css and
Enable custom styling. But nothing seem to work. Anyone got an idea ?

 

image.png.c99c7a3ba19b7fd8ebcf22f4a41de6a6.png
 

image.png

image.png

I'm having issues with the Theme engine. After a day or two my settings get reverted back to default and I can no longer change the theme in the settings.

 

Hi,

 

Make sure this isn't the same thing that happened to me the other day.

 

Odón

Theme.park devs updated their Unraid theme: https://github.com/themepark-dev/theme.park/issues/663

 

Quote

 

GilbN

A fix from @pnancke has been merged into develop. Use develop.theme-park.dev

 

 

It's not totally the same as stock themes in Theme engine, but there's no visual bugs as far as I can see.

On 2/27/2025 at 4:29 AM, rushone2010 said:

Theme.park devs updated their Unraid theme: https://github.com/themepark-dev/theme.park/issues/663

 

 

It's not totally the same as stock themes in Theme engine, but there's no visual bugs as far as I can see.

Awesome! Some progress on it. Hopefully a proper implemented fix soon but this is good enough for the time being!

On 2/23/2025 at 12:59 AM, Bronom said:

Hi i try to hide the ugly blue square on the gray theme but theme engine doesn't seem to modify anything when the gray theme is used. I've tried many different theme. Imported, put everything in yellow disabled custom css and
Enable custom styling. But nothing seem to work. Anyone got an idea ?

 

image.png.c99c7a3ba19b7fd8ebcf22f4a41de6a6.png
 

image.png

image.png

 

Hi Bronom please see my comment below that uses the gray theme without the blue boxes

 

 

On 2/13/2025 at 11:14 AM, averagejoeshmoe said:

For anyone that wants a simple dark theme that works with the grey style side menu. I made this for 7.0.0. Everything seems to be fixed on the dashboard. Still needs some work on the shares and array page to get it to where i would like but its a start. Thanks to the previous commentors for some of their tweaks. 
Unraid7grey.png
 

Niko-gray.zip 1.61 kB · 12 downloads

  • 2 weeks later...

I recently upgraded to 7.0.1, and the theme engine plugin seems totally broken. None of the themes seem to work with the dashboard. All the tiles are some sort of dull grey/brown colour. Any ideas? I was loving the Dracula theme. The other tabs seem to look fine, it's just the dashboard.. :/

Just updated Unraid Connect and it broke Theme Engine again, simple fix is to uninstall TE after updating UC then install TE again.

 

Be sure to backup any custom CSS you've put in or alternatively a piece of code to load an external CSS file such as:

 

</style>
<link type="text/css" rel="Stylesheet" href="/mnt/user/data/tools/unraidthemes/themeengine/mytheme/mytheme.css" />

 

Edited by supptora
Adding backup info and external css file code

On 2/4/2025 at 1:22 PM, rushone2010 said:

Any chance someone has Dracula updated? I will try and mess with the CSS later but was hoping someone already has.

Did anyone ever get back to you?

On 3/18/2025 at 4:32 PM, supptora said:

Just updated Unraid Connect and it broke Theme Engine again, simple fix is to uninstall TE after updating UC then install TE again.

 

Be sure to backup any custom CSS you've put in or alternatively a piece of code to load an external CSS file such as:

 

</style>
<link type="text/css" rel="Stylesheet" href="/mnt/user/data/tools/unraidthemes/themeengine/mytheme/mytheme.css" />

 

 

Thanks for the guidance on how to restore everything.  It was very easy.

On 12/14/2024 at 2:24 PM, fleps said:

THANK YOU FOR THIS PLUGIN.

 

Allowed to make it look like something not from 20 years ago xD

 

image.thumb.png.c6e7173fec129cafb34340d5b9abe6ba.png

 

 

 

 

 

How do you make it transparent like that?   I have a wallpaper that I want to show just slightly.  Like how you have it setup.   What do you do to make it like that?  I put a line for transparent, but I can't control how how opaque i want it or not.  Any help would be appreciated.  I am new to this.

On 3/18/2025 at 1:32 PM, supptora said:

Just updated Unraid Connect and it broke Theme Engine again, simple fix is to uninstall TE after updating UC then install TE again.

 

Be sure to backup any custom CSS you've put in or alternatively a piece of code to load an external CSS file such as:

 

</style>
<link type="text/css" rel="Stylesheet" href="/mnt/user/data/tools/unraidthemes/themeengine/mytheme/mytheme.css" />

 

Awesome. Thanks for the tip!

Question: how are we supposed to use your tip?

 

I cleared out the custom CSS and put yours in with my own path/file and it turned my dashboard almost completely white (I have a dark theme).

On 3/26/2025 at 12:12 AM, DevanteWeary said:

Awesome. Thanks for the tip!

Question: how are we supposed to use your tip?

 

I cleared out the custom CSS and put yours in with my own path/file and it turned my dashboard almost completely white (I have a dark theme).

Your custom file needs to have full theming in it. I use the file from here with some modifications: https://github.com/XiaoNieGPT/unraid-theme (you can manually download instead of using the commands to clone the repo)

On 3/28/2025 at 12:09 PM, supptora said:

Your custom file needs to have full theming in it. I use the file from here with some modifications: https://github.com/XiaoNieGPT/unraid-theme (you can manually download instead of using the commands to clone the repo)

Awesome. THank you!

Hey guys, thanks for calling this out! We've been hard at work beginning to modernize the CSS in Unraid, and those changes will hit in 7.1.

@Skitals, do you mind reviewing these PRs: https://github.com/Skitals/unraid-theme-engine/pulls?q=sort%3Aupdated-desc+is%3Apr+is%3Aopen that @zspearmint made in order to support the theme engine in Unraid 7.1? 

Thanks a lot, please let us know if you don't have bandwidth for this, and possibly we can help you get an updated Theme engine out! These changes should start making theming easier and less painful!

So that I'm following, Theme Engine in 7.0.1 today isn't fully working or has issues, correct?  This will be fixed in 7.1?

 

Every 2-3 days, I'm losing my theme and I simply copy the custom CSS, remove the plugin, reinstall it, and then paste in the custom CSS.  It gets back to working each time with this method.

 

 

11 hours ago, huntrm said:

So that I'm following, Theme Engine in 7.0.1 today isn't fully working or has issues, correct?  This will be fixed in 7.1?

 

Every 2-3 days, I'm losing my theme and I simply copy the custom CSS, remove the plugin, reinstall it, and then paste in the custom CSS.  It gets back to working each time with this method.

 

 

AFAIK Theme engine should still be fine on 7.0.1. It will not as is work on 7.1.0. We do have a code change for compatibility if the author sees it, but otherwise someone will likely fork this plugin and publish it with the compatibility changes

22 hours ago, huntrm said:

So that I'm following, Theme Engine in 7.0.1 today isn't fully working or has issues, correct?  This will be fixed in 7.1?

 

Every 2-3 days, I'm losing my theme and I simply copy the custom CSS, remove the plugin, reinstall it, and then paste in the custom CSS.  It gets back to working each time with this method.

 

 

 

It's the "dynamix unraid connect" plugin updates that break it and they've been releasing updates to that like there's no tomorrow, lol. So if you're more selective on when to update that it'll lessen the amount of times you need to use the work-around.

10 hours ago, Squid said:

AFAIK Theme engine should still be fine on 7.0.1. It will not as is work on 7.1.0. We do have a code change for compatibility if the author sees it, but otherwise someone will likely fork this plugin and publish it with the compatibility changes

 

It would be great if theming could be incorporated into Unraid by default. Even just being able to set transparency levels and a background would go a long way until more complex customisation could be added 🙏

  • 1 month later...

I can confirm that theme engine works with 7.1.0, at least by using the external CSS method I mentioned previously (I don't use the other options).

Doesnt work for me in 7.1.0. No themes work even with a plex.css link like before. 

 

I am unable to select 'Black' as a Base Theme which I am guessing is the cause.

 

image.thumb.png.724a58a86a725f0841e46d2f64153f51.png

Edited by z0ki

1 hour ago, z0ki said:

Doesnt work for me in 7.1.0. No themes work even with a plex.css link like before. 

 

I am unable to select 'Black' as a Base Theme which I am guessing is the cause.

 

image.thumb.png.724a58a86a725f0841e46d2f64153f51.png

I don't use any of the options that are available after installing the theme.  I simply scroll to the bottom of the configuration for the plugin and turn on Custom Styling (advanced) and then I copy/paste this in the box for the Aquamarine theme.  You can try that then swap out maybe to the plex.css look.  I'm running 7.1 of Unraid.

 

table.dashboard {
    background: var(--transparency-dark-15);
    border: 1px solid var(--transparency-light-25);
}
table.dashboard thead.stopgap {
    display: none;
}
table.dashboard tr > td.next {
    border-top: 1px solid var(--transparency-light-25);
    color: var(--text-hover);
}
table.dashboard tbody {
    border: 1px solid var(--transparency-light-15);
}
</style>
<link type="text/css" rel="Stylesheet" href="https://theme-park.dev/css/base/unraid/aquamarine.css" />

 

PSA:

 

Theme Engine is not compatible with Unraid 7.1.0+

 

@Skitals appears to be MIA.  I've marked this plugin as being incompatible with 7.1.0, but a fixed version of this plugin will appear within CA sometime today.

 

Note that while this fixed version will be published by me (full credit goes to Skitals, as nothing is changed short of the fixes done by @zspearmint), this will be an unsupported plugin.  In other words, If further issues / features etc come up then that may or may not be fixed.

On 5/7/2025 at 1:32 PM, huntrm said:

I don't use any of the options that are available after installing the theme.  I simply scroll to the bottom of the configuration for the plugin and turn on Custom Styling (advanced) and then I copy/paste this in the box for the Aquamarine theme.  You can try that then swap out maybe to the plex.css look.  I'm running 7.1 of Unraid.

 

table.dashboard {
    background: var(--transparency-dark-15);
    border: 1px solid var(--transparency-light-25);
}
table.dashboard thead.stopgap {
    display: none;
}
table.dashboard tr > td.next {
    border-top: 1px solid var(--transparency-light-25);
    color: var(--text-hover);
}
table.dashboard tbody {
    border: 1px solid var(--transparency-light-15);
}
</style>
<link type="text/css" rel="Stylesheet" href="https://theme-park.dev/css/base/unraid/aquamarine.css" />

 

 

I can't select a base theme but it's defo working for me using the external CSS method.

 

 

Screenshot from 2025-05-09 17-38-36.png

 

 

Screenshot from 2025-05-09 17-38-49.png

 

 

Screenshot from 2025-05-09 17-39-10.png

Edited by supptora

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.