html[data-theme="dark"] {
    color-scheme: dark;

    --vp-background: #0f172a;
    --vp-surface: #111827;
    --vp-surface-alt: #1f2937;
    --vp-surface-hover: #243244;

    --vp-text: #e5e7eb;
    --vp-muted: #94a3b8;
    --vp-border: #334155;

    --vp-accent: #60a5fa;
    --vp-accent-hover: #3b82f6;

    --vp-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

    --vp-card-bg: #111827;
    --vp-card-bg-hover: #1f2937;
}

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

html[data-theme="dark"] .site,
html[data-theme="dark"] .site-main,
html[data-theme="dark"] .site-content {
    background: transparent;
    color: inherit;
}

/* Links */
html[data-theme="dark"] a {
    color: var(--vp-accent);
}

html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus {
    color: #93c5fd;
}

/* Header / navigation */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .vp-header,
html[data-theme="dark"] .main-header,
html[data-theme="dark"] .site-topbar {
    background: rgba(15, 23, 42, 0.92);
    color: var(--vp-text);
    border-bottom: 1px solid var(--vp-border);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .site-header a,
html[data-theme="dark"] .vp-header a,
html[data-theme="dark"] .main-navigation a,
html[data-theme="dark"] .primary-navigation a,
html[data-theme="dark"] .menu a {
    color: var(--vp-text);
}

html[data-theme="dark"] .site-header a:hover,
html[data-theme="dark"] .site-header a:focus,
html[data-theme="dark"] .main-navigation a:hover,
html[data-theme="dark"] .main-navigation a:focus,
html[data-theme="dark"] .primary-navigation a:hover,
html[data-theme="dark"] .primary-navigation a:focus {
    color: var(--vp-accent);
}

/* Dropdowns / menus */
html[data-theme="dark"] .vp-profile-menu,
html[data-theme="dark"] .vp-profile-dropdown,
html[data-theme="dark"] .sub-menu,
html[data-theme="dark"] .user-menu-dropdown,
html[data-theme="dark"] .menu-dropdown {
    background: var(--vp-surface);
    color: var(--vp-text);
    border: 1px solid var(--vp-border);
    box-shadow: var(--vp-shadow);
}

html[data-theme="dark"] .vp-profile-menu a,
html[data-theme="dark"] .vp-profile-dropdown a,
html[data-theme="dark"] .sub-menu a,
html[data-theme="dark"] .user-menu-dropdown a,
html[data-theme="dark"] .menu-dropdown a {
    color: var(--vp-text);
}

html[data-theme="dark"] .vp-profile-menu a:hover,
html[data-theme="dark"] .vp-profile-menu a:focus,
html[data-theme="dark"] .vp-profile-dropdown a:hover,
html[data-theme="dark"] .vp-profile-dropdown a:focus,
html[data-theme="dark"] .sub-menu a:hover,
html[data-theme="dark"] .sub-menu a:focus,
html[data-theme="dark"] .user-menu-dropdown a:hover,
html[data-theme="dark"] .user-menu-dropdown a:focus,
html[data-theme="dark"] .menu-dropdown a:hover,
html[data-theme="dark"] .menu-dropdown a:focus {
    background: var(--vp-surface-hover);
    color: var(--vp-accent);
}

html[data-theme="dark"] .vp-profile-menu__divider,
html[data-theme="dark"] .menu-item-divider,
html[data-theme="dark"] .sub-menu .divider {
    border-color: var(--vp-border);
}

/* Content surfaces */
html[data-theme="dark"] .card,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .entry-card,
html[data-theme="dark"] .archive-card,
html[data-theme="dark"] .site-sidebar .widget,
html[data-theme="dark"] .post,
html[data-theme="dark"] .page,
html[data-theme="dark"] .entry-content,
html[data-theme="dark"] .comments-area,
html[data-theme="dark"] .vp-box,
html[data-theme="dark"] .vp-panel {
    background: var(--vp-surface);
    color: var(--vp-text);
    border-color: var(--vp-border);
    box-shadow: var(--vp-shadow);
}

/* Headings / muted text */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: var(--vp-text);
}

