custom.css.plg

<?xml version='1.0' standalone='yes'?>
<!DOCTYPE PLUGIN [
<!ENTITY name      "custom.css">
<!ENTITY author    "Wu23333">
<!ENTITY version   "2025.11.29a">
<!ENTITY launch    "Settings/CustomCSS">
<!ENTITY pluginURL "https://github.com/WuSiYu/unraid-custom-css/raw/refs/heads/master/custom.css.plg">
]>
<PLUGIN name="&name;" author="&author;" version="&version;" launch="&launch;" pluginURL="&pluginURL;" min="6.12" icon="fa-code" support="https://forums.unraid.net/topic/195276-plugin-simple-custom-webui-css-plugin-for-unraid-72/">

<CHANGES>
## 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.
</CHANGES>

<FILE Run="/bin/bash">
<INLINE>
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 &amp;&amp; mv /boot/config/plugins/&name;/settings.cfg /boot/config/plugins/&name;/custom.css.cfg

exit 0
</INLINE>
</FILE>

<FILE Name="/usr/local/emhttp/plugins/&name;/README.md">
<INLINE>
<![CDATA[
**Custom WebUI CSS**

A simple plugin for injecting custom CSS into the Unraid WebUI. Supports additional CSS for the Black theme and synchronization of additional asset files (such as background images).
]]>
</INLINE>
</FILE>

