:root[data-theme='dark'] {
  /* 主要颜色 */
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
  --text-color-reverse: #242436;
  --text-secondary-color: #a8a8bd;
  --primary-color: #66b3ff;
  --secondary-color: #85ce61;
  /* 边框和分隔 */
  --border-color: #4a4a4a;
  --border-radius: 12px;
  /* 卡片和容器 */
  --card-bg: #2a2a2a;
  --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  /* 交互状态 */
  --hover-bg: #333333;
  --active-bg: #3a3a3a;
  /* 按钮 */
  --button-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  /* 输入框 */
  --input-bg: #2a2a2a;
  --input-border: #4a4a4a;
  --table-border: 1px solid #414159;
  --link-text-color: #ffffff;
  --link-text-color2: #4be79f;
  --svg-hover-color: #4be79f;
  --svg-normal-color: #ffffff;
  --svg-primary-color: #4be79f;
  --svg-fail-color: #fa5151;
  --top-bar-bg-color: #121323;
  --top-bar-border-color: #26253f;
  --bg-image-url: url('/images/bg-dark.jpg');
  --menu-btn-active-color: #2a2a3d;
  --loading-background: url('/images/gif/dark-loading.gif');
  --detect-color: #4be79f;
  --top-port-ip-color: #121323;
  --port-function-desc-color: #a8a8bd;
  --look-ip-color: #242436;
  --auto-subtitle-color: #ffffff;
  --media-card-bg-color: #2a2a3d;
  --bottom-title-color: #ffffff;
  --bottom-content-bg-color: rgba(118, 114, 164, 0.1);
  --top-mobile-nav-bg-color: rgba(0, 0, 0, 0.8);
  --top-mobile-nav-item-color: #121323;
  --bottom-content-icon-color: #ffffff;
  --top-title-color: #ffffff;
  --top-navi-login-color: #4be79f;
  --top-navi-login-border-color: #4be79f;
  --top-navi-login-bg-color: transparent;
  --top-navi-register-color: #121323;
  --top-navi-register-border-color: transparent;
  --top-navi-register-bg-color: #4be79f;
  --category-bg-color: rgba(42, 42, 61, 0.3);
  --category-bg-select-color: #2a2a3d;
  --category-txt-select-color: #ffffff;
  --blog-item-subtitle-color: #a8a8bd;
  --blog-item-border-color: rgba(217, 214, 255, 0.2);
  --blog-item-background-color: rgba(118, 114, 164, 0.1);
  --blog-nav-btn-bg-color: rgba(118, 114, 164, 0.1);
  --blog-nav-page-bg-color: rgba(118, 114, 164, 0.1);
  --blog-nav-page-txt-color: #a8a8bd;
  --blog-nav-page-bg-select-color: #2a2a3d;
  --blog-nav-page-bg-shadow-color: transparent;
  --blog-nav-page-txt-select-color: #ffffff;
  --blog-nav-icon-color: #ffffff;
  --blog-nav-icon-disabled-color: #ffffff;
  --blog-tag-author-center-line-color: #2a2a3d;
  --blog-tag-detail-likebtn-color: #2a2a3d;
  --blog-tag-detail-likebtn-txt-color: #ffffff;
  --blog-tag-item-bg-color: #2a2a3d;
  --blog-tag-item-border-color: #4be79f;
  --blog-tag-detail-p-color: #a8a8bd;
  --blog-tag-detail-next-tips-color: #a8a8bd;
  --blog-tag-detail-next-title-color: #ffffff;
  --blog-tag-detail-right-border-color: rgba(217, 214, 255, 0.2);
  --blog-tag-detail-right-bg-color: rgba(118, 114, 164, 0.1);
  --blog-tag-detail-right-line-color: #414159;
  --blog-tag-detail-right-hover-color: #4be79f;
  --blog-tag-list-mark-color: #a8a8bd;
  --blog-tag-category-list-item-bg-color: rgba(118, 114, 164, 0.1);
  --blog-tag-category-list-item-border-color: rgba(217, 214, 255, 0.2);
  --blog-tag-category-list-item-shadow-color: transparent;
  --blog-detail-skeleton-bg-color: #2a2a3d;
  --svg-btn-tip-color: #121323;
  --top-nav-border-color: #242436;
  --top-nav-change_theme-border: rgba(255, 255, 255, 0.08);
  --login-blur-bg: rgba(0, 0, 0, 0.6);
  --login-content-bg: #202331;
  --login-content-box-shadow-color: rgba(0, 0, 0, 0.5);
  --login-content-border-color: #4c5064;
  --login-input-bg-color: #1a1d2a;
  --login-input-border-color: #3b3b50;
  --login-line-left-right-color: #384257;
  --login-line-diver-color: #ffffff;
  --login-green-active-color: #4be79f;
  --404-color: #ffffff;
  --log-out-shadow-color: rgba(255, 255, 255, 0.4);
  --ip-black-line-bg-color: #414159;
}
:root[data-theme='dark'] .round-rect-box {
  background: rgba(118, 114, 164, 0.1);
  border-radius: 20px 20px 20px 20px;
  border: 2px solid rgba(217, 214, 255, 0.2);
}
:root[data-theme='dark'] .round-rect-box .title-line {
  width: 100%;
  height: 1px;
  background: #2a2a3d;
  border-radius: 0px 0px 0px 0px;
}
:root[data-theme='dark'] .loading-btn {
  width: 24px;
  height: 24px;
  background-image: var(--loading-background);
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  display: inline-block;
}
:root[data-theme='dark'] .hover-change-svg-color:hover path[stroke] {
  stroke: var(--svg-hover-color);
}
:root[data-theme='dark'] .hover-change-svg-color:hover path[fill] {
  fill: var(--svg-hover-color);
}
:root[data-theme='dark'] .hover-change-svg-color:hover rect[stroke] {
  stroke: var(--svg-hover-color);
}
:root[data-theme='dark'] .hover-change-svg-color:hover rect[fill] {
  fill: var(--svg-hover-color);
}
:root[data-theme='dark'] .svg-normal-color path[stroke] {
  stroke: var(--svg-normal-color);
}
:root[data-theme='dark'] .svg-normal-color path[fill] {
  fill: var(--svg-normal-color);
}
:root[data-theme='dark'] .svg-normal-color rect[stroke] {
  stroke: var(--svg-normal-color);
}
:root[data-theme='dark'] .svg-normal-color rect[fill] {
  fill: var(--svg-normal-color);
}
:root[data-theme='dark'] .svg-primary-color path[stroke] {
  stroke: var(--svg-primary-color);
}
:root[data-theme='dark'] .svg-primary-color path[fill] {
  fill: var(--svg-primary-color);
}
:root[data-theme='dark'] .svg-primary-color rect[stroke] {
  stroke: var(--svg-primary-color);
}
:root[data-theme='dark'] .svg-primary-color rect[fill] {
  fill: var(--svg-primary-color);
}
:root[data-theme='dark'] .svg-fail-color path[stroke] {
  stroke: var(--svg-fail-color);
}
:root[data-theme='dark'] .svg-fail-color path[fill] {
  fill: var(--svg-fail-color);
}
:root[data-theme='dark'] .svg-fail-color rect[stroke] {
  stroke: var(--svg-fail-color);
}
:root[data-theme='dark'] .svg-fail-color rect[fill] {
  fill: var(--svg-fail-color);
}
:root[data-theme='dark'] .svg-btn-tip-color path[stroke] {
  stroke: var(--svg-btn-tip-color);
}
:root[data-theme='dark'] .svg-btn-tip-color path[fill] {
  fill: var(--svg-btn-tip-color);
}
:root[data-theme='dark'] .svg-btn-tip-color rect[stroke] {
  stroke: var(--svg-btn-tip-color);
}
:root[data-theme='dark'] .svg-btn-tip-color rect[fill] {
  fill: var(--svg-btn-tip-color);
}
:root[data-theme='dark'] .svg-btn-index-color path[stroke] {
  stroke: var(--blog-nav-icon-color);
}
:root[data-theme='dark'] .svg-btn-index-color path[fill] {
  fill: var(--blog-nav-icon-color);
}
:root[data-theme='dark'] .svg-btn-index-color rect[stroke] {
  stroke: var(--blog-nav-icon-color);
}
:root[data-theme='dark'] .svg-btn-index-color rect[fill] {
  fill: var(--blog-nav-icon-color);
}
:root[data-theme='dark'] .svg-btn-small-tips-color path[stroke] {
  stroke: var(--blog-tag-detail-next-tips-color);
}
:root[data-theme='dark'] .svg-btn-small-tips-color path[fill] {
  fill: var(--blog-tag-detail-next-tips-color);
}
:root[data-theme='dark'] .svg-btn-small-tips-color rect[stroke] {
  stroke: var(--blog-tag-detail-next-tips-color);
}
:root[data-theme='dark'] .svg-btn-small-tips-color rect[fill] {
  fill: var(--blog-tag-detail-next-tips-color);
}
:root[data-theme='dark'] .svg-404-color path[stroke] {
  stroke: var(--404-color);
}
:root[data-theme='dark'] .svg-404-color path[fill] {
  fill: var(--404-color);
}
:root[data-theme='dark'] .svg-404-color rect[stroke] {
  stroke: var(--404-color);
}
:root[data-theme='dark'] .svg-404-color rect[fill] {
  fill: var(--404-color);
}