html[data-theme="dark"] .entry-meta,
html[data-theme="dark"] .posted-on,
html[data-theme="dark"] .byline,
html[data-theme="dark"] .wp-caption-text,
html[data-theme="dark"] .widget p,
html[data-theme="dark"] .widget li,
html[data-theme="dark"] .site-description,
html[data-theme="dark"] .comment-metadata {
    color: var(--vp-muted);
}

/* Forms */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: #0b1220;
    color: var(--vp-text);
    border: 1px solid var(--vp-border);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--vp-muted);
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    outline: none;
    border-color: var(--vp-accent);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}

/* Buttons */
html[data-theme="dark"] button,
html[data-theme="dark"] .button,
html[data-theme="dark"] input[type="button"],
html[data-theme="dark"] input[type="reset"],
html[data-theme="dark"] input[type="submit"],
html[data-theme="dark"] .wp-element-button {
    border-color: var(--vp-border);
}

html[data-theme="dark"] .button:not(.vp-theme-switcher__button):not(.is-active),
html[data-theme="dark"] .wp-element-button,
html[data-theme="dark"] input[type="button"],
html[data-theme="dark"] input[type="reset"] {
    background: var(--vp-surface-alt);
    color: var(--vp-text);
}

html[data-theme="dark"] .button:not(.vp-theme-switcher__button):not(.is-active):hover,
html[data-theme="dark"] .wp-element-button:hover,
html[data-theme="dark"] input[type="button"]:hover,
html[data-theme="dark"] input[type="reset"]:hover {
    background: var(--vp-surface-hover);
    color: var(--vp-text);
}

/* Tables */
html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td {
    border-color: var(--vp-border);
}

html[data-theme="dark"] th {
    background: var(--vp-surface-alt);
    color: var(--vp-text);
}

html[data-theme="dark"] td {
    background: var(--vp-surface);
    color: var(--vp-text);
}

/* Footer */
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] footer {
    background: #0b1220;
    color: var(--vp-text);
    border-top: 1px solid var(--vp-border);
}

html[data-theme="dark"] .site-footer a,
html[data-theme="dark"] footer a {
    color: var(--vp-accent);
}

/* Overlay / mobile nav helpers */
html[data-theme="dark"] .vp-mobile-overlay,
html[data-theme="dark"] .menu-overlay,
html[data-theme="dark"] .site-overlay {
    background: rgba(2, 6, 23, 0.72);
}

/* Selection */
html[data-theme="dark"] ::selection {
    background: rgba(96, 165, 250, 0.35);
    color: #ffffff;
}

/* -----------------------------------------
   Dark mode fixes - navigation / dropdown / cards
----------------------------------------- */

/* Hoofdnavigatie actieve items */
html[data-theme="dark"] .main-navigation .current-menu-item>a,
html[data-theme="dark"] .main-navigation .current_page_item>a,
html[data-theme="dark"] .main-navigation .current-menu-ancestor>a,
html[data-theme="dark"] .primary-navigation .current-menu-item>a,
html[data-theme="dark"] .primary-navigation .current_page_item>a,
html[data-theme="dark"] .primary-navigation .current-menu-ancestor>a,
html[data-theme="dark"] .menu .current-menu-item>a,
html[data-theme="dark"] .menu .current_page_item>a,
html[data-theme="dark"] .menu .current-menu-ancestor>a {
    background: var(--vp-surface-alt);
    color: var(--vp-text);
    border-color: var(--vp-border);
}

html[data-theme="dark"] .main-navigation a:hover,
html[data-theme="dark"] .main-navigation a:focus,
html[data-theme="dark"] .primary-navigation a:hover,
html[data-theme="dark"] .primary-navigation a:focus,
html[data-theme="dark"] .menu a:hover,
html[data-theme="dark"] .menu a:focus {
    background: var(--vp-surface-hover);
    color: var(--vp-accent);
}

