/* Toggle button in the navbar. */
#btn-theme-toggle {
    color: rgba(255, 255, 255, .5);
    cursor: pointer;
    line-height: 1;
    padding: .5rem;
}

#btn-theme-toggle:hover {
    color: rgba(255, 255, 255, .75);
}

/* CSS custom properties for dark mode. */
[data-theme="dark"] {
    --bg-body: #121212;
    --text-body: #e0e0e0;
    --code-color: #e0e0e0;
    --link-color: #6ea8fe;
    --muted-color: #aaa;
}

[data-theme="dark"] body {
    background-color: var(--bg-body);
    color: var(--text-body);
}

[data-theme="dark"] a:not(
    .nav-link,
    .navbar-brand,
    .dropdown-item,
    .btn
) {
    color: var(--link-color);
}

[data-theme="dark"] div.source {
    filter: invert(1);
}

[data-theme="dark"] code {
    color: var(--code-color);
}

[data-theme="dark"] .text-muted {
    color: var(--muted-color);
}

[data-theme="dark"] .dropdown-menu {
    background-color: #1e1e1e;
    border-color: #333;
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-body);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: #333;
    color: #fff;
}

[data-theme="dark"] .btn-outline-primary {
    color: var(--link-color);
    border-color: var(--link-color);
}

[data-theme="dark"] .btn-outline-primary:hover {
    color: #000;
    background-color: var(--link-color);
    border-color: var(--link-color);
}

[data-theme="dark"] .page-link {
    color: var(--link-color);
    background-color: #1e1e1e;
    border-color: #333;
}

[data-theme="dark"] .page-link:hover {
    color: #fff;
    background-color: #333;
    border-color: #333;
}

[data-theme="dark"] .page-item.active .page-link {
    color: #000;
    background-color: var(--link-color);
    border-color: var(--link-color);
}

[data-theme="dark"] .page-item.disabled .page-link {
    color: #666;
    background-color: #1e1e1e;
    border-color: #333;
}