已过期

在Hexo的Butterfly主题使用Twikoo评论配置黑暗模式

首先确保Twikoo评论功能及显示正常

效果

适配黑暗模式教程

  1. 在主题文件夹下找到文件 /source/css/_mode/darkmode.styl并打开
  2. 在最后加入以下代码，一定要注意缩进

/* Twikoo 评论 开始*/
/* 表单前标题 */
.el-input-group__append,
.el-input-group__prepend 
  background-color #292b2c !important
  color #B8B8B8 !important
  border 0px solid #307af6 !important

/* 表单输入框 */
.el-input__inner 
  background #000 !important
  border 0px solid #307af6 !important
  color #B8B8B8 !important

/* 评论输入框 */
.el-textarea__inner 
  background #000 !important
  border 0px solid #307af6 !important
  color #B8B8B8 !important

/* 不显示评论数 */
.tk-comments-title 
  display none

/* 加载时背景颜色 */
.el-loading-mask 
  background-color #1d1f20 !important

/* 评论博主标签圆角 */
.tk-tag-green 
  border-radius 4px
  background-color #67c23a21 !important
  border 0px solid #e1f3d8 !important

/* 预览按钮 */
.el-button 
  background #252627 !important
  border 0px solid #307af6 !important
  color #B8B8B8 !important
  &:hover 
    background #307af6 !important

/* 发送按钮禁用状态 */
.el-button--primary.is-disabled,
.el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:hover 
  background-color #307AF621 !important
  border-color rgba(0, 0, 0, 0) !important
  color #999999 !important

/* 发送按钮正常状态 */
.el-button--primary 
  background-color #307af6 !important
  border-color #307af6 !important
  color #B8B8B8 !important

/* 预览框 */
.tk-preview-container
  color: #B8B8B8
  border: 1px solid #f0f0f0

/* 更多评论的渐变遮罩 */
.tk-expand 
  background linear-gradient(rgba(29, 31, 32, 0), rgba(29, 31, 32, 1)) !important
  color #B8B8B8

/* 评论时间 */
.tk-time 
  color #999999

/* Twikoo 评论 结束*/

注意缩进！！！
注意缩进！！！
注意缩进！！！

如果不清楚如何缩进，可以 参考下面的代码添加。
也直接使用下面的代码全部替换（主题版本3.3）。


