[data-bs-theme="blue"] {
    /* Dark color mode variables */

    /* Global colors */

    :root {
        --primary-text-emphasis-dark: #336699;
        --secondary-text-emphasis-dark: #5588aa;
        --success-text-emphasis-dark: #339933;
        --info-text-emphasis-dark: #66aadd;
        --warning-text-emphasis-dark: #ff9933;
        --danger-text-emphasis-dark: #ff3333;
        --light-text-emphasis-dark: #f8f9fa;
        --dark-text-emphasis-dark: #495057;

        --primary-bg-subtle-dark: #334466;
        --secondary-bg-subtle-dark: #556677;
        --success-bg-subtle-dark: #336633;
        --info-bg-subtle-dark: #6699aa;
        --warning-bg-subtle-dark: #ff9933;
        --danger-bg-subtle-dark: #cc3333;
        --light-bg-subtle-dark: #4e586d;
        --dark-bg-subtle-dark: #1a1a1a;

        --primary-border-subtle-dark: #334466;
        --secondary-border-subtle-dark: #556677;
        --success-border-subtle-dark: #336633;
        --info-border-subtle-dark: #6699aa;
        --warning-border-subtle-dark: #ff9933;
        --danger-border-subtle-dark: #cc3333;
        --light-border-subtle-dark: #2c313f;
        --dark-border-subtle-dark: #4e586d;

        --body-color-dark: #495057;
        --body-bg-dark: #222222;
        --body-secondary-color-dark: rgba(73, 80, 87, 0.75);
        --body-secondary-bg-dark: #333333;
        --body-tertiary-color-dark: rgba(73, 80, 87, 0.5);
        --body-tertiary-bg-dark: #555555;
        --body-emphasis-color-dark: #ffffff;
        --border-color-dark: #2c313f;
        --border-color-translucent-dark: rgba(255, 255, 255, 0.15);
        --headings-color-dark: inherit;
        --link-color-dark: #336699;
        --link-hover-color-dark: #004266;
        --code-color-dark: #336699;
        --mark-color-dark: #495057;
        --mark-bg-dark: #ffee00;
    }

    /* Forms */

    :root {
        --form-select-indicator-color-dark: #495057;
        --form-switch-color-dark: rgba(255, 255, 255, 0.25);
    }

    /* Accordion */

    :root {
        --accordion-icon-color-dark: #336699;
        --accordion-icon-active-color-dark: #336699;
    }

    --bs-body-color: var(--bs-white);
    --bs-body-color-rgb: #{to-rgb($white)};
    --bs-body-bg: var(--bs-blue);
    --bs-body-bg-rgb: #{to-rgb($blue)};
    --bs-tertiary-bg: #{$blue-600};

    .dropdown-menu {
        --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
        --bs-dropdown-link-active-bg: #{$blue-700};
    }

    .btn-secondary {
        --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
        --bs-btn-border-color: #{rgba($white, .25)};
        --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
        --bs-btn-hover-border-color: #{rgba($white, .25)};
        --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
        --bs-btn-active-border-color: #{rgba($white, .5)};
        --bs-btn-focus-border-color: #{rgba($white, .5)};
        --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
    }

}