[Plugin] Simple Custom WebUI CSS Plugin for Unraid 7.2+

November 22, 2025Nov 22

I had been using Theme Engine for years to deploy my custom CSS and style the Unraid WebUI the way I like, but unfortunately it no longer works on Unraid 7.2+.

Since my needs are very simple—just injecting my own custom CSS—I created this lightweight plugin. It provides a settings page where you can paste your CSS, and it loads it into the <head> of every page. Update: As well as these features:

Global CSS Injection
"Black Theme" specific CSS (only loaded when Unraid theme is set to 'black')
Additional assets (e.g. background images) folder, sync from Flash to Web Dir

I’m sharing it here in case anyone else needs the same functionality.

25/12/05: Now available in CA: Custom WebUI CSS

~~Input this URL in "PLUGINS => Install Plugin tab" to Install:~~

~~https://raw.githubusercontent.com/WuSiYu/unraid-custom-css/refs/heads/master/custom.css.plg~~

GitHub repo: https://github.com/WuSiYu/unraid-custom-css

Note: This is NOT a replacement for Theme Engine. It only provides simple CSS injection and has only been tested on Unraid 7.2+. For versions ≤ 7.1.4, it’s recommended to continue using the Theme Engine plugin.

I’ve also uploaded my personal custom styling CSS Theme to the GitHub repo as an example. If you’re interested, you can check it out here:

https://github.com/WuSiYu/unraid-custom-css/blob/master/example.css

More details please visit the Theme thread: https://forums.unraid.net/topic/195294-theme-modernization-theme-for-unraid-webui-72-and-a-simple-custom-css-plugin/

CHANGES

## 2025.11.29
- Minor update config file logic to match unraid's suggestion.
- Minor improvements and bug fixes.

## 2025.11.26
- Added separate editor for "Black Theme" specific CSS.
- Black Theme CSS is only loaded when Unraid theme is set to 'black'.
- Added additional assets folder and sync feature.
- Added Enable/Disable dropdown menu.

## 2025.11.22
- Inital release.

Edited December 6, 2025Dec 6 by Wu23333

Quote

2
2

November 22, 2025Nov 22

This is nice. Thank you! I got my button colors back that I used from Theme Engine for regular and hover. Thanks for providing your sample CSS code. This helped me just replace the color codes.

Edited November 22, 2025Nov 22 by AwesomeAustn

Quote

November 25, 2025Nov 25

If anyone is interested, I was playing around with one theme.

It's a lot with the help of ChatGPT, so hopefully the CSS is okay.

For ideal adjustment, see Display Settings, see the image below.

EDIT: I found a minor bug where some icons disappeared. The fix is simple, just add the following code at the end:

(V2 has already been fixed)

.fa {
font-family: "FontAwesome" !important;
}

ThemeV2.css

Edited November 27, 2025Nov 27 by Aeloth

Quote

2

November 26, 2025Nov 26

@Aeloth download link is down

Quote

November 26, 2025Nov 26

It works for me, but here is a link.

Quote

November 29, 2025Nov 29

Thanks so much for this plugin. I've installed it on 7.1.4 to replace theme engine before updating to the newer OS. It worked flawlessly even on this earlier build and I had a smooth update to 7.2.2. The unraid team should mention this as a replacement for theme engine since a good portion of us just used a custom css file.

FYI if anyone has issues with their dashboard looking different after updating to 7.2, these changes lie in /webGui/styles/themes/black.css. For example, if you previously had a different background color defined for your dashboard elements, setting --mild-background-color: initial !important; in the root of your CSS fixes this.

Edited November 29, 2025Nov 29 by anna

Quote

December 7, 2025Dec 7

Awesome plugin! Thank you.

I was already using custom CSS with the old theme engine plugin, so with a few tweaks to my code to tidy it up I'm back in action with a consistent color-way for the dashboard

Quote

December 14, 2025Dec 14

https://pastebin.com/utvXZyac

Quote

1

January 15Jan 15

BLUEPRINT THEME.css

Quote

2

January 26Jan 26

This is very cool. Themes are a bit more vibrant than I prefer 😅, but huge thanks for this 🫡

Quote

January 29Jan 29

Actually im trying to create a little glassy UI theme 🙂

Quote

3

January 29Jan 29

@TimTaylor That looks great, can I get the css? 😁

Quote

January 30Jan 30

Its not done at the moment, and has some bugs 🥲. When i finish it, i will post the CSS here 😉.

Quote

February 1Feb 1

tip: if you do this on the CSS style?

/* Force Background Image */

body {

background-image: url('https://https://static1.squarespace.com/static/5e949a92e17d55230cd1d44f/t/666797c50267ef33983aa221/1718065110482/SequoiaDark.png') !important;

background-size: cover !important;

background-attachment: fixed !important;

background-position: center !important;

background-repeat: no-repeat !important;

}

