/* ============================================================ Dark Mode 覆盖层 — DigitalBlue 主题 挂载: 默认 dark 顺序: 必须在 style.css / theme_color_css 之后加载 ============================================================ */ /* ---------- 切换时全局平滑过渡 ---------- */ html.theme-switching body, html.theme-switching .navbar, html.theme-switching .neuro, html.theme-switching .feature-card, html.theme-switching .info-column, html.theme-switching .api-card, html.theme-switching .footer, html.theme-switching .dropdown-menu, html.theme-switching .form-control, html.theme-switching .blog-article-card, html.theme-switching .doc-section, html.theme-switching .doc-sidebar, html.theme-switching .doc-content, html.theme-switching .stats-container .stat-item, html.theme-switching .search-input, html.theme-switching .category-btn { transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease !important; } /* ---------- 模式切换按钮（两种模式通用） ---------- */ .theme-toggle { position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid rgba(126, 156, 216, .35); background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; outline: none; overflow: hidden; transition: color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease; } .theme-toggle i { position: absolute; font-size: 15px; transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease; } html[data-theme="dark"] .theme-toggle { color: #ffd66b; border-color: rgba(255, 214, 107, .45); box-shadow: 0 0 14px rgba(255, 214, 107, .18); } html[data-theme="dark"] .theme-toggle:hover { box-shadow: 0 0 22px rgba(255, 214, 107, .4); transform: translateY(-1px); } html[data-theme="light"] .theme-toggle { color: #f59e0b; border-color: rgba(245, 158, 11, .45); box-shadow: 0 0 14px rgba(245, 158, 11, .12); } html[data-theme="light"] .theme-toggle:hover { box-shadow: 0 0 22px rgba(245, 158, 11, .3); transform: translateY(-1px); } /* dark 态显示太阳(点击切回白昼)，light 态显示月亮 */ html[data-theme="dark"] .theme-toggle .fa-sun { opacity: 1; transform: none; } html[data-theme="dark"] .theme-toggle .fa-moon { opacity: 0; transform: rotate(120deg) scale(.3); } html[data-theme="light"] .theme-toggle .fa-moon { opacity: 1; transform: none; } html[data-theme="light"] .theme-toggle .fa-sun { opacity: 0; transform: rotate(-120deg) scale(.3); } /* 点击涟漪 */ .theme-toggle::after { content: ''; position: absolute; inset: 0; border-radius: 50%; opacity: 0; pointer-events: none; } .theme-toggle:active::after { animation: tt-ripple .5s ease-out; } @keyframes tt-ripple { 0% { box-shadow: 0 0 0 0 currentColor; opacity: .35; } 100% { box-shadow: 0 0 0 18px transparent; opacity: 0; } } /* ============================================================ 暗黑模式 ============================================================ */ html[data-theme="dark"] { /* 语义变量重定义（style.css 的 :root 变量在此覆盖） */ --tech-gray: #0a1220; /* 页面底色 */ --tech-dark: #e6ecf7; /* 主文字 */ --tech-light: #101a2c; --card-bg: #121c30; /* 卡片底 */ --text-color: #e6ecf7; --text-muted: #9db0cf; --shadow-soft: 0 4px 20px rgba(0, 0, 0, .5); --shadow-medium: 0 8px 30px rgba(0, 0, 0, .65); --hero-bg-color: #0b1426; --primary-bg: rgba(7, 170, 255, .16); --success-bg: rgba(82, 196, 26, .16); --warning-bg: rgba(253, 126, 20, .16); --error-bg: rgba(245, 34, 45, .2); --danger-bg: rgba(255, 82, 82, .16); --info-bg: rgba(22, 119, 255, .18); --secondary-bg: rgba(148, 163, 184, .14); /* Bootstrap 5 变量重定向 */ --bs-body-bg: #0a1220; --bs-body-color: #e6ecf7; --bs-border-color: rgba(126, 156, 216, .18); --bs-secondary-color: rgba(230, 236, 247, .72); --bs-tertiary-bg: #0f1930; --bs-secondary-bg: #121c30; --bs-emphasis-color: #f2f6fd; --bs-gray-700: #b7c5dd; --bs-gray-600: #9db0cf; --bs-light: #16223a; color-scheme: dark; } /* ---------- 基础 ---------- */ html[data-theme="dark"] body { background-color: var(--tech-gray); color: var(--tech-dark); } 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: #f2f6fd; } html[data-theme="dark"] .text-muted { color: var(--text-muted) !important; } /* ---------- 导航栏 ---------- */ html[data-theme="dark"] .navbar { background: rgba(10, 18, 32, .84); box-shadow: 0 2px 18px rgba(0, 0, 0, .4); } html[data-theme="dark"] .navbar .nav-link { color: #c7d3e8; } html[data-theme="dark"] .navbar .nav-link:hover, html[data-theme="dark"] .navbar .nav-link.active { color: var(--theme-color); } html[data-theme="dark"] .navbar-toggler { border-color: rgba(126, 156, 216, .3); } /* 移动端展开菜单面板 */ html[data-theme="dark"] .navbar-collapse { background: #0d1728 !important; backdrop-filter: none !important; border-radius: 12px; padding: 0.9rem 1.2rem; margin-top: 0.7rem; border: 1px solid rgba(126, 156, 216, .16); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); } html[data-theme="dark"] .navbar-collapse .nav-link { color: #c7d3e8; } html[data-theme="dark"] .navbar-collapse .nav-link:hover, html[data-theme="dark"] .navbar-collapse .nav-link.active { color: var(--theme-color); } html[data-theme="dark"] .navbar-collapse .dropdown-menu { background: #131e34; } /* ---------- 卡片族 ---------- */ html[data-theme="dark"] .neuro, html[data-theme="dark"] .api-card, html[data-theme="dark"] .info-column, html[data-theme="dark"] .blog-article-card, html[data-theme="dark"] .info-card, html[data-theme="dark"] .no-results, html[data-theme="dark"] .comt-box, html[data-theme="dark"] .comparison-section, html[data-theme="dark"] .api-filter-container, html[data-theme="dark"] .wechat-qr-popup, html[data-theme="dark"] .doc-section, html[data-theme="dark"] .doc-sidebar, html[data-theme="dark"] .doc-content, html[data-theme="dark"] .blog-sidebar-section, html[data-theme="dark"] .social-btn { background: var(--card-bg); border-color: rgba(126, 156, 216, .14); box-shadow: var(--shadow-soft); } html[data-theme="dark"] .neuro-hover:hover, html[data-theme="dark"] .api-card:hover { background: #16223a; box-shadow: var(--shadow-medium); } /* 白底 section 区块 */ html[data-theme="dark"] .features, html[data-theme="dark"] .articles, html[data-theme="dark"] .blog-article-list-section { background-color: transparent; } /* ---------- Hero 区 ---------- */ html[data-theme="dark"] .stat-item { background: rgba(13, 25, 48, .55); border: 1px solid rgba(126, 156, 216, .12); } html[data-theme="dark"] .search-section { border-color: rgba(126, 156, 216, .22); background: rgba(13, 25, 48, .35); } html[data-theme="dark"] .search-input { background: rgba(10, 18, 34, .85) !important; border-color: rgba(126, 156, 216, .25); color: #e6ecf7 !important; } html[data-theme="dark"] .search-input::placeholder { color: #5f7396; } html[data-theme="dark"] .search-input:focus { border-color: var(--theme-color); box-shadow: 0 0 0 .2rem rgba(7, 170, 255, .18); } /* search-section 白色方角伪元素层(无圆角, 从卡片四角露出) */ html[data-theme="dark"] .search-section::before { background: rgba(13, 25, 48, .5); border-radius: var(--radius-soft); } html[data-theme="dark"] .search-section::after { background-color: rgba(16, 26, 44, .55); opacity: 1; } /* ---------- 表单 ---------- */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background-color: #0d1728; border-color: rgba(126, 156, 216, .22); color: #e6ecf7; } html[data-theme="dark"] .form-control::placeholder { color: #5f7396; } html[data-theme="dark"] .form-control:focus { background-color: #0d1728; color: #e6ecf7; border-color: var(--theme-color); box-shadow: 0 0 0 .2rem rgba(7, 170, 255, .18); } /* ---------- 下拉菜单 ---------- */ html[data-theme="dark"] .dropdown-menu { background: #131e34; border: 1px solid rgba(126, 156, 216, .16); box-shadow: 0 10px 30px rgba(0, 0, 0, .55); } html[data-theme="dark"] .dropdown-item { color: #c7d3e8; } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus, html[data-theme="dark"] .dropdown-item.active { background: rgba(7, 170, 255, .14); color: #fff; } /* ---------- 按钮描边类 ---------- */ html[data-theme="dark"] .btn-tech-outline { background: transparent; color: var(--theme-color); border-color: var(--theme-color); } html[data-theme="dark"] .btn-tech-outline:hover, html[data-theme="dark"] .btn-tech-outline:active { background: var(--theme-color); color: #fff; } html[data-theme="dark"] .category-btn { background: #16223a; border: 1px solid rgba(126, 156, 216, .22); color: #b9c8e2; } html[data-theme="dark"] .category-btn:hover { border-color: var(--theme-color); color: #fff; } html[data-theme="dark"] .category-btn.active { background: var(--theme-color); border-color: var(--theme-color); color: #fff; } /* ---------- 文字细节 ---------- */ html[data-theme="dark"] .section-title p, html[data-theme="dark"] .feature-card p, html[data-theme="dark"] .info-content, html[data-theme="dark"] .announcement-excerpt, html[data-theme="dark"] .faq-answer, html[data-theme="dark"] .index-faq-answer, html[data-theme="dark"] .news-meta, html[data-theme="dark"] .blog-article-card p { color: #a9bdd9; } html[data-theme="dark"] .api-description, html[data-theme="dark"] .api-card p, html[data-theme="dark"] .api-card .desc, html[data-theme="dark"] .api-bonus, html[data-theme="dark"] .no-results p { color: #c0cfe6 !important; } html[data-theme="dark"] .news-title, html[data-theme="dark"] .announcement-title, html[data-theme="dark"] .faq-link, html[data-theme="dark"] .feature-card h3, html[data-theme="dark"] .info-header h3 { color: #eaf0fa; } html[data-theme="dark"] .announcement-date { color: #8fa2c4; } /* ---------- 表格 / 代码 / 弹层 ---------- */ html[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: #e6ecf7; --bs-table-border-color: rgba(126, 156, 216, .14); --bs-table-striped-color: #e6ecf7; --bs-table-hover-color: #fff; } html[data-theme="dark"] pre, html[data-theme="dark"] code { background: #0d1728; color: #cfe0ff; } html[data-theme="dark"] .modal-content { background: #121c30; color: #e6ecf7; border: 1px solid rgba(126, 156, 216, .18); } html[data-theme="dark"] .alert { border-color: rgba(126, 156, 216, .2); } /* ---------- Footer（保持深底，避免变量重定义后变亮） ---------- */ html[data-theme="dark"] .footer { background-color: #0b1526; color: #b9c8e2; } html[data-theme="dark"] .footer .footer-title { color: #f2f6fd; } html[data-theme="dark"] .footer-bottom-info, html[data-theme="dark"] .footer a { color: #93a5c2; } /* ---------- 其它 ---------- */ html[data-theme="dark"] hr { border-color: rgba(126, 156, 216, .16); opacity: 1; } html[data-theme="dark"] ::selection { background: rgba(7, 170, 255, .35); color: #fff; } html[data-theme="dark"] img { filter: brightness(.92); } html[data-theme="dark"] .back-to-top { background: #16223a; color: #9fd9ff; border: 1px solid rgba(126, 156, 216, .25); } /* ---------- Hero 背景压暗（PHP 配置的遮罩不透明度太低, 强制覆盖） ---------- */ html[data-theme="dark"] .hero::before { filter: brightness(.3) saturate(.65); } html[data-theme="dark"] .hero::after { background-color: #0b1426 !important; opacity: .8 !important; } html[data-theme="dark"] .hero h1, html[data-theme="dark"] .hero h2, html[data-theme="dark"] .hero p { text-shadow: 0 1px 12px rgba(4, 8, 18, .6); } html[data-theme="dark"] .hero .btn-tech { box-shadow: 0 4px 16px rgba(7, 170, 255, .35); } /* ---------- 浅色纹理区块(bg_detail.jpg) 全部压暗 ---------- */ html[data-theme="dark"] .popular-apis, html[data-theme="dark"] .features, html[data-theme="dark"] .api-categories, html[data-theme="dark"] .articles, html[data-theme="dark"] .api-list-section, html[data-theme="dark"] .blog-article-list-section, html[data-theme="dark"] .doc-section, html[data-theme="dark"] .pricing-section, html[data-theme="dark"] .comparison-section, html[data-theme="dark"] .faq-section, html[data-theme="dark"] .company-details-section, html[data-theme="dark"] .about-page-wrapper { background: #0a1220 !important; background-image: none !important; } /* ---------- about/contact/demand 页头遮罩(theme_color_css 输出白色) ---------- */ html[data-theme="dark"] .about-hero::after, html[data-theme="dark"] .contact-hero::after, html[data-theme="dark"] .demand-hero::after { background-color: #0b1426 !important; opacity: .85 !important; } /* ---------- 表格(文档页价格/额度表) ---------- */ html[data-theme="dark"] .table-light { --bs-table-bg: #16223a; --bs-table-color: #e6ecf7; background: #16223a !important; color: #e6ecf7; } html[data-theme="dark"] .table-bordered > :not(caption) > * > * { border-color: rgba(126, 156, 216, .22) !important; } html[data-theme="dark"] .table-responsive, html[data-theme="dark"] .table td, html[data-theme="dark"] .table th { color: #e6ecf7; } /* ---------- 联系页卡片标题 ---------- */ html[data-theme="dark"] .contact-card h5.title, html[data-theme="dark"] .contact-card .title, html[data-theme="dark"] h5.title { color: #eaf0fa !important; } /* ---------- 接口测试页(bootstrap card 组件) ---------- */ html[data-theme="dark"] .card { background: var(--card-bg); color: #e6ecf7; border-color: rgba(126, 156, 216, .22); } html[data-theme="dark"] .card-header { background: #16223a !important; color: #e6ecf7; border-bottom-color: rgba(126, 156, 216, .18); } html[data-theme="dark"] .card-body { color: #e6ecf7; } html[data-theme="dark"] .bg-light { background: #16223a !important; color: #e6ecf7; } html[data-theme="dark"] .text-body, html[data-theme="dark"] .text-dark { color: #c7d3e8 !important; } /* ---------- bootstrap bg-white 卡片(about 公司信息等) ---------- */ html[data-theme="dark"] .bg-white { background: var(--card-bg) !important; color: #e6ecf7; } html[data-theme="dark"] .bg-white h2, html[data-theme="dark"] .bg-white h3, html[data-theme="dark"] .bg-white h4, html[data-theme="dark"] .bg-white h5, html[data-theme="dark"] .bg-white .title, html[data-theme="dark"] .bg-white p, html[data-theme="dark"] .bg-white span, html[data-theme="dark"] .bg-white div { color: #c7d3e8; } html[data-theme="dark"] .bg-white .text-muted { color: #8fa2c4 !important; } /* ---------- 提示条(alert)暗色调和 ---------- */ html[data-theme="dark"] .alert { border: 1px solid rgba(126, 156, 216, .22); } html[data-theme="dark"] .alert-warning { background: rgba(250, 173, 20, .10); color: #fbd98a; border-color: rgba(250, 173, 20, .25); } html[data-theme="dark"] .alert-primary { background: rgba(7, 170, 255, .12); color: #a5ddff; } html[data-theme="dark"] .alert-success { background: rgba(82, 196, 26, .12); color: #b3ecab; } html[data-theme="dark"] .alert-danger, html[data-theme="dark"] .alert-error { background: rgba(245, 34, 45, .12); color: #ffb3b8; } html[data-theme="dark"] .alert-info { background: rgba(22, 119, 255, .12); color: #a8c8ff; } /* 次要提示条(speech页温馨提示等带内联白底, 需!important) */ html[data-theme="dark"] .alert.alert-secondary { background-color: rgba(148, 163, 184, .13) !important; background: rgba(148, 163, 184, .13) !important; color: #c7d3e8 !important; border-color: rgba(126, 156, 216, .25) !important; } /* ---------- 登录/注册/忘记密码页(白色3D背景图) ---------- */ html[data-theme="dark"] .login-section, html[data-theme="dark"] .register-section, html[data-theme="dark"] .forgot-section { background: radial-gradient(900px 520px at 50% 0%, rgba(7, 170, 255, .14) 0%, rgba(7, 170, 255, 0) 60%), radial-gradient(700px 400px at 100% 100%, rgba(129, 140, 248, .10) 0%, rgba(129, 140, 248, 0) 55%), #0a1220 !important; background-repeat: no-repeat !important; } /* ---------- 联系页地图反色暗化 + 表单卡 ---------- */ html[data-theme="dark"] .map-area-one, html[data-theme="dark"] .mapouter, html[data-theme="dark"] .mapouter iframe { filter: invert(.94) hue-rotate(180deg) brightness(.85) contrast(.88) saturate(.6); border-radius: 12px; overflow: hidden; } html[data-theme="dark"] .form-style-one, html[data-theme="dark"] .messages { background: var(--card-bg); color: #e6ecf7; border-color: rgba(126, 156, 216, .18); } html[data-theme="dark"] .form-style-one .form-label, html[data-theme="dark"] .form-style-one h2, html[data-theme="dark"] .form-style-one h3, html[data-theme="dark"] .form-style-one p { color: #c7d3e8; } /* ---------- 工具页(文字转语音等)组件 ---------- */ html[data-theme="dark"] .card.bg-white, html[data-theme="dark"] .bg-white.card { background: var(--card-bg) !important; border-color: rgba(126, 156, 216, .18); } html[data-theme="dark"] .list-group-item { background: #121c30; color: #c7d3e8; border-color: rgba(126, 156, 216, .16); } html[data-theme="dark"] .list-group-item:hover { background: #16223a; } html[data-theme="dark"] .hero-search { color: #c7d3e8; } html[data-theme="dark"] .badge.bg-light { background: #16223a !important; color: #c7d3e8 !important; } /* ============================================================ SweetAlert2 弹窗暗黑适配（老版3.x: 标题=h2, 正文=.swal2-text） ============================================================ */ html[data-theme="dark"] .swal2-overlay { background-color: rgba(2, 6, 16, .72) !important; backdrop-filter: blur(2px); } html[data-theme="dark"] .swal2-modal { background: #121c30 !important; color: #c7d3e8; border: 1px solid rgba(126, 156, 216, .22); box-shadow: 0 18px 60px rgba(0, 0, 0, .65) !important; } html[data-theme="dark"] .swal2-modal h2, html[data-theme="dark"] .swal2-title, html[data-theme="dark"] .swal2-modal h3 { color: #f2f6fd !important; } html[data-theme="dark"] .swal2-text, html[data-theme="dark"] .swal2-content, html[data-theme="dark"] .swal2-modal p, html[data-theme="dark"] .swal2-modal label { color: #c7d3e8 !important; } html[data-theme="dark"] .swal2-modal .swal2-input:not([type=file]), html[data-theme="dark"] .swal2-modal .swal2-textarea, html[data-theme="dark"] .swal2-modal .swal2-select { background: #0d1728 !important; border: 1px solid rgba(126, 156, 216, .30) !important; color: #e6ecf7 !important; box-shadow: none !important; } html[data-theme="dark"] .swal2-modal .swal2-input:focus, html[data-theme="dark"] .swal2-modal .swal2-textarea:focus { border-color: var(--theme-color) !important; box-shadow: 0 0 0 3px rgba(7, 170, 255, .18) !important; } html[data-theme="dark"] .swal2-modal .swal2-input::placeholder { color: #5f7396; } html[data-theme="dark"] .swal2-close { color: #8fa2c4 !important; } html[data-theme="dark"] .swal2-modal .swal2-image { border-radius: 8px; } html[data-theme="dark"] .swal2-validationerror { background: #1a2740 !important; color: #ffb3b8 !important; } /* 弹窗内验证码图与输入(登录弹窗场景) */ html[data-theme="dark"] .swal2-modal img { border-radius: 8px; } /* Bootstrap modal 遮罩加深 */ html[data-theme="dark"] .modal-backdrop.show, html[data-theme="dark"] .modal-backdrop { opacity: .78; } /* ---------- swal2 成功/错误图标动画(白色块改深色, 消除深底白圆) ---------- */ html[data-theme="dark"] .swal2-icon.swal2-success::before, html[data-theme="dark"] .swal2-icon.swal2-success::after { background: #121c30 !important; } html[data-theme="dark"] .swal2-icon.swal2-success .fix { background-color: #121c30 !important; } html[data-theme="dark"] .swal2-icon.swal2-success .placeholder { background-color: transparent !important; } /* ---------- 文档页底部"三步接入"卡片 ---------- */ html[data-theme="dark"] .integration-steps .step-item { background: var(--card-bg) !important; border: 1px solid rgba(126, 156, 216, .14); box-shadow: var(--shadow-soft); } html[data-theme="dark"] .integration-steps .step-item h5 { color: #eaf0fa; } html[data-theme="dark"] .integration-steps .step-item p { color: #9db0cf; } html[data-theme="dark"] .integration-steps .step-number { background-color: rgba(7, 170, 255, .18) !important; color: #67e8f9 !important; } /* ============================================================ 卡片光韵系统（暗黑质感层） 1. 静态: 顶部受光高光 + 微弱边缘光 2. hover: 主题色光晕 + 边框提亮 + 高光增强 ============================================================ */ html[data-theme="dark"] .neuro, html[data-theme="dark"] .api-card, html[data-theme="dark"] .info-column, html[data-theme="dark"] .blog-article-card, html[data-theme="dark"] .info-card, html[data-theme="dark"] .no-results, html[data-theme="dark"] .comt-box, html[data-theme="dark"] .api-filter-container, html[data-theme="dark"] .doc-section, html[data-theme="dark"] .doc-sidebar, html[data-theme="dark"] .doc-content, html[data-theme="dark"] .blog-sidebar-section, html[data-theme="dark"] .integration-steps .step-item, html[data-theme="dark"] .card, html[data-theme="dark"] .form-style-one, html[data-theme="dark"] .social-btn { border: 1px solid rgba(126, 156, 216, .16); box-shadow: 0 4px 22px rgba(0, 0, 0, .45) !important; transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease !important; } html[data-theme="dark"] .neuro-hover:hover, html[data-theme="dark"] .api-card:hover, html[data-theme="dark"] .info-column:hover, html[data-theme="dark"] .blog-article-card:hover, html[data-theme="dark"] .info-card:hover, html[data-theme="dark"] .doc-sidebar:hover, html[data-theme="dark"] .card:hover { border-color: rgba(7, 170, 255, .42) !important; box-shadow: 0 14px 38px rgba(0, 0, 0, .62), 0 6px 26px rgba(7, 170, 255, .16) !important; } /* 主题内按钮的光韵呼应 */ html[data-theme="dark"] .btn-tech { box-shadow: 0 2px 14px rgba(7, 170, 255, .30) !important; } html[data-theme="dark"] .btn-tech:hover { box-shadow: 0 4px 22px rgba(7, 170, 255, .48) !important; } /* 导航栏底缘微光, 呼应卡片高光 */ html[data-theme="dark"] .navbar { box-shadow: 0 2px 18px rgba(0, 0, 0, .42), inset 0 -1px 0 rgba(126, 156, 216, .10) !important; }