Jellypane offline theme

[LadyZero]

Thanks to Ted Hinklater for creating the theme.

Code:

#!/bin/bash

# Set variables
THEME_DIR="/usr/share/jellyfin/web/themes/jellypane"
FONT_URL="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap"
FONT_DIR="$THEME_DIR/fonts"
LOCAL_FONT_CSS="$THEME_DIR/fonts.css"
MAIN_CSS="$THEME_DIR/jellypane.css"
GITHUB_RAW="https://raw.githubusercontent.com/tedhinklater/Jellypane/refs/heads/main/Jellypane.css"

# Function to download and process fonts
download_fonts() {
    sudo mkdir -p "$FONT_DIR"
    sudo curl -s "$FONT_URL" | sudo tee "$LOCAL_FONT_CSS" > /dev/null

    # Download ALL font files from the CSS
    sudo grep -oP "https://fonts\.gstatic\.com/s/titilliumweb/v17/[^\s)]*\.ttf" "$LOCAL_FONT_CSS" | while read -r font_url; do
        font_file=$(basename "$font_url")
        sudo curl -s "$font_url" -o "$FONT_DIR/$font_file"
        echo "Downloaded: $font_file"
    done

    # Replace ALL Google font URLs with local paths
    sudo sed -i 's|https://fonts\.gstatic\.com/s/Titillium/v17/|/web/themes/jellypane/fonts/|g' "$LOCAL_FONT_CSS"
}

# Function to update theme CSS files
update_theme_css() {
    sudo wget -O "$MAIN_CSS" "$GITHUB_RAW"
   
            echo "Failed to download: $image"
   
    # Replace Google Fonts link with local fonts.css
    sudo sed -i 's|https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap|/web/themes/jellypane/fonts.css?itillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700|g' "$MAIN_CSS"
   
    # Update the first line to use local fonts.css
    sudo sed -i '1s|@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap");|@import url("/web/themes/jellypane/fonts.css?itillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700");|' "$MAIN_CSS"
   
    # Replace remaining https://fonts.gstatic.com URLs
    sudo sed -i 's|https://fonts.gstatic.com/s/titilliumweb/v17/|/web/themes/jellypane/fonts/|g' "$MAIN_CSS"
   
    echo -e "\n/* Imports */\n@import url('/web/themes/jellypane/fonts.css?itillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700');\n@import url('/web/themes/jellypane/idk.css');\n@import url('/web/themes/jellypane/theme.css');" | sudo tee -a "$MAIN_CSS" > /dev/null
}

# Function to check and update files
check_and_update_files() {
    echo "Checking and updating files..."
   
    # Update fonts.css
    if [ -f "$LOCAL_FONT_CSS" ]; then
        sudo sed -i 's|https://fonts.gstatic.com/s/titilliumweb/v17/|/web/themes/jellypane/fonts/|g' "$LOCAL_FONT_CSS"
        echo "Updated fonts.css"
    fi
   
    # Update main CSS file
    if [ -f "$MAIN_CSS" ]; then
        sudo sed -i 's|https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap|/web/themes/jellypane/fonts.css?itillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700|g' "$MAIN_CSS"
        sudo sed -i '1s|@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap");|@import url("/web/themes/jellypane/fonts.css?itillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700");|' "$MAIN_CSS"
        sudo sed -i 's|https://fonts.gstatic.com/s/titilliumweb/v17/|/web/themes/jellypane/fonts/|g' "$MAIN_CSS"
        echo "Updated main CSS file"
    fi
   
    # Self-check
    echo "Performing self-check..."
    local issues_found=false
   
    # Check fonts.css
    if [ -f "$LOCAL_FONT_CSS" ]; then
        if grep -q "https://fonts.gstatic.com/s/titilliumweb/v17/" "$LOCAL_FONT_CSS"; then
            echo "WARNING: fonts.css still contains references to Google Fonts."
            issues_found=true
        fi
    else
        echo "WARNING: fonts.css file not found."
        issues_found=true
    fi
   
    # Check main CSS file
    if [ -f "$MAIN_CSS" ]; then
        if grep -q "https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap" "$MAIN_CSS"; then
            echo "WARNING: Main CSS file still contains references to Google Fonts CSS."
            issues_found=true
        fi
        if grep -q "https://fonts.gstatic.com/s/titilliumweb/v17/" "$MAIN_CSS"; then
            echo "WARNING: Main CSS file still contains references to Google Fonts."
            issues_found=true
        fi
    else
        echo "WARNING: Main CSS file not found."
        issues_found=true
    fi
   
    if [ "$issues_found" = false ]; then
        echo "Self-check completed. All files appear to be correctly updated."
    else
        echo "Self-check completed. Some issues were found. Please review the warnings above."
    fi
}

# Main menu
echo "jellypane Theme Installer/Updater"
echo "1. Full Install"
echo "2. Update Fonts Only"
echo "3. Update Theme CSS Files Only"
echo "4. Check and Update Files"
echo "Please enter your choice (1-4):"
read choice

case $choice in
    1)
        echo "You're about to perform a full install. This will download all theme files and fonts."
        read -p "Do you want to continue? (y/n): " confirm
        if [[ $confirm == [Yy]* ]]; then
            echo "Performing full install..."
            sudo mkdir -p "$THEME_DIR"
            download_fonts
            update_theme_css
            check_and_update_files
        else
            echo "Operation cancelled."
        fi
        ;;
    2)
        echo "You're about to update fonts only. This will download all font files."
        read -p "Do you want to continue? (y/n): " confirm
        if [[ $confirm == [Yy]* ]]; then
            echo "Updating fonts only..."
            download_fonts
            check_and_update_files
        else
            echo "Operation cancelled."
        fi
        ;;
    3)
        echo "You're about to update theme CSS files only. This will download all theme files."
        read -p "Do you want to continue? (y/n): " confirm
        if [[ $confirm == [Yy]* ]]; then
            echo "Updating theme CSS files only..."
            update_theme_css
            check_and_update_files
        else
            echo "Operation cancelled."
        fi
        ;;
    4)
        echo "You're about to check and update all files."
        read -p "Do you want to continue? (y/n): " confirm
        if [[ $confirm == [Yy]* ]]; then
            check_and_update_files
        else
            echo "Operation cancelled."
        fi
        ;;
    *)
        echo "Invalid choice. Exiting."
        exit 1
        ;;
esac

# Set permissions
sudo chown -R jellyfin:jellyfin "$THEME_DIR"
sudo chmod -R 755 "$THEME_DIR"

echo "Operation completed."
echo "Please add the following line to Jellyfin's Custom CSS:"
echo "@import url(\"/web/themes/jellypane/jellypane.css\");"

Paste code into a text file and save as jellypane.sh, mark it as executable then in a command terminal

Code:

bash jellypane.sh

[JellyHunter]

Thanks for sharing!