Skip to main content

Admin Theme

The Admin Panel is built with django-unfold, a modern theme based on Tailwind CSS. You can customize the look and navigation structure directly in the settings.py file.

Color Scheme​

You can change the primary color palette of the admin dashboard. This is useful if you want the backend to match your brand colors.

Open triviaflow/settings.py and look for the UNFOLD dictionary:

UNFOLD = {
    "SITE_TITLE": "My Custom Quiz Admin",
    "SITE_HEADER": "Quiz Dashboard",
    # ...
    "COLORS": {
        "primary": {
            "50": "250 245 255",
            "100": "243 232 255",
            "500": "168 85 247",  # Main Button Color
            "600": "147 51 234",   # Hover State
            "900": "88 28 135",
        },
    },
}

The colors must be provided in the Tailwind 50-900 scale format.

The sidebar items and their icons are also defined here. You can rearrange them or hide specific apps.

"SIDEBAR": {
    "show_search": True,
    "show_all_applications": True,
    "navigation": [
        {
            "title": "Game Management",
            "separator": True,
            "items": [
                {
                    "title": "Quizzes",
                    "icon": "school",  # Material Symbol Name
                    "link": reverse_lazy("admin:quiz_quiz_changelist"),
                },
                # ...
            ],
        },
    ],
}

Advanced CSS Fixes​

If you need to apply deeper CSS changes to the admin panel (e.g., fixing input visibility in dark mode), you can edit the dedicated fix file:

triviaflow/quiz/static/quiz/css/admin_fixes.css

This file is automatically loaded by the QuizAdmin class.