/* Profiel dropdown exact donker maken */
html[data-theme="dark"] .vp-profile-dropdown,
html[data-theme="dark"] .vp-profile-dropdown-menu,
html[data-theme="dark"] .vp-user-dropdown,
html[data-theme="dark"] .profile-dropdown,
html[data-theme="dark"] .user-dropdown-menu,
html[data-theme="dark"] .vp-profile-menu {
    background: #111827 !important;
    color: var(--vp-text) !important;
    border: 1px solid var(--vp-border) !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .vp-profile-dropdown a,
html[data-theme="dark"] .vp-profile-dropdown button,
html[data-theme="dark"] .vp-profile-dropdown-menu a,
html[data-theme="dark"] .vp-user-dropdown a,
html[data-theme="dark"] .profile-dropdown a,
html[data-theme="dark"] .user-dropdown-menu a,
html[data-theme="dark"] .vp-profile-menu a {
    color: var(--vp-text) !important;
}

html[data-theme="dark"] .vp-profile-dropdown a:hover,
html[data-theme="dark"] .vp-profile-dropdown a:focus,
html[data-theme="dark"] .vp-profile-dropdown-menu a:hover,
html[data-theme="dark"] .vp-profile-dropdown-menu a:focus,
html[data-theme="dark"] .vp-user-dropdown a:hover,
html[data-theme="dark"] .vp-user-dropdown a:focus,
html[data-theme="dark"] .profile-dropdown a:hover,
html[data-theme="dark"] .profile-dropdown a:focus,
html[data-theme="dark"] .user-dropdown-menu a:hover,
html[data-theme="dark"] .user-dropdown-menu a:focus,
html[data-theme="dark"] .vp-profile-menu a:hover,
html[data-theme="dark"] .vp-profile-menu a:focus {
    background: var(--vp-surface-hover) !important;
    color: var(--vp-accent) !important;
}

/* Divider in dropdown */
html[data-theme="dark"] .vp-profile-menu__divider,
html[data-theme="dark"] .vp-profile-dropdown hr,
html[data-theme="dark"] .vp-profile-dropdown-menu hr,
html[data-theme="dark"] .profile-dropdown hr {
    border-color: var(--vp-border) !important;
    opacity: 1;
}

/* Theme switcher blok in dropdown */
html[data-theme="dark"] .vp-theme-switcher {
    background: transparent;
}

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

/* Homepage / cards / read more knop */
html[data-theme="dark"] .entry-card a,
html[data-theme="dark"] .post-card a,
html[data-theme="dark"] .blog-card a,
html[data-theme="dark"] .archive-card a {
    color: var(--vp-accent);
}

html[data-theme="dark"] .entry-card .read-more,
html[data-theme="dark"] .post-card .read-more,
html[data-theme="dark"] .blog-card .read-more,
html[data-theme="dark"] .archive-card .read-more,
html[data-theme="dark"] a.more-link,
html[data-theme="dark"] .read-more-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    padding: 0.65rem 1rem;
    border-radius: 0.85rem;
    background: var(--vp-accent);
    color: #ffffff !important;
    text-decoration: none;
    border: 1px solid var(--vp-accent);
    box-shadow: none;
}

html[data-theme="dark"] .entry-card .read-more:hover,
html[data-theme="dark"] .post-card .read-more:hover,
html[data-theme="dark"] .blog-card .read-more:hover,
html[data-theme="dark"] .archive-card .read-more:hover,
html[data-theme="dark"] a.more-link:hover,
html[data-theme="dark"] .read-more-link:hover {
    background: var(--vp-accent-hover);
    border-color: var(--vp-accent-hover);
    color: #ffffff !important;
}

/* Zorg dat knop geen rare full-width balk wordt door inherited styles */
html[data-theme="dark"] a.more-link,
html[data-theme="dark"] .read-more-link,
html[data-theme="dark"] .entry-card .read-more {
    max-width: max-content;
    white-space: nowrap;
}

/* Widget / homepage panelen iets consistenter */
html[data-theme="dark"] .widget,
html[data-theme="dark"] .sidebar-widget,
html[data-theme="dark"] .home-widget,
html[data-theme="dark"] .vp-home-card,
html[data-theme="dark"] .vp-card {
    background: var(--vp-surface);
    color: var(--vp-text);
    border: 1px solid var(--vp-border);
}