<FILE Name="/usr/local/emhttp/plugins/&name;/CustomCSS.page">
<INLINE>
<![CDATA[
Menu="Utilities"
Title="Custom WebUI CSS"
Icon="code"
---
<?php
// --- CONFIGURATION PATHS ---
$css_path = "/boot/config/plugins/custom.css/style.css";
$css_black_path = "/boot/config/plugins/custom.css/style-black.css";
$cfg_path = "/boot/config/plugins/custom.css/custom.css.cfg";
$assets_source = "/boot/config/plugins/custom.css/assets";
$assets_target = "/usr/local/emhttp/plugins/custom.css/";
$msg = "";

// --- HANDLE SUBMISSION ---
require_once "$docroot/plugins/dynamix/include/Wrappers.php";

if ($_POST) {
    if (isset($_POST['SAVE_CONFIG'])) {
        // 1. Handle Enable/Disable Logic
        $service_state = $_POST['SERVICE'] ?? "disabled";
        // Only allow "enabled" or "disabled" values
        if (!in_array($service_state, ["enabled", "disabled"])) {
            $service_state = "disabled";
        }
        file_put_contents($cfg_path, 'SERVICE="' . $service_state . '"');

        // 2. Handle CSS Save Logic (Main)
        if (isset($_POST['custom_css'])) {
            file_put_contents($css_path, $_POST['custom_css']);
            shell_exec("cp " . escapeshellarg($css_path) . " /usr/local/emhttp/plugins/custom.css/style.css");
        }

        // 3. Handle CSS Save Logic (Black Theme)
        if (isset($_POST['custom_css_black'])) {
            file_put_contents($css_black_path, $_POST['custom_css_black']);
            shell_exec("cp " . escapeshellarg($css_black_path) . " /usr/local/emhttp/plugins/custom.css/style-black.css");
        }
        $msg = "Settings Saved. Reload browser to see changes.";
    }

    // 4. Handle Assets Sync Logic (Optional)
    if (isset($_POST['SYNC_ASSETS'])) {
        if (is_dir($assets_source)) {
            shell_exec("rm -rf " . escapeshellarg($assets_target) . "assets");
            shell_exec("cp -r " . escapeshellarg($assets_source) . " " . escapeshellarg($assets_target));
            $size = trim(shell_exec("du -sh " . escapeshellarg($assets_target) . "assets | cut -f1"));
            $msg = "Assets synced successfully (Flash drive -> 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 = "<i>empty</i>";
} else {
    $assets_size = "<strong>$assets_size</strong>";
}

?>

<div markdown="1">
<?php if ($msg): ?>
<span class="green"><?= $msg ?></span>
<?php endif; ?>
</div>

<form markdown="1" method="POST" action="/Settings/CustomCSS">

Enable Custom CSS:
: <select name="SERVICE" size="1">
    <?=mk_option($service_status, "enabled", "Yes");?>
    <?=mk_option($service_status, "disabled", "No");?>
  </select>

_(Global CSS)_:
: <textarea name="custom_css" spellcheck="false" style="font-family: monospace; max-width: 800px; height: 75vh; background: #111; color: #eee; border: 1px solid #444; padding: 10px;"><?= htmlspecialchars($current_css) ?></textarea>

_(Additional CSS for Black Theme)_:
: <textarea name="custom_css_black" spellcheck="false" style="font-family: monospace; max-width: 800px; height: 30vh; background: #111; color: #eee; border: 1px solid #444; padding: 10px;"><?= htmlspecialchars($current_css_black) ?></textarea>
  <span>Only loaded when <a href="/Settings/DisplaySettings#:~:text=Dynamix%20color%20theme%3A" target="_blank">Settings > Display > Dynamix color theme</a> is set to "Black".</span>

&nbsp;
: <span class="buttons-spaced">
    <input type="submit" name="SAVE_CONFIG" value="_(Apply)_" disabled>
    <input type="button" value="_(Done)_" onclick="done()">
  </span>

&nbsp;
: <span class="description" style="max-width: 500px; margin: 0; padding: 15px; background: rgba(0,0,0,0.1); border-radius: 6px;">
    <strong>Unraid CSS Variables:</strong><br/>
    e.g. <code>var(--background-color)</code>, <code>var(--text-color)</code>, <code>var(--button-text-color)</code>, <code>var(--red-500)</code><br/>
    <br/>
    You can override these variables to change the overall colors:<br/>
    <code>:root { --background-color: #f6f9ff; }</code><br/>
    You can also leverage them when styling elements:<br/>
    <code>div.title { border-bottom: 2px solid var(--text-color); }</code><br/>
    <br/>
    Visit <a href="/webGui/styles/themes/white.css" target="_blank">white.css</a> or <a href="/webGui/styles/themes/black.css" target="_blank">black.css</a> to explore more CSS variables used in Unraid.<br/>
  </span>

&nbsp;

_(Additional Assets Folder)_:
: <span class="buttons-spaced">
    <input type="submit" name="SYNC_ASSETS" value="Sync Now">
  </span>
  <span>
    Current size: <?= $assets_size ?><br/>
    You can upload additional custom assets (images, fonts, etc.) in the config folder: <br/>
    <a href="/Main/Browse?dir=%2Fboot%2Fconfig%2Fplugins%2Fcustom.css%2Fassets" target="_blank"><code>/boot/config/plugins/custom.css/assets/</code></a><br/>
    These files will be copied to a web-accessible assets folder on boot, <br/>
    or sync manually using the button above after making changes.<br/>
    <br/>
    Usage in CSS: <br/>
    <code>background-image: url('/plugins/custom.css/assets/bg.jpg');</code>
  </span>
</form>

]]>
</INLINE>
</FILE>

<FILE Name="/usr/local/emhttp/plugins/&name;/CustomCSS_Loader.page">
<INLINE>
<![CDATA[
Menu="Buttons:100"
Link="nav-user"
---
<?php
require_once "$docroot/plugins/dynamix/include/Wrappers.php";

// Define the file paths
$web_css = '/plugins/custom.css/style.css';
$local_css = '/usr/local/emhttp/plugins/custom.css/style.css';

$web_black_css = '/plugins/custom.css/style-black.css';
$local_black_css = '/usr/local/emhttp/plugins/custom.css/style-black.css';

$cfg_path = '/boot/config/plugins/custom.css/custom.css.cfg';
$unraid_theme_cfg = '/boot/config/plugins/dynamix/dynamix.cfg';

// Logic: Check if files exist AND plugin is enabled
$settings = parse_plugin_cfg("custom.css");

if (($settings['SERVICE'] ?? "disabled") === "enabled") {
    // 1. Load Global CSS
    if (file_exists($local_css)) {
        $ver = filemtime($local_css);
        ?>
        <link rel="stylesheet" type="text/css" href="<?=$web_css?>?v=<?=$ver?>">
        <?php
    }

    // 2. Load Black Theme CSS (only if current theme is 'black')
    $current_theme = @parse_ini_file($unraid_theme_cfg)['theme'] ?? 'white';
    if ($current_theme === 'black' && file_exists($local_black_css)) {
        $ver_black = filemtime($local_black_css);
        ?>
        <link rel="stylesheet" type="text/css" href="<?=$web_black_css?>?v=<?=$ver_black?>">
        <?php
    }
}
?>
]]>
</INLINE>
</FILE>

<FILE Run="/bin/bash">
<INLINE>
# 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
</INLINE>
</FILE>

<FILE Run="/bin/bash" Method="remove">
<INLINE>
rm -rf /usr/local/emhttp/plugins/&name;
rm -rf /boot/config/plugins/&name;

exit 0
</INLINE>
</FILE>

</PLUGIN>