/* Purple Theme: */
:root.purple-theme {
    --main-color: #754ffe;
    --accent-color: #f6eeff;
    --main-color-opaque: rgb(117, 79, 254, 80%);
    --scrollbar-color: var(--main-color-opaque);
}

/* Blue theme:  */
:root.blue-theme {
    --main-color: #4f89fe;
    --accent-color: #eef6ff;
    --main-color-opaque: rgb(104, 154, 254, 80%);
    --scrollbar-color: var(--main-color-opaque);
}

/* Green theme: */
:root.green-theme {
    --main-color: #4fbe6b;
    --accent-color: #eef9f3;
    --main-color-opaque: rgba(79, 190, 107, 0.8);
    --scrollbar-color: var(--main-color-opaque);
}

/* Teal theme: */
:root.teal-theme {
    --main-color: #4fbeb8;
    --accent-color: #eef9f9;
    --main-color-opaque: rgba(79, 190, 184, 0.8);
    --scrollbar-color: var(--main-color-opaque);
}

/* Orange theme: */
:root.orange-theme {
    --main-color: #fea04f;
    --accent-color: #fff5ee;
    --main-color-opaque: rgba(254, 160, 79, 0.8);
    --scrollbar-color: var(--main-color-opaque);
}

/* Amber theme: */
:root.amber-theme {
    --main-color: #f4c14f;
    --accent-color: #fff9ee;
    --main-color-opaque: rgba(244, 193, 79, 0.8);
    --scrollbar-color: var(--main-color-opaque);
}

/* Rose theme: */
:root.rose-theme {
    --main-color: #fe6b9c;
    --accent-color: #fff0f5;
    --main-color-opaque: rgba(254, 107, 156, 0.8);
    --scrollbar-color: var(--main-color-opaque);
}

/* Red theme: */
:root.red-theme {
    --main-color: #e45a5a;
    --accent-color: #ffefef;
    --main-color-opaque: rgba(228, 90, 90, 0.8);
    --scrollbar-color: var(--main-color-opaque);
}

/* Slate theme: */
:root.slate-theme {
    --main-color: #5f6d82;
    --accent-color: #f2f5fa;
    --main-color-opaque: rgba(95, 109, 130, 0.8);
    --scrollbar-color: var(--main-color-opaque);
}