vuepress-theme-qblog/assets/css/dark.styl

一款多配置、贼强大的 VuePress 主题.

.dark {
  .single-content {
    p {
      color: var(--text-color) !important;
    }

    code {
      background-color: #f8f8f8 !important;
      color: #f0506e !important;
    }

    h1, h2, h3, h4, h5, h6 {
      color: #e5e8ff !important;

      &:hover .header-anchor {
        opacity: 1;
        color: var(--dark-ac-btn-hover) !important;
      }
    }

    div[class*=language-] {
      background-color: var(--dark-bg) !important;

      code {
        color: hsla(0, 0%, 100%, .87) !important;
      }
    }

    blockquote {
      border-left: 6px solid var(--dark-ac-btn) !important;
      background: var(--btn-normal) !important;
      color: var(--dark-icon) !important;
    }

    ol, ul {
      color: var(--text-color) !important;
    }
  }

  .wid_ad_social a {
    background: var(--dark-ac-btn) !important;
  }

  .adinfo_widget {
    border-bottom: 1px solid var(--dark-border) !important;
  }

  .MessageBody {
    background-color: var(--dark-medium-bg) !important;
    color: var(--dark-color) !important;
  }

  .ReplyMessageBody {
    .text-muted {
      color: var(--text-color) !important;
    }
  }

  .page_main {
    background: var(--dark-medium-bg) !important;
  }

  .top_bar {
    background: var(--dark-medium-bg) !important;
  }

  .normal_list {
    background: var(--dark-medium-bg) !important;
  }

  .posts_cat_nav {
    border-color: var(--dark-border) !important;

    a {
      background: var(--normal-btn) !important;
      color: var(--text-dark) !important;

      &.router-link-exact-active {
        background: var(--dark-ac-btn) !important;
        color: #fff !important;
      }
    }
  }

  .entry-title {
    font-size: 18px;
    margin-bottom: 5px;
    color: var(--dark-color) !important;

    a {
      color: var(--dark-color) !important;
    }
  }

  .entry_meta {
    font-size: 13px;
    color: var(--text-dark) !important;
  }

  .entry-content p {
    color: var(--text-color) !important;
  }

  .entry-footer {
    background: var(--dark-bg) !important;

    .normal_cat {
      background: var(--dark-ac-btn) !important;
    }
  }

  i {
    color: var(--dark-icon) !important;
  }

  .comnum {
    color: var(--text-color) !important;
  }

  .top_bar_scroll {
    background: rgba(27, 29, 48, 0.8) !important;
  }

  .p_item {
    border-color: var(--dark-border) !important;
  }

  .single_wrap {
    background: var(--dark-medium-bg) !important;

    .single-inner {
      border-top: 1px solid var(--dark-border) !important;
    }
  }

  .category {
    background: var(--btn-normal) !important;
    color: var(--dark-icon) !important;
  }

  .index_banner {
    .cover-div {
      filter: brightness(50%) !important;
    }
  }

  .links-item .content {
    background: var(--dark-bg) !important;

    .links-title {
      color: var(--dark-color) !important;
    }
  }

  .top_logo {
    a {
      color: #fff !important;
    }
  }

  .left_nav_inner {
    background: var(--dark-bg) !important;
  }

  .left_menu_box {
    ul {
      border-bottom: 1px solid var(--dark-border) !important;

      li {
        a {
          color: var(--dark-color) !important;
        }

        &.active a {
          background: var(--dark-ac-btn) !important;
          color: #fff !important;
        }
      }
    }
  }

  ::-webkit-scrollbar-thumb {
    background: #313131 !important;
  }

  #chat {
    background-color: var(--dark-medium-bg-rgba) !important;
    box-shadow: 0 8px 16px -4px rgb(0 0 0 / 31%) !important;

    .name {
      color: var(--dark-color) !important;
    }

    .date {
      color: var(--text-color) !important;
    }

    .chat-header {
      background-color: var(--dark-body-bg) !important;
      color: var(--dark-color) !important;
    }

    .comment-post button {
      background-color: var(--dark-ac-btn) !important;
      color: var(--dark-color) !important;

      &:hover {
        background: var(--dark-ac-btn-hover) !important;
      }
    }

    .chat-footer {
      background-color: var(--dark-medium-bg) !important;

      .content-editable {
        color: var(--dark-color) !important;
      }

      .content-editable:empty:before {
        color: var(--dark-color) !important;
      }

      a {
        color: var(--dark-color) !important;
      }
    }
  }

  #comments {
    background: var(--dark-ac-btn) !important;

    &:hover {
      background: var(--dark-ac-btn-hover) !important;
    }

    i {
      color: #fff !important;
    }
  }

  .circle_list {
    .list_user_meta {
      .name {
        color: var(--dark-color) !important;
      }

      time {
        color: var(--text-dark) !important;
      }
    }

    .t_content p {
      color: var(--text-color) !important;
    }

    .ip_loca {
      color: var(--text-color) !important;
    }

    .content {
      border-bottom: 1px solid var(--dark-border) !important;
    }

    .up_like span {
      color: var(--text-color) !important;
    }
  }

  .footer_nav_box {
    background: rgba(27, 29, 48, .8) !important;

    .inner a {
      color: var(--dark-icon) !important;

      &.router-link-exact-active, &.router-link-exact-active i {
        color: #fff !important;
      }
    }
  }

  .about {
    //.card-fullname {
    //  color: var(--dark-color) !important;
    //}
  }
}