@mixin darkmodeColors {
    --hy-font-color-white: hsl(0, 0%, 80%);
    --hy-font-color-black: hsl(0, 0%, 20%);
    --hy-font-color-gray: hsl(208, 7%, 46%);

    --hy-font-color-contrast: var(--hy-font-color-white); // Default in dark theme => "Contrast" to the background color
    --hy-font-color-match: var(--hy-font-color-black);

    // General
    --hy-body-bg-color: hsl(240, 9%, 5%);
    --hy-accent-color: var(--hy-color-blue);
    --hy-loader-ring-bg-color: hsl(0, 0%, 20%);

    // Theme Colors
    // NOTE: colors are defined by brand theme
    --hy-color-gray-1: hsl(210, 9%, 31%);
    --hy-color-gray-2: hsl(210, 10%, 23%);
    --hy-color-gray-3: hsl(207, 11%, 9%);

    // Sections: Colors
    --hy-section-shadow-color: hsla(0, 0%, 3%, 0.5);
    --hy-section-bg-color: hsl(210, 11%, 11%);

    // Element: Others
    --hy-element-shadow-color: hsla(0, 0%, 0%, 0.4);
    --hy-element-border-secondary-color: hsl(210, 11%, 23%);
    --hy-section-divider-color: hsl(0, 0%, 27%);
    --hy-gray-tabbar-bg-color: var(--hy-color-gray-3);
    --hy-gray-tabbar-ghost-color: var(--hy-color-gray-2);

    // Variants: colors for "primary" variant
    --hy-variant-primary-bg-color: var(--hy-accent-color); // TODO: is this needed?
    --hy-variant-primary-hover-color: var(--hy-accent-hover-color);

    // Variants: colors for "secondary" variant
    --hy-variant-secondary-font-color: var(--hy-font-color-contrast);
    --hy-variant-secondary-bg-color: var(--hy-section-bg-color);
    --hy-variant-secondary-hover-color: hsl(210, 11%, 10%);
    --hy-variant-secondary-border-color: var(--hy-element-border-secondary-color);
    --hy-variant-secondary-border-color-pressed: var(--hy-accent-color);

    // Variants: colors for "ghost" and "ghost-bg" variant
    --hy-variant-ghost-font-color: var(--hy-font-color-contrast);
    --hy-variant-ghost-bg-color: hsla(224, 9%, 30%, 0.15);
    --hy-variant-ghost-hover-color: hsla(224, 9%, 30%, 0.25);
    --hy-variant-ghost-border-color: var(--hy-accent-color);

    // Invalid / error states
    --hy-invalid-bg-color: hsla(0, 75%, 49%, 0.216);
    --hy-invalid-font-color: hsl(340, 82%, 49%);

    // Modal
    --hy-modal-bg-color: var(--hy-section-bg-color);
    --hy-modal-cover-color-mobile: hsla(0, 0%, 0%, 0.85);
    --hy-modal-cover-color-desktop: hsla(0, 0%, 0%, 0.85);
    --hy-modal-shadow-color: hsl(0, 0%, 0%);

    // Popover
    --hy-popover-shadow-color: hsla(0, 0%, 3%, 0.5);
    --hy-popover-bg-color-match: var(--hy-section-bg-color);
    --hy-popover-bg-color-contrast: white; // Lightmode section-bg-color
    --hy-popover-border-color-match: var(--hy-color-gray-1);
    --hy-popover-border-color-contrast: hsl(210, 14%, 89%); // Lightmode color-gray-1

    // Navigation
    --hy-tabbar-shadow-color: hsla(0, 0%, 0%, 0.6);
    --hy-sidebar-shadow-color: var(--hy-tabbar-shadow-color);
}