]> ## Custom WebUI CSS ## 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 - Initial release. rm -rf /usr/local/emhttp/plugins/&name; mkdir -p /usr/local/emhttp/plugins/&name; mkdir -p /boot/config/plugins/&name; # migrate settings.cfg to custom.css.cfg test -f /boot/config/plugins/&name;/settings.cfg && mv /boot/config/plugins/&name;/settings.cfg /boot/config/plugins/&name;/custom.css.cfg exit 0 Web), size: $size."; } else { $msg = "Assets folder not found on Flash drive, created an empty one."; } } } // --- INITIALIZATION --- // Create Main CSS file if missing if (!file_exists($css_path)) { $def = "/* Custom CSS (Global) */\n:root {\n /* --text-color: var(--blue-900); */\n}\n"; file_put_contents($css_path, $def); shell_exec("cp " . escapeshellarg($css_path) . " /usr/local/emhttp/plugins/custom.css/style.css"); } // Create Black Theme CSS file if missing if (!file_exists($css_black_path)) { $def_black = "/* Additional CSS (Black Theme Only) */\n:root {\n /* --background-color: var(--gray-700); */\n}\n"; file_put_contents($css_black_path, $def_black); shell_exec("cp " . escapeshellarg($css_black_path) . " /usr/local/emhttp/plugins/custom.css/style-black.css"); } // Create assets directory if missing if (!is_dir($assets_source)) { mkdir($assets_source, 0755, true); shell_exec("rm -rf " . escapeshellarg($assets_target) . "assets"); shell_exec("cp -r " . escapeshellarg($assets_source) . " " . escapeshellarg($assets_target)); } // Create assets directory in webroot if missing if (!is_dir($assets_target . "assets")) { shell_exec("rm -rf " . escapeshellarg($assets_target) . "assets"); shell_exec("cp -r " . escapeshellarg($assets_source) . " " . escapeshellarg($assets_target)); } // Create Config file if missing if (!file_exists($cfg_path)) { file_put_contents($cfg_path, 'SERVICE="disabled"'); } // Read current values $current_css = file_get_contents($css_path); $current_css_black = file_get_contents($css_black_path); $settings = parse_plugin_cfg("custom.css"); $service_status = $settings['SERVICE'] ?? "enabled"; $assets_size = trim(shell_exec("du -sh " . escapeshellarg($assets_target) . "assets | cut -f1")); if ($assets_size == "0") { $assets_size = "empty"; } else { $assets_size = "$assets_size"; } ?>

Enable Custom CSS: : _(Global CSS)_: : _(Additional CSS for Black Theme)_: : Only loaded when Settings > Display > Dynamix color theme is set to "Black". : : Unraid CSS Variables:
e.g. var(--background-color), var(--text-color), var(--button-text-color), var(--red-500)

You can override these variables to change the overall colors:
:root { --background-color: #f6f9ff; }
You can also leverage them when styling elements:
div.title { border-bottom: 2px solid var(--text-color); }

Visit white.css or black.css to explore more CSS variables used in Unraid.
_(Additional Assets Folder)_: : Current size:
You can upload additional custom assets (images, fonts, etc.) in the config folder:
/boot/config/plugins/custom.css/assets/
These files will be copied to a web-accessible assets folder on boot,
or sync manually using the button above after making changes.

Usage in CSS:
background-image: url('/plugins/custom.css/assets/bg.jpg');

]]> ]]> # Create default global css file if missing if [ ! -f /boot/config/plugins/&name;/style.css ]; then echo -e "/* Custom CSS (Global) */\n:root {\n /* --text-color: var(--blue-900); */\n}" > /boot/config/plugins/&name;/style.css fi # Create default black theme css file if missing if [ ! -f /boot/config/plugins/&name;/style-black.css ]; then echo -e "/* Additional CSS (Black Theme Only) */\n:root {\n /* --background-color: var(--gray-700); */\n}" > /boot/config/plugins/&name;/style-black.css fi # Create default settings file if missing (Default to Enabled) if [ ! -f /boot/config/plugins/&name;/custom.css.cfg ]; then echo 'SERVICE="disabled"' > /boot/config/plugins/&name;/custom.css.cfg fi # Create assets directory if missing if [ ! -d /boot/config/plugins/&name;/assets ]; then mkdir -p /boot/config/plugins/&name;/assets fi # Copy Custom CSS files in flash storage to webroot so Nginx can serve the CSS cp /boot/config/plugins/&name;/style.css /usr/local/emhttp/plugins/&name;/style.css cp /boot/config/plugins/&name;/style-black.css /usr/local/emhttp/plugins/&name;/style-black.css cp -rf /boot/config/plugins/&name;/assets /usr/local/emhttp/plugins/&name;/ echo "----------------------------------------------------" echo " &name; installed." echo " Go to Settings > Utilities > Custom WebUI CSS" echo "----------------------------------------------------" exit 0 rm -rf /usr/local/emhttp/plugins/&name; rm -rf /boot/config/plugins/&name; exit 0