I was able to override this by adding my own css style in allauth/layouts/base.html, but I'm also using daisy UI (with django-tailwind) in the rest of the app so the class names are the same.

A simple solution would be to have a separate html file that injects the base css, so that it would be possible to override just the partial.

# allauth/layouts/base.html
{# djlint:off H006 #}
{% load i18n %}
{% load allauth_ui %}

<!DOCTYPE html>
<html data-theme="{% allauth_ui_theme %}">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>
            {% block head_title %}
            {% endblock head_title %}
        </title>
        {% block extra_head %}
            {% include 'allauth/partial/extra_head.html' %}
        {% endblock extra_head %}
    </head>
    <body class="min-h-screen bg-base-300">
        {% block body %}
            {% if messages %}
                {% for message in messages %}
                    <div role="alert"
                         class="text-sm md:text-base alert alert-{{ message.tags }}">
                        <span><strong>{{ message }}</strong></span>
                    </div>
                {% endfor %}
            {% endif %}
            {% block content %}
            {% endblock content %}
        {% endblock body %}
        {% block extra_body %}
        {% endblock extra_body %}
    </body>
</html>

and in allauth/partials/extra_head.html

{% load static %}
<link rel="stylesheet" href="{% static 'allauth_ui/output.css' %}">

<!-- here your custom css style -->

Theme customization #128

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions