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.

[Theme] Modernization Theme for Unraid WebUI 7.2+ (and a simple custom css plugin)

Featured Replies

After developing a simple custom CSS plugin (https://forums.unraid.net/topic/195276-plugin-simple-custom-webui-css-plugin-for-unraid-72/) that works on Unraid 7.2+, I spent some time refining my personal CSS code and releasing it here as a theme.

It now features a more modern look for pages like Dashboard and Main, with improved rounded gradient borders for buttons, while remaining compatible with both White and Black base themes. I intentionally limited the scope of the CSS to avoid breaking the display of various third-party plugins, but if you still encounter issues, feel free to provide feedback here.

This theme is only tested on 7.2+, If you're using an older Unraid version (≤7.1.4), you can still reference specific sections of my CSS (e.g., Buttons) with some adaptation and use Skitals's Theme Engine plugin to apply the CSS.

Installation:

First, install the Custom CSS plugin:

Input this URL in “PLUGINS => Install Plugin tab” to Install:

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

Then navigate to SETTINGS => Custom WebUI CSS, paste the content from this file, and apply:

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

Screenshots (hi-res images: https://github.com/WuSiYu/unraid-custom-css?tab=readme-ov-file#usage-and-configuration):

screenshot.png

screenshot2.png

Better button style:

截屏2025-11-24 05.44.25.png

2025/11/24 v0.1.0 initial release

2025/11/25 v0.2.0 update:

gradient button color text (not supported on firefox, will fallback to v0.1.0 style), accent on special buttons:

截屏2025-11-25 22.13.13.png

new Tab style:

截屏2025-11-25 22.13.26.png

Edited by Wu23333

  • Wu23333 changed the title to [Theme] Modernization Theme for Unraid WebUI 7.2+ (and a simple custom css plugin)

Thank you for this! I just upgraded unraid and tried out your plugin & css and it looks great!

Thanks from me too. It looks really modern and stylish.

-faxxe

really appreciated - was missing my custom background! I'm a novice when it comes to CSS but managed to set back to familiar interface - thanks!

For info - I chose the black theme in dynamic and put this in the "for black theme only" section:

/* Additional CSS (Black Theme Only) */

:root {

/* --background-color: #616180; */

background-image: url('/plugins/custom.css/assets/IMG_0890.jpg');

background-size: cover;

--background-color: transparent;

--custom-bg: rgba(0, 0, 0, 0.5);

}

Screenshot 2025-12-02 at 00.22.57.png

Edited by Lard

  • 2 months later...

Really clean and nice! One issues I have when using the provided example.css: the buttons in the Action Centre are not correctly displayed. Select all on page is hidden, if you click on the empty space where it should be located it appears but then the other two buttons disappear. I don't know CSS, so I have no idea how to fix it.

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.