/* ========================================================================== Dark Mode — component overrides (color variables from theme_customizer_css) Active when has .dark-mode-active (set by theme-toggle JS) -------------------------------------------------------------------------- */ html.dark-mode-active body.site-body { background-color: var(--background-color); color: var(--text-color); } html.dark-mode-active .text-muted, html.dark-mode-active .text-body-secondary, html.dark-mode-active .form-text { color: var(--text-muted, var(--gray-500)) !important; } html.dark-mode-active h1, html.dark-mode-active h2, html.dark-mode-active h3, html.dark-mode-active h4, html.dark-mode-active h5, html.dark-mode-active h6 { color: var(--gray-900); } html.dark-mode-active a { color: var(--primary-color); } html.dark-mode-active a:hover { color: var(--secondary-color); } html.dark-mode-active .card, html.dark-mode-active .post-card, html.dark-mode-active .product-card, html.dark-mode-active .tag-center-card, html.dark-mode-active .collection-card, html.dark-mode-active .cover-card, html.dark-mode-active .icon-card, html.dark-mode-active .icon-card-item, html.dark-mode-active .home-card, html.dark-mode-active .article-list-card { background-color: transparent; border-color: var(--bs-border-color); } html.dark-mode-active .card-body, html.dark-mode-active .post-card .card-body, html.dark-mode-active .product-card .card-body { background-color: var(--card-bg); color: var(--text-color); } html.dark-mode-active .article-list-card__inner--card-pad-media-flush-body-inset, html.dark-mode-active .article-list-card__inner--card-pad-inset, html.dark-mode-active .article-list-card__inner--list.article-list-card__inner--card-pad-media-flush-body-inset, html.dark-mode-active .article-list-card__inner--list.article-list-card__inner--card-pad-inset { background: var(--card-bg); border-color: var(--bs-border-color); } html.dark-mode-active .article-list-card__inner--card.article-list-card__inner--card-pad-media-flush-body-inset .article-list-card__body { background: var(--card-bg); } html.dark-mode-active [class*="__inner--card-pad-inset"], html.dark-mode-active [class*="__inner--card-pad-media-flush-body-inset"], html.dark-mode-active [class*="--card-pad-inset"]:not([class*="--card-pad-media-flush-body-flush"]) { background: var(--card-bg); border-color: var(--bs-border-color); } html.dark-mode-active [class*="__inner--card-pad-media-flush-body-inset"] [class*="__body"] { background: var(--card-bg); } html.dark-mode-active .sidebar-widget, html.dark-mode-active .content-widget, html.dark-mode-active .sidebar .widget, html.dark-mode-active .widget-area .widget, html.dark-mode-active .home-widget-area .widget, html.dark-mode-active .qa-sidebar-widgets .widget, html.dark-mode-active .widget.card { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border-color: transparent !important; } html.dark-mode-active .sidebar-widget.widget-area--pad-inset, html.dark-mode-active .content-widget.widget-area--pad-inset, html.dark-mode-active .widget.widget-area--pad-inset { background: var(--card-bg) !important; border-color: var(--bs-border-color); } html.dark-mode-active .hot-ranking-item, html.dark-mode-active .article-mini-item, html.dark-mode-active .taxonomy-article-item, html.dark-mode-active .icon-card, html.dark-mode-active .icon-card-item, html.dark-mode-active .cover-card__body, html.dark-mode-active .home-card, html.dark-mode-active .home-cards--icon-nav .home-card, html.dark-mode-active .category-showcase-card, html.dark-mode-active .skeleton-card { background: var(--card-bg); } html.dark-mode-active .category-archive__item .post-card .card-body { background: var(--card-bg); } html.dark-mode-active .site-header, html.dark-mode-active .site-bottom-header-navbar { background-color: #1e1e38; background-color: var(--dark-background-color, #1e1e38); border-color: var(--bs-border-color); } html.dark-mode-active .top-bar, html.dark-mode-active .top-bar .top-bar__submenu { background: color-mix(in srgb, var(--dark-background-color) 88%, #000) !important; color: var(--dark-text-color) !important; } html.dark-mode-active .top-bar .top-bar__slogan, html.dark-mode-active .top-bar .top-bar__slogan-link, html.dark-mode-active .top-bar .top-bar__menu-link, html.dark-mode-active .top-bar .top-bar__submenu-link { color: color-mix(in srgb, var(--dark-text-color) 88%, #fff) !important; } html.dark-mode-active .nav-link { color: var(--gray-700); } html.dark-mode-active .nav-link:hover { color: var(--primary-color); } html.dark-mode-active .dropdown-menu { background-color: var(--gray-100); border-color: var(--bs-border-color); } html.dark-mode-active .dropdown-item { color: var(--gray-700); } html.dark-mode-active .dropdown-item:hover, html.dark-mode-active .dropdown-item:focus { background-color: color-mix(in srgb, var(--primary-color) 12%, transparent); } html.dark-mode-active .header-search-form .form-control { background-color: var(--gray-50); color: var(--text-color); border-color: var(--bs-border-color); } html.dark-mode-active .header-search-form .form-control::placeholder { color: var(--gray-500); } html.dark-mode-active .site-footer { --footer-bg: var(--footer-bg-dark); --footer-text: var(--footer-text-dark); background-color: var(--footer-bg, var(--gray-100)); border-top-color: var(--bs-border-color); color: var(--footer-text, var(--gray-600)); } html.dark-mode-active .site-footer a { color: var(--footer-text, var(--gray-600)); } html.dark-mode-active .site-footer a:hover { color: var(--primary-color); } html.dark-mode-active .page-hero, html.dark-mode-active .page-hero--community, html.dark-mode-active .page-hero--qna, html.dark-mode-active .page-hero--showcase, html.dark-mode-active .page-hero--friend-links, html.dark-mode-active .page-hero--friend-link-apply { background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 22%, var(--background-color)) 0%, color-mix(in srgb, var(--secondary-color) 18%, var(--background-color)) 100%); box-shadow: none; } html.dark-mode-active .community-page-chip { background: var(--card-bg, var(--gray-100)); border-color: var(--bs-border-color); color: var(--text-color); } html.dark-mode-active .community-page-chip.is-active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; } html.dark-mode-active .community-feed__item { background: var(--card-bg, var(--gray-100)); border-color: var(--bs-border-color); } html.dark-mode-active .community-feed__author, html.dark-mode-active .community-feed__text { color: var(--text-color); } html.dark-mode-active .pet-showcase-chip { background: var(--gray-100); border-color: var(--bs-border-color); } html.dark-mode-active .pet-showcase-chip.is-active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; } html.dark-mode-active .pet-showcase-sort { border-bottom-color: var(--bs-border-color); } html.dark-mode-active .pet-showcase-card { background: var(--gray-100); border-color: var(--bs-border-color); box-shadow: none; } html.dark-mode-active .pet-showcase-card__media { background: var(--gray-50); } html.dark-mode-active .pet-showcase-lightbox__caption { background: rgba(30, 41, 59, 0.96); } html.dark-mode-active .pet-moment-modal__side { background: var(--surface-color, #1a1a1a); } html.dark-mode-active .pet-moment-modal__author { border-bottom-color: rgba(255, 255, 255, 0.08); } html.dark-mode-active .pet-moment-modal__footer { border-top-color: rgba(255, 255, 255, 0.08); background: var(--surface-color, #1a1a1a); } html.dark-mode-active .pet-moment-modal__avatar-fallback { background: rgba(255, 255, 255, 0.12); color: #fff; } html.dark-mode-active .pet-moment-detail__panel { background: var(--surface-color, #1a1a1a); } html.dark-mode-active .pet-moment-detail__author { border-bottom-color: rgba(255, 255, 255, 0.08); } html.dark-mode-active .pet-moment-detail__footer { border-top-color: rgba(255, 255, 255, 0.08); background: var(--surface-color, #1a1a1a); } html.dark-mode-active .pet-moment-detail__avatar-fallback { background: rgba(255, 255, 255, 0.12); color: #fff; } html.dark-mode-active .pet-moment-detail__like-btn { border-color: rgba(255, 255, 255, 0.12); background: var(--surface-color, #1a1a1a); } html.dark-mode-active .content { color: var(--text-color); } html.dark-mode-active .modal-content { background-color: var(--gray-100); border-color: var(--bs-border-color); } html.dark-mode-active .modal-header { border-bottom-color: var(--bs-border-color); } html.dark-mode-active .modal-footer { border-top-color: var(--bs-border-color); } html.dark-mode-active .form-control, html.dark-mode-active .form-select { background-color: var(--gray-50); color: var(--text-color); border-color: var(--bs-border-color); } html.dark-mode-active .form-control:focus, html.dark-mode-active .form-select:focus { background-color: var(--gray-50); border-color: var(--primary-color); } html.dark-mode-active .form-control::placeholder { color: var(--gray-500); } html.dark-mode-active table, html.dark-mode-active .table { color: var(--text-color); border-color: var(--bs-border-color); } html.dark-mode-active .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--gray-50); color: var(--text-color); } html.dark-mode-active pre, html.dark-mode-active code { background-color: var(--gray-50); color: var(--gray-800); } html.dark-mode-active blockquote { background-color: var(--gray-50); border-left-color: var(--primary-color); color: var(--gray-700); } html.dark-mode-active .breadcrumb { background-color: transparent; } html.dark-mode-active .breadcrumb-item { color: var(--gray-500); } html.dark-mode-active .breadcrumb-item.active { color: var(--gray-600); } html.dark-mode-active .pagination .page-link { background-color: var(--gray-100); border-color: var(--bs-border-color); color: var(--gray-700); } html.dark-mode-active .pagination .page-link:hover { background-color: var(--gray-200); color: var(--primary-color); } html.dark-mode-active .pagination .page-item.active .page-link { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; } html.dark-mode-active .toast { background-color: var(--gray-100); border-color: var(--bs-border-color); } html.dark-mode-active hr { border-color: var(--bs-border-color); } html.dark-mode-active .tag, html.dark-mode-active .badge { background-color: var(--gray-200); color: var(--gray-600); } html.dark-mode-active .post-card__cover-frame, html.dark-mode-active .product-card__image, html.dark-mode-active .collection-card__image, html.dark-mode-active .cover-card__media { background-color: var(--gray-200); } html.dark-mode-active .collection-card--stacked .collection-card__body { background: var(--card-bg); border-top-color: rgba(255, 255, 255, 0.08); } html.dark-mode-active .collection-card--stacked.collection-card--has-cover .collection-card__count--badge { background: rgba(15, 23, 42, 0.82); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28); } html.dark-mode-active .skeleton { background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-300) 37%, var(--gray-200) 63%); background-size: 400% 100%; } html.dark-mode-active .article-toc { background-color: var(--gray-100); border-color: var(--bs-border-color); } html.dark-mode-active .article-toc a { color: var(--gray-600); } html.dark-mode-active .article-toc__item--active a { color: var(--primary-color) !important; } html.dark-mode-active .article-toc-floating { background: var(--card-bg); border-color: var(--bs-border-color); } html.dark-mode-active .article-toc-floating__title { color: var(--gray-200, #e5e7eb); } html.dark-mode-active .article-toc-floating__toggle:hover { background: var(--gray-700, #374151); color: var(--gray-200, #e5e7eb); } html.dark-mode-active .article-toc-inline { background: var(--card-bg-secondary); border-color: var(--bs-border-color); } html.dark-mode-active .article-toc-inline__title { color: var(--gray-200, #e5e7eb); } html.dark-mode-active .article-toc--floating .article-toc__item--active a { background: color-mix(in srgb, var(--primary-color) 12%, transparent); } html.dark-mode-active .author-card__inner { background: var(--card-bg); border-color: var(--bs-border-color); } html.dark-mode-active .author-card__avatar-img { border-color: var(--bs-border-color, #374151); } html.dark-mode-active .author-card__name { color: var(--gray-200, #e5e7eb); } html.dark-mode-active .author-card__count { color: var(--gray-500, #9ca3af); } html.dark-mode-active .author-card__bio { color: var(--gray-400, #9ca3af); } html.dark-mode-active .article-nav__item { background: var(--card-bg); border-color: var(--bs-border-color); color: var(--text-color); box-shadow: none; } html.dark-mode-active .article-nav__item:hover { color: var(--text-color); border-color: color-mix(in srgb, var(--primary-color) 35%, var(--bs-border-color)); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); } html.dark-mode-active .article-nav__title { color: var(--gray-200, #e5e7eb); } html.dark-mode-active .author-profile { background: var(--card-bg); border-color: var(--bs-border-color); box-shadow: none; } html.dark-mode-active .author-profile__name { color: var(--gray-200, #e5e7eb); } html.dark-mode-active .author-profile__count { color: var(--gray-500, #9ca3af); } html.dark-mode-active .author-profile__bio { color: var(--gray-400, #9ca3af); } html.dark-mode-active .author-archive__posts-title { color: var(--gray-200, #e5e7eb); } html.dark-mode-active .mobile-bottom-bar { background: var(--dark-background-color, #1a1a2e); border-top-color: rgba(255, 255, 255, 0.1); } html.dark-mode-active .mobile-bottom-bar__link { color: var(--dark-text-color, #e2e8f0); } html.dark-mode-active .mobile-bottom-bar__link.is-active { color: var(--mobile-bar-icon-active, var(--primary-color)); } html.dark-mode-active .mobile-bottom-nav { background: var(--dark-background-color, #1a1a2e); border-top-color: rgba(255, 255, 255, 0.1); } html.dark-mode-active .mobile-bottom-nav__item { color: var(--gray-500); } html.dark-mode-active .reading-progress { background-color: var(--gray-200); } html.dark-mode-active .page-loader { background-color: var(--background-color); } html.dark-mode-active .comment, html.dark-mode-active .comment-item { border-color: var(--bs-border-color); } html.dark-mode-active .comment-body { background-color: var(--gray-50); } html.dark-mode-active .btn-primary, html.dark-mode-active a.btn-primary, html.dark-mode-active button.btn-primary { --bs-btn-bg: color-mix(in srgb, var(--primary-color) 52%, var(--background-color)); --bs-btn-border-color: color-mix(in srgb, var(--primary-color) 52%, var(--background-color)); --bs-btn-hover-bg: color-mix(in srgb, var(--primary-color) 64%, var(--background-color)); --bs-btn-hover-border-color: color-mix(in srgb, var(--primary-color) 64%, var(--background-color)); --bs-btn-active-bg: color-mix(in srgb, var(--primary-color) 72%, var(--background-color)); --bs-btn-active-border-color: color-mix(in srgb, var(--primary-color) 72%, var(--background-color)); --bs-btn-active-shadow: none; color: #fff; background-color: color-mix(in srgb, var(--primary-color) 52%, var(--background-color)); border-color: color-mix(in srgb, var(--primary-color) 52%, var(--background-color)); box-shadow: none; } html.dark-mode-active .btn-primary:hover, html.dark-mode-active a.btn-primary:hover, html.dark-mode-active button.btn-primary:hover, html.dark-mode-active .btn-primary:focus, html.dark-mode-active a.btn-primary:focus, html.dark-mode-active button.btn-primary:focus, html.dark-mode-active .btn-primary:focus-visible, html.dark-mode-active a.btn-primary:focus-visible, html.dark-mode-active button.btn-primary:focus-visible { color: #fff; background-color: color-mix(in srgb, var(--primary-color) 64%, var(--background-color)); border-color: color-mix(in srgb, var(--primary-color) 64%, var(--background-color)); box-shadow: none; } html.dark-mode-active .btn-primary:active, html.dark-mode-active a.btn-primary:active, html.dark-mode-active button.btn-primary:active, html.dark-mode-active .btn-primary.active, html.dark-mode-active a.btn-primary.active, html.dark-mode-active button.btn-primary.active { color: #fff; background-color: color-mix(in srgb, var(--primary-color) 72%, var(--background-color)); border-color: color-mix(in srgb, var(--primary-color) 72%, var(--background-color)); box-shadow: none; } html.dark-mode-active .btn-outline-primary { --bs-btn-color: color-mix(in srgb, var(--primary-color) 78%, #fff); --bs-btn-border-color: color-mix(in srgb, var(--primary-color) 55%, var(--background-color)); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--primary-color) 55%, var(--background-color)); --bs-btn-hover-border-color: color-mix(in srgb, var(--primary-color) 55%, var(--background-color)); --bs-btn-active-color: #fff; --bs-btn-active-bg: color-mix(in srgb, var(--primary-color) 55%, var(--background-color)); --bs-btn-active-border-color: color-mix(in srgb, var(--primary-color) 55%, var(--background-color)); --bs-btn-active-shadow: none; --bs-btn-disabled-color: color-mix(in srgb, var(--primary-color) 78%, #fff); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: color-mix(in srgb, var(--primary-color) 55%, var(--background-color)); --bs-btn-focus-shadow-rgb: 0, 0, 0; border-color: color-mix(in srgb, var(--primary-color) 55%, var(--background-color)); color: color-mix(in srgb, var(--primary-color) 78%, #fff); } html.dark-mode-active .btn-outline-primary:hover, html.dark-mode-active .btn-outline-primary:focus, html.dark-mode-active .btn-outline-primary:focus-visible, html.dark-mode-active .btn-outline-primary:active, html.dark-mode-active .btn-outline-primary.active { background-color: color-mix(in srgb, var(--primary-color) 55%, var(--background-color)); border-color: color-mix(in srgb, var(--primary-color) 55%, var(--background-color)); color: #fff; box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--primary-color) 28%, transparent); } html.dark-mode-active .btn-outline-primary:disabled, html.dark-mode-active .btn-outline-primary.disabled, html.dark-mode-active .pagination-load-more__btn:disabled, html.dark-mode-active .pagination-load-more__btn.is-loading { color: color-mix(in srgb, var(--primary-color) 78%, #fff); background-color: color-mix(in srgb, var(--primary-color) 12%, transparent); border-color: color-mix(in srgb, var(--primary-color) 55%, var(--background-color)); box-shadow: none; } html.dark-mode-active .pagination-load-more__btn.is-loading::after { border-color: color-mix(in srgb, var(--primary-color) 78%, #fff); border-right-color: transparent; } html.dark-mode-active .btn-outline-secondary { border-color: var(--gray-400); color: var(--gray-400); } html.dark-mode-active .btn-outline-secondary:hover { background-color: var(--gray-400); color: var(--background-color); } html.dark-mode-active ::-webkit-scrollbar { width: 10px; } html.dark-mode-active ::-webkit-scrollbar-track { background: var(--gray-50); } html.dark-mode-active ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 5px; } html.dark-mode-active ::-webkit-scrollbar-thumb:hover { background: var(--gray-400); } html.dark-mode-active .page-hero__title, html.dark-mode-active .page-hero__desc { color: #fff; } html.dark-mode-active .error-page { color: var(--text-color); } html.dark-mode-active .pet-tool-card, html.dark-mode-active .pet-tool-result { background-color: var(--card-bg); border-color: var(--bs-border-color); } /* 品种对比：覆盖 .card 透明底，并让槽位 / 抽屉头跟随深色卡片色 */ html.dark-mode-active .breed-compare__result.card, html.dark-mode-active .breed-compare__result { background: var(--card-bg) !important; background-color: var(--card-bg) !important; color: var(--text-color); border-color: var(--bs-border-color); } html.dark-mode-active .breed-compare__slot-wrap .breed-compare__slot, html.dark-mode-active .breed-compare__slot { background: color-mix(in srgb, var(--primary-color) 8%, var(--card-bg)); border-color: color-mix(in srgb, var(--primary-color) 28%, var(--bs-border-color)); color: var(--text-color); } html.dark-mode-active .breed-compare__slot.is-filled { background: color-mix(in srgb, var(--primary-color) 14%, var(--card-bg)); border-color: color-mix(in srgb, var(--primary-color) 36%, transparent); } html.dark-mode-active .breed-compare__slot-clear { background: color-mix(in srgb, var(--gray-500, #6b7280) 22%, var(--card-bg)); color: var(--text-muted, var(--gray-500)); } html.dark-mode-active .breed-compare__slot-clear:hover { background: color-mix(in srgb, var(--danger-color, #ef4444) 22%, var(--card-bg)); color: var(--danger-color, #ef4444); } html.dark-mode-active .breed-compare-picker__dialog { background: var(--card-bg); color: var(--text-color); box-shadow: -12px 0 48px rgba(0, 0, 0, 0.45); } html.dark-mode-active .breed-compare-picker__head { background: linear-gradient( 180deg, color-mix(in srgb, var(--primary-color) 10%, var(--card-bg)) 0%, var(--card-bg) 100% ); border-bottom-color: var(--bs-border-color); } html.dark-mode-active .breed-compare-picker__filter { background: color-mix(in srgb, var(--primary-color) 10%, var(--gray-100, #1f2937)); color: var(--text-muted, var(--gray-500)); } html.dark-mode-active .breed-compare-picker__filter.is-active { background: color-mix(in srgb, var(--primary-color) 18%, var(--card-bg)); color: var(--primary-color); } html.dark-mode-active .breed-compare__pick { background: var(--card-bg); border-color: color-mix(in srgb, var(--primary-color) 16%, var(--bs-border-color)); color: var(--text-color); } html.dark-mode-active .breed-compare__pick.is-selected { background: color-mix(in srgb, var(--primary-color) 14%, var(--card-bg)); } html.dark-mode-active .breed-compare__table thead th { background: color-mix(in srgb, var(--primary-color) 12%, var(--card-bg)); color: var(--text-color); } html.dark-mode-active .breed-compare__table tbody th { background: color-mix(in srgb, var(--gray-100, #1f2937) 55%, var(--card-bg)); color: var(--text-color); } html.dark-mode-active .breed-compare__cell--best { background: color-mix(in srgb, #10b981 14%, var(--card-bg)); } html.dark-mode-active .product-detail { color: var(--text-color); } html.dark-mode-active .product-detail__price { color: var(--primary-color); } html.dark-mode-active .daily-tip-card { background-color: #1e1e38; background-color: var(--card-bg, var(--dark-background-color, #1e1e38)); border-color: rgba(255, 255, 255, 0.12); color: var(--text-color); } @supports (background: color-mix(in srgb, #000 10%, #fff 90%)) { html.dark-mode-active .daily-tip-card { background: color-mix(in srgb, var(--primary-color) 16%, var(--card-bg, var(--surface-color)) 84%); border-color: color-mix(in srgb, var(--primary-color) 24%, transparent); } } html.dark-mode-active .daily-tip-card__category { color: var(--primary-color); } html.dark-mode-active .daily-tip-card__content { color: var(--text-color); } html.dark-mode-active .daily-tip-card__source { color: var(--text-muted); } /* 图标卡片：深色模式忽略浅色自定义背景，跟随深色配色方案 */ html.dark-mode-active .icon-card-item { background: var(--card-bg) !important; color: var(--text-color); } html.dark-mode-active .icon-card-item__icon { background: color-mix(in srgb, var(--primary-color) 20%, var(--card-bg) 80%) !important; } html.dark-mode-active .icon-card-item__placeholder { background: color-mix(in srgb, var(--primary-color) 22%, transparent) !important; } html.dark-mode-active .icon-card-item__title { color: var(--text-color); } html.dark-mode-active .icon-card-item__desc { color: var(--text-muted); } html.dark-mode-active a.icon-card-item:hover .icon-card-item__title { color: var(--primary-color); } /* 健康小工具：跟随深色主色/次色 */ html.dark-mode-active .pet-health-tool, html.dark-mode-active a.pet-health-tool { background-color: #1e1e38; background-color: var(--card-bg, var(--dark-background-color, #1e1e38)); border-color: rgba(255, 255, 255, 0.12); color: var(--text-color); } html.dark-mode-active .pet-health-tool:hover, html.dark-mode-active a.pet-health-tool:hover { background-color: #1e1e38; background-color: var(--card-bg, var(--dark-background-color, #1e1e38)); border-color: rgba(255, 255, 255, 0.2); color: var(--text-color); } html.dark-mode-active .pet-health-tool__title { color: var(--text-color); } html.dark-mode-active .pet-health-tool--hub, html.dark-mode-active a.pet-health-tool--hub, html.dark-mode-active .pet-health-tool--compare, html.dark-mode-active a.pet-health-tool--compare { background-color: #1e1e38; background-color: var(--card-bg, var(--dark-background-color, #1e1e38)); } @supports (background: color-mix(in srgb, #000 10%, #fff 90%)) { html.dark-mode-active .pet-health-tool, html.dark-mode-active a.pet-health-tool { background: color-mix(in srgb, var(--primary-color) 14%, var(--card-bg) 86%); border-color: color-mix(in srgb, var(--primary-color) 22%, transparent); } html.dark-mode-active .pet-health-tool:hover, html.dark-mode-active a.pet-health-tool:hover { background: color-mix(in srgb, var(--primary-color) 22%, var(--card-bg) 78%); border-color: color-mix(in srgb, var(--primary-color) 34%, transparent); } html.dark-mode-active .pet-health-tool--hub, html.dark-mode-active a.pet-health-tool--hub { background: color-mix(in srgb, var(--primary-color) 18%, var(--card-bg) 82%); } html.dark-mode-active .pet-health-tool--compare, html.dark-mode-active a.pet-health-tool--compare { background: color-mix(in srgb, var(--secondary-color) 16%, var(--card-bg) 84%); border-color: color-mix(in srgb, var(--secondary-color) 28%, transparent); } } html.dark-mode-active .pet-seasonal-tip { background: color-mix(in srgb, var(--accent-color) 16%, var(--card-bg) 84%); border-color: color-mix(in srgb, var(--primary-color) 22%, transparent); } html.dark-mode-active .pet-seasonal-tip__label { color: var(--text-color); } html.dark-mode-active .pet-seasonal-tip__text { color: var(--text-muted); } html.dark-mode-active .floating-actions .floating-actions__btn, html.dark-mode-active .floating-actions a.floating-actions__btn, html.dark-mode-active .floating-actions button.floating-actions__btn { color: var(--primary-color) !important; background: #1e1e38 none !important; background-color: #1e1e38 !important; background-color: var(--dark-background-color, #1e1e38) !important; background-image: none !important; border-color: rgba(255, 255, 255, 0.14) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); } html.dark-mode-active .floating-actions .floating-actions__btn::before, html.dark-mode-active .floating-actions a.floating-actions__btn::before, html.dark-mode-active .floating-actions button.floating-actions__btn::before { background-color: #1e1e38; background-color: var(--dark-background-color, #1e1e38); } html.dark-mode-active .floating-actions .floating-actions__btn:hover, html.dark-mode-active .floating-actions .floating-actions__btn:focus, html.dark-mode-active .floating-actions a.floating-actions__btn:hover, html.dark-mode-active .floating-actions a.floating-actions__btn:focus, html.dark-mode-active .floating-actions button.floating-actions__btn:hover, html.dark-mode-active .floating-actions button.floating-actions__btn:focus { color: var(--primary-color) !important; background: #1e1e38 none !important; background-color: #1e1e38 !important; background-color: var(--dark-background-color, #1e1e38) !important; border-color: rgba(255, 255, 255, 0.22) !important; } html.dark-mode-active .floating-actions .floating-actions__btn--theme .theme-toggle-icon__layer i { color: var(--primary-color) !important; } html.dark-mode-active .floating-actions__qrcode { color: var(--text-color, #e2e8f0); background-color: #1e1e38; background-color: var(--dark-background-color, #1e1e38); background-color: color-mix(in srgb, var(--dark-background-color, #1e1e38) 88%, #ffffff 12%); border-color: color-mix(in srgb, var(--primary-color) 28%, rgba(255, 255, 255, 0.14)); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25); } html.dark-mode-active .theme-toggle-icon__sun i { color: var(--accent-color); } html.dark-mode-active .site-popup { --site-popup-bg: var(--dark-background-color, #1e1e38); } html.dark-mode-active .site-popup__sheet { background-color: #1e1e38; background-color: var(--dark-background-color, #1e1e38); background-color: var(--card-bg, var(--dark-background-color, #1e1e38)); color: var(--text-color); } html.dark-mode-active .site-popup__dialog { box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45); } html.dark-mode-active .site-popup__close { color: var(--text-color); background-color: #2a2a48; background-color: color-mix(in srgb, var(--dark-background-color, #1e1e38) 70%, #ffffff 16%); } html.dark-mode-active .site-popup__close:hover, html.dark-mode-active .site-popup__close:focus-visible { color: #fff; background-color: color-mix(in srgb, var(--dark-background-color, #1e1e38) 50%, #ffffff 22%); } html.dark-mode-active .site-popup__handle { background-color: color-mix(in srgb, #ffffff 28%, transparent); } html.dark-mode-active .site-popup__media { background-color: color-mix(in srgb, var(--dark-background-color, #1e1e38) 85%, #000 15%); } html.dark-mode-active .site-popup__title, html.dark-mode-active .site-popup__content { color: var(--text-color); } /* 覆盖编辑器内联颜色，跟随深色配色预设 */ html.dark-mode-active .site-popup__content :where(p, span, div, li, ul, ol, strong, em, b, i, u, h1, h2, h3, h4, h5, h6, blockquote, td, th, label) { color: inherit !important; } html.dark-mode-active .site-popup__content a { color: var(--primary-color) !important; } html.dark-mode-active .site-popup__content a:hover { color: var(--secondary-color) !important; } html.dark-mode-active .site-popup__btn.btn-primary, html.dark-mode-active .site-popup__btn.btn-primary:link, html.dark-mode-active .site-popup__btn.btn-primary:visited { color: #fff !important; background-color: color-mix(in srgb, var(--primary-color) 52%, var(--background-color)) !important; border-color: color-mix(in srgb, var(--primary-color) 52%, var(--background-color)) !important; box-shadow: none !important; } html.dark-mode-active .site-popup__btn.btn-primary:hover, html.dark-mode-active .site-popup__btn.btn-primary:focus, html.dark-mode-active .site-popup__btn.btn-primary:focus-visible { color: #fff !important; background-color: color-mix(in srgb, var(--primary-color) 64%, var(--background-color)) !important; border-color: color-mix(in srgb, var(--primary-color) 64%, var(--background-color)) !important; box-shadow: none !important; } html.dark-mode-active .site-popup__btn.btn-primary:active, html.dark-mode-active .site-popup__btn.btn-primary.active { color: #fff !important; background-color: color-mix(in srgb, var(--primary-color) 72%, var(--background-color)) !important; border-color: color-mix(in srgb, var(--primary-color) 72%, var(--background-color)) !important; box-shadow: none !important; } html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.35s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.35s ease, fill 0.25s ease, stroke 0.25s ease !important; } html.theme-transitioning .theme-toggle-icon__layer { transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) !important; }