you can apply a background to your theme. this case, in this case, using a MACOS background jsut for showing how it works.

Quote

February 16Feb 16

hey all, I'm not a frontend developer, I've tried with some of the coding agents but failing, so I'm wondering if any of you know.

I'm trying to make a plugin that injects a react style 'drawer' overlay, so on any page the drawer slides out from the right. Is this pushing this injection approach too far? no possible?

Thanks

John

Quote

February 27Feb 27

Hi, my first post on forum. I was inspired by @TimTaylor and decided to make it. Its not perfect, might need some changes. Try it by yourself!

https://hasteb.in/EJBN0vAZuF9nRS9

Edited February 28Feb 28 by DarqLite
Minor changes.

Quote

1

March 1Mar 1

Inspired by @Aeloth themevs2.css i made some adjustments using chatgpt and claude and wanted to share it with you guys.

Side Quest:

@DarqLite That Liquid Design is damn nice ! Great work !

Industrial Dashboard.css

Quote

1

March 1Mar 1

I'm using Gemini CLI, it's been such a great experience building plugin's with it, there is no way I would have had the time to do so before, so they would never have materialised. It does all the hard work of figuring out how to make useful stuff work with Unraids framework.

Quote

March 8Mar 8

Here is the Aquamarine Theme from Theme-park.

Argued with Gemini AI for a few hours before i got it to where i liked it.

Aquamarine theme Unraid.css

Quote

March 9Mar 9

I have updated the Unraid Theme Future.

I fixed various bugs and improved the appearance.

If you encounter any bugs, please let me know.

PS: To enable color bars, set Used/Free columns to Bar (color) in Settings / Display Settings.

Unraid Theme Futurev2.css

EDIT: Adding Purple, Blue, Green, Red, GoldAmber, ToxicOrange, YellowIndustrial NEON Themes in this style.

PurpleNEON.css BlueNEON.css GreenNEON.css RedNEON.css GoldAmberNEON.css ToxicOrangeNEON.css YellowIndustrialNEON.css

Edited March 10Mar 10 by Aeloth

Quote

2

March 10Mar 10

Made a sleek dark theme with a animated background. Paste into the plugin and enjoy! (note: use ordinary dynamix white theme, dark theme is not supported)

darkanimated.css

Edited March 10Mar 10 by Victor90

Quote

March 14Mar 14

On 3/10/2026 at 8:11 AM, Victor90 said:

Made a sleek dark theme with a animated background. Paste into the plugin and enjoy! (note: use ordinary dynamix white theme, dark theme is not supported)
darkanimated.css

This is phenomenal, and very sleek. Using this for now until I inevitably want to make custom tweaks of my own.
Thanks for sharing. I found it worked fine for me on the Black Theme aside from needing to set a custom header text color.

Edit: You should probably re-factor the CSS gradient SVG you made. The animation is really nice, but when on-screen it kind of hammers the processor. Might be a way to optimize this to be less detailed, or just replace it with a rendered animation file.

Edited March 14Mar 14 by skywalker6705

Quote

March 15Mar 15

@Wu23333 I love love this plugin... Thank you very much!

I would like to make a suggestion, which I have already tried out. When editing the css code back and forth.; I thought it was a pain to do all the manual scrolling to get to the bottom of my customized css. Edit a few parameters, hit "Apply" review changes, scroll down to adjust, edit again, apply, preview, scroll again.... and so on.

With help from ChatGPT, I created a version of the plugin that adds scroll buttons. They work quite well. I am pasting below the revised .plg and a test of the CustomCSS.page file it generates (see more below). I asked the AI, to keep your content untouched and just inject the 2 sections in the code that make the change... The two section in the .plg are Styling: lines 153 to 221 and JavaScript: lines 281 to 347.

Here is the modified .plg file:
custom.css.plg

To manually test without launching the .plg, here is the file it generates that needs to be copied to /usr/local/emhttp/plugins/custom.css

CustomCSS.page

In keeping with the spirit... I have to customize the customizing page. Here is the code I used in screenshot above... I like the old monitor vibe.

textarea[name="custom_css_black"] {

background: #dfdfdf !important;

color: #b1b1b1!important;

border: 1px solid #c3c3c3!important;

border-radius: 18px;

height: 10vh !important;

}

textarea[name="custom_css"] {

background: #3a3a3a!important;

border: 23px solid #e4dac9 !important;

padding: 15px !important;

border-radius: 20px !important;

color: #cdffc3 !important;

box-shadow: 2px 4px 15px rgba(0,0,0,0.6);

height: 60vh !important;

}

input[name="SAVE_CONFIG"] {

background-color: #c00000 !important;

color: #fff !important;

}

I hope you agree that this is a worthy feature, which saves you from a lot of tedious scrolling while tweaking the css. Please integrate if you agree. Please don't ask me to fork the repo... I am not much of an expert using Github.

Thank you again!!

Quote