/* Tekst in cards beter zichtbaar */
html[data-theme="dark"] .entry-title a,
html[data-theme="dark"] .widget-title,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .post-title a {
    color: var(--vp-text);
}

html[data-theme="dark"] .entry-title a:hover,
html[data-theme="dark"] .post-title a:hover {
    color: var(--vp-accent);
}

/* -----------------------------------------
   Dark mode fix - profile dropdown exact layers
----------------------------------------- */

html[data-theme="dark"] .vp-profile-dropdown,
html[data-theme="dark"] .vp-profile-dropdown-menu,
html[data-theme="dark"] .vp-profile-menu,
html[data-theme="dark"] .vp-user-dropdown,
html[data-theme="dark"] .profile-dropdown,
html[data-theme="dark"] .user-dropdown-menu {
    background: #111827 !important;
    border: 1px solid var(--vp-border) !important;
    color: var(--vp-text) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42) !important;
}

/* Binnenste wrappers ook forceren */
html[data-theme="dark"] .vp-profile-dropdown>*,
html[data-theme="dark"] .vp-profile-dropdown-menu>*,
html[data-theme="dark"] .vp-profile-menu>*,
html[data-theme="dark"] .vp-user-dropdown>*,
html[data-theme="dark"] .profile-dropdown>*,
html[data-theme="dark"] .user-dropdown-menu>* {
    background: #111827 !important;
    color: var(--vp-text) !important;
}

/* UL en LI lagen */
html[data-theme="dark"] .vp-profile-dropdown ul,
html[data-theme="dark"] .vp-profile-dropdown-menu ul,
html[data-theme="dark"] .vp-profile-menu ul,
html[data-theme="dark"] .vp-user-dropdown ul,
html[data-theme="dark"] .profile-dropdown ul,
html[data-theme="dark"] .user-dropdown-menu ul,
html[data-theme="dark"] .vp-profile-dropdown li,
html[data-theme="dark"] .vp-profile-dropdown-menu li,
html[data-theme="dark"] .vp-profile-menu li,
html[data-theme="dark"] .vp-user-dropdown li,
html[data-theme="dark"] .profile-dropdown li,
html[data-theme="dark"] .user-dropdown-menu li {
    background: transparent !important;
    color: var(--vp-text) !important;
    border-color: var(--vp-border) !important;
}

/* Links en knoppen */
html[data-theme="dark"] .vp-profile-dropdown a,
html[data-theme="dark"] .vp-profile-dropdown button,
html[data-theme="dark"] .vp-profile-dropdown-menu a,
html[data-theme="dark"] .vp-profile-dropdown-menu button,
html[data-theme="dark"] .vp-profile-menu a,
html[data-theme="dark"] .vp-profile-menu button,
html[data-theme="dark"] .vp-user-dropdown a,
html[data-theme="dark"] .vp-user-dropdown button,
html[data-theme="dark"] .profile-dropdown a,
html[data-theme="dark"] .profile-dropdown button,
html[data-theme="dark"] .user-dropdown-menu a,
html[data-theme="dark"] .user-dropdown-menu button {
    background: transparent !important;
    color: var(--vp-text) !important;
}

/* Hover/focus states */
html[data-theme="dark"] .vp-profile-dropdown a:hover,
html[data-theme="dark"] .vp-profile-dropdown a:focus,
html[data-theme="dark"] .vp-profile-dropdown button:hover,
html[data-theme="dark"] .vp-profile-dropdown button:focus,
html[data-theme="dark"] .vp-profile-dropdown-menu a:hover,
html[data-theme="dark"] .vp-profile-dropdown-menu a:focus,
html[data-theme="dark"] .vp-profile-menu a:hover,
html[data-theme="dark"] .vp-profile-menu a:focus,
html[data-theme="dark"] .vp-user-dropdown a:hover,
html[data-theme="dark"] .vp-user-dropdown a:focus,
html[data-theme="dark"] .profile-dropdown a:hover,
html[data-theme="dark"] .profile-dropdown a:focus,
html[data-theme="dark"] .user-dropdown-menu a:hover,
html[data-theme="dark"] .user-dropdown-menu a:focus {
    background: var(--vp-surface-hover) !important;
    color: var(--vp-accent) !important;
}