if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
  [data-theme='dark']
    --global-bg: darken(#121212, 2)
    --font-color: alpha(#FFFFFF, .7)
    --hr-border: alpha(#FFFFFF, .4)
    --hr-before-color: alpha(#FFFFFF, .7)
    --search-bg: #121212
    --search-input-color: alpha(#FFFFFF, .7)
    --search-result-title: alpha(#FFFFFF, .9)
    --preloader-bg: darken(#121212, 2)
    --preloader-color: alpha(#FFFFFF, .7)
    --tab-border-color: #2c2c2c
    --tab-botton-bg: #2c2c2c
    --tab-botton-color: alpha(#FFFFFF, .7)
    --tab-button-hover-bg: lighten(#121212, 15)
    --tab-button-active-bg: #121212
    --card-bg: #121212
    --sidebar-bg: #121212
    --btn-hover-color: lighten(#121212, 40)
    --btn-color: alpha(#FFFFFF, .7)
    --btn-bg: lighten(#121212, 5)
    --text-bg-hover: lighten(#121212, 15)
    --light-grey: alpha(#FFFFFF, .7)
    --white: alpha(#FFFFFF, .9)
    --text-highlight-color: alpha(#FFFFFF, .9)
    --blockquote-color: alpha(#FFFFFF, .7)
    --blockquote-bg: lighten(#121212, 10)
    --reward-pop: lighten(#121212, 10)
    --toc-link-color: alpha(#FFFFFF, .6)

    #web_bg:before,
    #footer:before,
    #page-header:before
      position: absolute
      width: 100%
      height: 100%
      background-color: alpha($dark-black, .7)
      content: ''

    #article-container
      code
        background: #2c2c2c

      pre > code
        background: 0

      .note
        code
          background: $code-background

      .aplayer
        filter: brightness(.8)

    // 頭部
    #page-header
      & > #nav.fixed,
      &.no-top-img #nav
        background: alpha(#121212, .8)
        box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)

    // 代碼框
    #article-container
      pre,
      .highlight:not(.js-file-line-container)
        background-color: lighten(#121212, 2) !important
        color: alpha(#FFFFFF, .7) !important

      figure.highlight
        box-shadow: none

        if hexo-config('highlight_settings') && hexo-config('highlight_settings.enable')
          table::-webkit-scrollbar-thumb
            background: lighten(#121212, 5)

          .line:before
            color: alpha(#FFFFFF, .7) !important

          .hljs
            background-color: lighten(#121212, 2) !important

        pre[class*='language-']::-webkit-scrollbar-thumb
          background: lighten(#121212, 5)

        .highlight-tools
          background: lighten(#121212, 3) !important
          color: #90a4ae !important

    #post-comment
      #comment-switch
        if hexo-config('comments.text')
          background: #2c2c2c !important

        .switch-btn
          filter: brightness(.8)

    // note
    if hexo-config('note.style') == 'modern' || hexo-config('note.style') == 'flat'
      .note
        filter: brightness(.8)

    // hide-tags
    .hide-button,
    .btn-beautify,
    .mermaid,
    .post-outdate-notice,
    .error-img,
    #article-container iframe,
    img,
    .gist
      filter: brightness(.8)

    #aside_content .aside-list > .aside-list-item:not(:last-child)
      border-bottom: 1px dashed alpha(#FFFFFF, .1)

    // 第三方
    // 插件 hexo-blog-encrypt
    #hexo-blog-encrypt
      label,
      input
        color: alpha(#FFFFFF, .7) !important

      input
        background-color: #121212

    // Gitalk
    #gitalk-container
      filter: brightness(.8)

      svg
        fill: alpha(#FFFFFF, .9) !important

    // Disqus and Disqusjs
    #disqus_thread
      #dsqjs
        .dsqjs-tab-active,
        .dsqjs-no-comment
          color: alpha(#FFFFFF, .7)

        .dsqjs-order-label
          background-color: lighten(#121212, 5)

        .dsqjs-post-body
          color: alpha(#FFFFFF, .7)

          code,
          pre
            background: #2c2c2c

          blockquote
            color: alpha(#FFFFFF, .7)

    #artitalk_main #lazy
      background: #121212

    #operare_artitalk .c2
      background: #121212

    /* Twikoo 评论 开始*/
    /* 表单前标题 */
    .el-input-group__append,
    .el-input-group__prepend 
      background-color #292b2c !important
      color #B8B8B8 !important
      border 0px solid #307af6 !important

    /* 表单输入框 */
    .el-input__inner 
      background #000 !important
      border 0px solid #307af6 !important
      color #B8B8B8 !important

    /* 评论输入框 */
    .el-textarea__inner 
      background #000 !important
      border 0px solid #307af6 !important
      color #B8B8B8 !important

    /* 不显示评论数 */
    .tk-comments-title 
      display none

    /* 加载时背景颜色 */
    .el-loading-mask 
      background-color #1d1f20 !important

    /* 评论博主标签圆角 */
    .tk-tag-green 
      border-radius 4px
      background-color #67c23a21 !important
      border 0px solid #e1f3d8 !important

    /* 预览按钮 */
    .el-button 
      background #252627 !important
      border 0px solid #307af6 !important
      color #B8B8B8 !important
      &:hover 
        background #307af6 !important

    /* 发送按钮禁用状态 */
    .el-button--primary.is-disabled,
    .el-button--primary.is-disabled:active,
    .el-button--primary.is-disabled:focus,
    .el-button--primary.is-disabled:hover 
      background-color #307AF621 !important
      border-color rgba(0, 0, 0, 0) !important
      color #999999 !important

    /* 发送按钮正常状态 */
    .el-button--primary 
      background-color #307af6 !important
      border-color #307af6 !important
      color #B8B8B8 !important

    /* 预览框 */
    .tk-preview-container
      color: #B8B8B8
      border: 1px solid #f0f0f0

    /* 更多评论的渐变遮罩 */
    .tk-expand 
      background linear-gradient(rgba(29, 31, 32, 0), rgba(29, 31, 32, 1)) !important
      color #B8B8B8

    /* 评论时间 */
    .tk-time 
      color #999999
    
    /* Twikoo 评论 结束*/