$darken-amount = 30%

// 首屏加载的暗黑模式
fitst_dark()
  // Base Dark Color
  --color-site-body: $color-dark-site-body
  --color-read-bkg: $color-dark-read-bkg
  --color-read-post: $color-dark-read-post
  --color-site-bg: $color-dark-site-bg
  --color-site-inner: $color-dark-site-inner
  --color-site-footer: $color-dark-site-footer
  --color-card: $color-dark-card
  --color-text: $color-dark-text

  --color-block: $color-dark-block
  --color-codeblock: $color-dark-codeblock
  --color-inlinecode: $color-dark-inlinecode
  --color-h1: $color-dark-h1
  --color-h2: $color-dark-h2
  --color-h3: $color-dark-h3
  --color-h4: $color-dark-h4
  --color-h5: $color-dark-h5
  --color-h6: $color-dark-h6
  --color-p: $color-dark-p
  --color-list: $color-dark-list
  --color-list-hl: $color-dark-list-hl
  --color-meta: $color-dark-meta
  --color-link: $color-dark-link
  --color-copyright-bkg: $color-dark-copyright-bkg

  // * 拓展的全局变量   !!! 同步修改 base_first.styl !!!
  --color-card-blur: alpha($color-dark-card, .55)
  --color-site-bg-blur: alpha($color-dark-site-bg, .55)

  img
    filter: brightness(convert(hexo-config('color_scheme.dark.brightness'))) !important
  //header
  .blur
    background: rgba(darken($color-dark-site-bg, $darken-amount), .8) !important
  .white-box.blur
    background: rgba($color-dark-card, .9) !important
  .nav-main
    .u-search-input
      background: var(--color-card) !important
    img.logo-light
      display: none !important
    img.logo-dark
      display: block !important
  #l_main .article .prev-next>a
    background: var(--color-block) !important
    &:hover
      background: var(--color-site-bg) !important
  .article blockquote
    background: var(--color-block) !important
  .article-title a
    color: var(--color-h1) !important
  details>summary
    color: var(--color-p) !important
    background: var(--color-site-bg) !important
  details
    border: 1px solid var(--color-site-bg) !important
    background: var(--color-site-bg) !important

  .cover-wrapper
    if hexo-config('cover.layout_scheme') == 'search'
      .m_search
        .icon
          color: alpha($color-dark-p, .75)
        input.input
          background: alpha(darken($color-dark-card, $darken-amount), .55)
          &:hover
            background: alpha(darken($color-dark-card, $darken-amount * 2), .7) 
          &:focus
            background: darken($color-dark-card, $darken-amount * 2)
    if hexo-config('cover.layout_scheme') == 'dock' || hexo-config('cover.layout_scheme') == 'featured' || hexo-config('cover.layout_scheme') == 'focus'
      &.dock .menu, &.featured .menu, &.focus .menu
        border-radius: $border-button + 2px
        .list-h a
          color: alpha($color-dark-text, .7)
          // &.active
          //   img+p
          //     color: var(--color-text)
          //   background: var(--color-card)
          //   backdrop-filter: none
          &:hover
            background: alpha($color-dark-card, .5) !important

  if hexo-config('cover.layout_scheme') == 'dock'
    .cover-wrapper.dock .menu
      background: alpha(darken($color-dark-card, $darken-amount * 2), .6)
      .list-h a p
        color: $color-dark-p


  //search
  #u-search .modal,
  #u-search .modal-header,
  #u-search .modal-body
    background: var(--color-card) !important
  #u-search .modal-body .modal-results .result:hover
    background: var(--color-block) !important
  // .u-search-input:hover
  //   background: var(--color-block) !important
  // .u-search-input:focus
  //   background: var(--color-site-body) !important
  //phone search
  .l_header .m_search
    @media screen and (max-width: $device-mobile)
      background: var(--color-site-bg) !important

  // 增加右键菜单半透明
  ul.list-v.rightmenu.blur
    background: alpha($color-dark-card, .5)

  // 全局消息通知 
  .iziToast>.iziToast-close
    filter: invert(1)

if hexo-config('plugins.darkmode.enable')
  @media (prefers-color-scheme: dark)
    :root
      --color-mode: 'dark'
    :root:not([color-scheme])
      fitst_dark()
  [color-scheme='dark']
    fitst_dark()