/* SVG / icon kleur */
html[data-theme="dark"] .vp-profile-dropdown svg,
html[data-theme="dark"] .vp-profile-dropdown-menu svg,
html[data-theme="dark"] .vp-profile-menu svg,
html[data-theme="dark"] .vp-user-dropdown svg,
html[data-theme="dark"] .profile-dropdown svg,
html[data-theme="dark"] .user-dropdown-menu svg {
    stroke: currentColor !important;
    color: inherit !important;
}

/* Divider */
html[data-theme="dark"] .vp-profile-menu__divider,
html[data-theme="dark"] .vp-profile-dropdown hr,
html[data-theme="dark"] .vp-profile-dropdown-menu hr,
html[data-theme="dark"] .vp-profile-menu hr,
html[data-theme="dark"] .profile-dropdown hr,
html[data-theme="dark"] .user-dropdown-menu hr {
    border: 0 !important;
    border-top: 1px solid var(--vp-border) !important;
    opacity: 1 !important;
}

/* Logout link niet te flets */
html[data-theme="dark"] .vp-profile-dropdown .logout,
html[data-theme="dark"] .vp-profile-dropdown .log-out,
html[data-theme="dark"] .vp-profile-dropdown .sign-out,
html[data-theme="dark"] .vp-profile-menu .logout,
html[data-theme="dark"] .vp-profile-menu .log-out,
html[data-theme="dark"] .vp-profile-menu .sign-out {
    color: #f87171 !important;
}

html[data-theme="dark"] .vp-profile-dropdown .logout:hover,
html[data-theme="dark"] .vp-profile-dropdown .log-out:hover,
html[data-theme="dark"] .vp-profile-dropdown .sign-out:hover,
html[data-theme="dark"] .vp-profile-menu .logout:hover,
html[data-theme="dark"] .vp-profile-menu .log-out:hover,
html[data-theme="dark"] .vp-profile-menu .sign-out:hover {
    color: #fca5a5 !important;
}

/* -----------------------------------------
   Dark mode fix - profile dropdown solid background
----------------------------------------- */

