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

    // Hex color values
    // ----------------
    --blue: #387592;
    --blue-rgb: 56, 117, 146;
    --dark-blue: #397491;
    --dark-green: #1e9652;
    --red: #d24e2b;
    --red-rgb: 210, 78, 43;
    --gray: #818479;
    --green: #3aa569;
    --green-rgb: 58, 165, 105;
    --light-blue: #578ea9;
    --light-blue-rgb: 87, 142, 169;
    --lighter-blue: #eff4f7;
    --orange: #e7a151;
    --orange-rgb: 231, 161, 81;
    --redder-orange: #e77051;

    // Base variables
    // --------------
    --foreground-color: #666;
    --background-color: #efefef;
    --background-color-rgb: 102, 102, 102;

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

    // Bootstrap variables
    --primary-color: var(--blue) !important;
    --primary-rgb: var(--blue-rgb);
    --secondary-color: var(--light-blue) !important;
    --secondary-rgb: var(--light-blue-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(--light-blue);
    --info-color-rgb: var(--light-blue-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: var(--background-color);
    --converse-body-color: var(--foreground-color) !important;
    --converse-highlight-color: var(--red);
    .navbar-nav {
        --converse-nav-link-color: var(--link-color) !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;
    }
    .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: gray;
    --chat-status-online: var(--green);

    --controlbox-color: var(--light-blue);
    --disabled-color: gray;
    --error-color: var(--red);
    --focus-color: var(--light-blue);
    --heading-color: var(--background-color);
    --headlines-color: var(--orange);
    --link-color: #2D3991;
    --subdued-color: gray;

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

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

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

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

    // Derived colors
    // --------------
    --brand-heading-color: var(--blue);
    --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(--dark-blue);
    --secondary-color-hover: #ddd;
    --success-color-hover: var(--success);
    --warning-color-hover: #d2842b;
}