if hexo-config('readmode') && hexo-config('readmode.enable')
  .read-mode
    padding: 0 !important
    background: $pale-yellow

    #page-header
      #site-name,
      .site-page
        color: $font-black
        text-shadow: none

      .menus_item_child
        background-color: darken($pale-yellow, 3) !important

        & > li
          &:hover
            background-color: darken($pale-yellow, 10) !important

    #top-container
      height: 14rem
      background-color: $pale-yellow
      background-image: none !important

      a
        color: $font-black

      &:before
        opacity: 0

      & > #post-info
        padding: 0
        color: $font-black
        text-align: center

    #page-header
      &.fixed
        background: alpha(darken($pale-yellow, 5), .5)
        box-shadow: none

        &.open-sidebar
          .site-page
            visibility: visible

    .layout_post
      background: $pale-yellow
      box-shadow: none

      &:hover
        box-shadow: none

      .article-container
        pre,
        .highlight:not(.js-file-line-container)
          background: darken($pale-yellow, 5)

    .highlight
      display: block !important

    blockquote
      border-left: .2rem solid #d6dbdf
      background-color: rgba(102, 128, 153, .05)

    #rightside
      #darkmode
        display: none

    & > canvas
      display: none !important

    .code-area-wrap > .highlight-tools,
    #sidebar,
    #toggle-sidebar,
    #footer,
    .layout_post > div,
    .layout_post > hr,
    .layout_post > nav
      display: none

    hr
      border: 2px dashed #d6dbdf
      background: transparent

      &:before
        color: darken(#d6dbdf, 10)

    &::-webkit-scrollbar-thumb
      background: darken($pale-yellow, 10)

    *::-webkit-scrollbar-thumb
      background: darken($pale-yellow, 10)

    #web_bg
      background: none