&[data-converse-theme='dracula'],
&[data-bs-theme='dracula'] {
    $theme: 'dracula' !default;

    // Hex color values
    // ----------------
    --cyan: #8be9fd;
    --green: #50fa7b;
    --green-rgb: 80, 250, 123;
    --orange: #ffb86c;
    --orange-rgb: 255, 184, 108;
    --pink: #ff79c6;
    --pink-rgb: 255, 121, 198;
    --purple: #bd93f9;
    --purple-rgb: 189, 147, 249;
    --red: #ff5555;
    --red-rgb: 255, 85, 85;
    --yellow: #f1fa8c;
    --yellow-rgb: 241, 250, 140;
    --gray: #6272a4;
    --darkgray: #212529;

    // Base variables
    // --------------
    --background-color: #282a36;
    --background-color-rgb: 40, 42, 54;
    --foreground-color: #f8f8f2;

    --chat-rgb: var(--green-rgb);
    --muc-rgb: var(--orange-rgb);

    // Bootstrap variables
    --primary-color: var(--pink) !important;
    --primary-rgb: var(--pink-rgb);
    --secondary-color: var(--purple) !important;
    --secondary-rgb: var(--purple-rgb);
    --success-color: var(--green);
    --success-color-rgb: var(--green-rgb);
    --danger-color: var(--red);
    --danger-color-rgb: var(--red-rgb);
    --warning-color: var(--orange);
    --info-color: var(--yellow);
    --info-color-rgb: var(--yellow-rgb);

    --converse-info: var(--info-color);
    --converse-info-rgb: var(--info-color-rgb);
    --converse-success: var(--success-color);
    --converse-success-rgb: var(--success-color-rgb);
    --converse-danger: var(--danger-color);
    --converse-danger-rgb: var(--danger-color-rgb);

    --converse-body-bg-rgb: var(--background-color-rgb);
    --converse-body-bg: var(--background-color);
    --converse-body-color: var(--foreground-color) !important;
    --converse-highlight-color: var(--yellow) !important;
    --converse-secondary-color: var(--secondary-color);
    .navbar-nav {
        --converse-nav-link-color: var(--link-color) !important;
        --converse-nav-link-hover-color: var(--link-color-hover) !important;
    }
    .popover {
        --converse-popover-header-color: var(--background-color) !important;
        --converse-popover-header-bg: var(--info-color) !important;
    }
    .modal {
        --converse-modal-color: var(--foreground-color) !important;
    }
    .list-group-item {
        --converse-list-group-color: var(--foreground-color);
        &.active {
            --converse-list-group-active-color: var(--background-color) !important;
        }
    }
    .toast {
        --converse-toast-color: var(--background-color);
        --converse-toast-bg: var(--secondary-color) !important;
    }

    // Online status indicators
    --chat-status-away: var(--orange);
    --chat-status-busy: var(--red);
    --chat-status-offline: var(--gray);
    --chat-status-online: var(--green);

    --controlbox-color: var(--purple);
    --disabled-color: var(--gray);
    --error-color: var(--red);
    --focus-color: var(--pink);
    --heading-color: var(--purple);
    --headlines-color: var(--pink);
    --link-color: var(--cyan);
    --subdued-color: var(--gray);

    // The background when selecting text with your mouse
    --selection-color: black;

    // Used to indicate selected or open items in lists.
    --highlight-color: var(--gray);
    --highlight-color-hover: var(--darkgray);

    // 1:1 Chat-related colors
    --chat-color: var(--green);
    --chat-header-fg-color: var(--chat-color);
    --chat-header-bg-color: var(--background-color);

    // MUC-related colors
    --muc-color: var(--orange);
    --muc-header-fg-color: var(--muc-color);
    --muc-header-bg-color: var(--background-color);

    // Derived colors
    // --------------
    --brand-heading-color: var(--cyan);
    --chat-color-hover: var(--chat-color);
    --danger-color-hover: var(--danger-color);
    --global-background-color: var(--background-color);
    --link-color-hover: var(--link-color);
    --muc-color-hover: var(--muc-color);
    --primary-color-hover: var(--purple);
    --secondary-color-hover: var(--secondary-color);
    --success-color-hover: var(--success);
    --warning-color-hover: var(--orange);
}