html[data-theme="dark"] .vp-profile-dropdown,
html[data-theme="dark"] .vp-profile-menu {
    background-color: #0f172a !important;
    background-image: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Alle directe lagen binnen de dropdown ook solide maken */
html[data-theme="dark"] .vp-profile-dropdown>ul,
html[data-theme="dark"] .vp-profile-dropdown>div,
html[data-theme="dark"] .vp-profile-menu>ul,
html[data-theme="dark"] .vp-profile-menu>div {
    background-color: #0f172a !important;
    background-image: none !important;
    opacity: 1 !important;
}

/* Ook lijstlaag transparantie uitschakelen */
html[data-theme="dark"] .vp-profile-dropdown ul,
html[data-theme="dark"] .vp-profile-menu ul {
    background-color: #0f172a !important;
    background-image: none !important;
}

/* Soms zit de transparantie op pseudo-elementen */
html[data-theme="dark"] .vp-profile-dropdown::before,
html[data-theme="dark"] .vp-profile-dropdown::after,
html[data-theme="dark"] .vp-profile-menu::before,
html[data-theme="dark"] .vp-profile-menu::after {
    background: #0f172a !important;
    opacity: 1 !important;
    border-color: var(--vp-border) !important;
}

/* Zorg dat items zelf niet weer een lichte/transparante laag krijgen */
html[data-theme="dark"] .vp-profile-dropdown li,
html[data-theme="dark"] .vp-profile-menu li {
    background: transparent !important;
}

/* Extra leesbaarheid */
html[data-theme="dark"] .vp-profile-dropdown a,
html[data-theme="dark"] .vp-profile-menu a,
html[data-theme="dark"] .vp-profile-dropdown span,
html[data-theme="dark"] .vp-profile-menu span {
    color: var(--vp-text) !important;
}

/* -----------------------------------------
   Exacte dark mode voor profielmenu
----------------------------------------- */

html[data-theme="dark"] .vp-profile-menu__dropdown {
    background: #0f172a !important;
    background-image: none !important;
    color: var(--vp-text) !important;
    border: 1px solid var(--vp-border) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-theme="dark"] .vp-profile-menu__dropdown::before,
html[data-theme="dark"] .vp-profile-menu__dropdown::after {
    background: #0f172a !important;
    border-color: var(--vp-border) !important;
    opacity: 1 !important;
}

html[data-theme="dark"] .vp-profile-menu__dropdown li {
    background: transparent !important;
    color: var(--vp-text) !important;
    border-color: var(--vp-border) !important;
}

html[data-theme="dark"] .vp-profile-menu__dropdown a,
html[data-theme="dark"] .vp-profile-menu__dropdown span {
    color: var(--vp-text) !important;
}

html[data-theme="dark"] .vp-profile-menu__dropdown a:hover,
html[data-theme="dark"] .vp-profile-menu__dropdown a:focus {
    background: var(--vp-surface-hover) !important;
    color: var(--vp-accent) !important;
}

html[data-theme="dark"] .vp-profile-menu__dropdown svg {
    color: inherit !important;
    stroke: currentColor !important;
}

html[data-theme="dark"] .vp-profile-menu__divider {
    border: 0 !important;
    border-top: 1px solid var(--vp-border) !important;
    opacity: 1 !important;
}

html[data-theme="dark"] .vp-profile-menu__logout {
    color: #f87171 !important;
}

html[data-theme="dark"] .vp-profile-menu__logout:hover,
html[data-theme="dark"] .vp-profile-menu__logout:focus {
    color: #fca5a5 !important;
}

/* -----------------------------------------
   Mobiele dark mode voor header + profielmenu
----------------------------------------- */

@media (max-width: 768px) {

    html[data-theme="dark"] .site-header,
    html[data-theme="dark"] .site-header__inner,
    html[data-theme="dark"] .site-header__right {
        background: #0f172a !important;
        color: var(--vp-text) !important;
    }

    html[data-theme="dark"] .main-navigation {
        background: #0f172a !important;
        border-left: 1px solid var(--vp-border);
    }

    html[data-theme="dark"] .main-navigation ul,
    html[data-theme="dark"] .main-navigation li {
        background: transparent !important;
    }

    html[data-theme="dark"] .main-navigation a {
        color: var(--vp-text) !important;
    }

    html[data-theme="dark"] .main-navigation a:hover,
    html[data-theme="dark"] .main-navigation a:focus,
    html[data-theme="dark"] .main-navigation .current-menu-item>a,
    html[data-theme="dark"] .main-navigation .current_page_item>a {
        background: var(--vp-surface-hover) !important;
        color: var(--vp-accent) !important;
    }

    html[data-theme="dark"] .vp-nav-overlay {
        background: rgba(2, 6, 23, 0.72) !important;
    }

    html[data-theme="dark"] .vp-profile-menu__dropdown {
        background: #0f172a !important;
    }

    html[data-theme="dark"] .vp-theme-switcher {
        background: transparent !important;
    }

    html[data-theme="dark"] .vp-theme-switcher__label {
        color: var(--vp-muted) !important;
    }

    html[data-theme="dark"] .vp-theme-switcher__button {
        background: #132033;
        border-color: #2b3a52;
        color: var(--vp-text);
    }

    html[data-theme="dark"] .vp-theme-switcher__button:hover,
    html[data-theme="dark"] .vp-theme-switcher__button:focus-visible {
        background: #1a2b43;
        color: var(--vp-accent);
    }

    html[data-theme="dark"] .vp-theme-switcher__button.is-active {
        background: var(--vp-accent);
        border-color: var(--vp-accent);
        color: #ffffff;
    }
}

/* -----------------------------------------
   Dark mode image tone correction
----------------------------------------- */

html[data-theme="dark"] img {
    filter: brightness(.92) contrast(1.05);
}

html[data-theme="dark"] .avatar,
html[data-theme="dark"] .bp-avatar img {
    filter: brightness(.95) contrast(1.05);
}

html[data-theme="dark"] .entry-card img,
html[data-theme="dark"] .post-thumbnail img,
html[data-theme="dark"] .wp-post-image {
    filter: brightness(.93) contrast(1.05);
}

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