Wagtail管理后台页面颜色自定义方法咨询（新手向）

Hey there! As someone who’s tinkered with Wagtail and Django admin customization, I totally get the frustration of digging through huge core CSS files—total time drain. Let me show you a way simpler method to tweak the Wagtail admin colors without touching those core files at all:

First, set up a place for your custom styles in your Django app:

• Make a static file directory if you don’t have one already: your_app/static/your_app/css/ (replace your_app with your actual app name)
• Inside that folder, create a file named admin_custom.css
• Instead of hunting for specific selectors in core.css, use Wagtail’s built-in CSS variables! These are pre-defined theme colors that control the entire admin look. Here’s an example of overriding the main brand colors:

/* Override core Wagtail color variables */
:root {
    /* Primary brand color (replace with your preferred hex code) */
    --w-color-primary: #2563eb;
    --w-color-primary-hover: #1d4ed8;
    --w-color-primary-lighter: #dbeafe;
    
    /* Sidebar styling */
    --w-color-sidebar-background: #f8fafc;
    --w-color-sidebar-text: #1e293b;
    
    /* Header bar */
    --w-color-header-background: var(--w-color-primary);
}

/* Optional: Tweak specific elements if needed */
.w-admin-title {
    color: #ffffff; /* Make admin title white if you darken the header */
}

Next, you need to hook your CSS into the Wagtail admin:

• If your app doesn’t have a wagtail_hooks.py file, create one in your app’s root directory
• Add this code to register your custom stylesheet:

from django.utils.html import format_html
from django.templatetags.static import static
from wagtail import hooks

@hooks.register('insert_global_admin_css')
def insert_custom_admin_css():
    # Link to your custom CSS file
    return format_html(
        '<link rel="stylesheet" href="{}">',
        static('your_app/css/admin_custom.css')
    )

• Run python manage.py collectstatic (required for production; development might work without it, but it’s good practice)
• Restart your Django server, then refresh the Wagtail admin page—you’ll see your new color scheme right away!

Pro tip: To find all available Wagtail color variables, open your browser’s developer tools (F12), inspect the root <html> element, and look at the :root styles. You’ll see every theme variable you can override, no core CSS digging required.

内容的提问来源于stack exchange，提问作者Sidnetopia