.dark-mode-icon-moon { display: block; }
.dark-mode-icon-sun { display: none; }
.dark-mode .dark-mode-icon-moon { display: none; }
.dark-mode .dark-mode-icon-sun { display: block; }

.dark-mode {
    --hde-ink: #ffffff;
    --hde-body-bg: #0f0f0f;
    --hde-card-bg: #151515;
    --hde-border: #2f2f2f;
    --hde-muted: #a1a1a1;

    --color-darkgrey: #f0f0f0;
    --color-midgrey: #a1a1a1;
    --color-lightgrey: #2a2a2a;
    --color-secondary-text: #979797;
    --color-border: #2a2a2a;
    --color-wash: #1a1a1a;
}

.dark-mode .gh-content pre {
    background: #08090a;
}

.dark-mode .hde-subscribe-btn {
    background: var(--ghost-accent-color);
    color: var(--hde-ink);   
}

.dark-mode .hde-avatar-fallback {
    background: var(--hde-border);
}

.dark-mode img,
.dark-mode video {
    filter: none;
}

.dark-mode .hde-footer {
    color: var(--color-midgrey);
}

.dark-mode .gh-post-upgrade-cta .gh-btn {
    color: var(--hde-ink) !important;
}

.dark-mode .demo-purchase-btn {
    color: var(--hde-ink);
}

#dark-mode-toggle {
    width: 4rem;
}

#dark-mode-toggle svg {
    height: 1.5rem;
    width: 1.5rem;
}

#dark-mode-toggle svg path,
#dark-mode-toggle svg circle {
    stroke-width: 1.5;
}