【功能建议】配置 Gitalk 主题颜色

Author: LolipopJCreated Jun 3, 2021Updated Apr 19, 2025

Labelsenhancement

现代网页设计不拘一格，如果能够在引入 Gitalk 时方便地配置 primary color，适配网页的主色调，将非常实用。

考虑能否在 new Gitalk() 时传入主题颜色参数，在 React 渲染 Gitalk 时，利用主题颜色参数创建一个 style，直接将这个 style 作为 Gitalk 的 class，而不是默认地在自己的代码里引入它的样式表 import 'gitalk/dist/gitalk.css';。

受这个回答启发，附上在 Vue 中覆盖原来的主题颜色的样式表代码，适用于 1.7.2 版本：

scss

<style lang="scss">
$gt-color-main: #5cbdb9; // primary color
$gt-color-btn: #ffffff;

.gt-container {
  a {
    color: $gt-color-main;
    &:hover {
      color: lighten($gt-color-main, 20%);
      border-color: lighten($gt-color-main, 20%);
    }
  }

  .gt-svg svg {
    fill: $gt-color-main;
  }

  .gt-spinner::before {
    border-color: $gt-color-btn;
    border-top-color: $gt-color-main;
  }

  .gt-btn {
    background-color: $gt-color-main;
    border-color: $gt-color-main;
    color: $gt-color-btn;
    &-login {
      &:hover {
        background-color: lighten($gt-color-main, 20%);
        border-color: lighten($gt-color-main, 20%);
      }
    }
    &-preview {
      background-color: $gt-color-btn;
      color: $gt-color-main;
      &:hover {
        background-color: darken($gt-color-btn, 5%);
        border-color: lighten($gt-color-main, 20%);
      }
    }
    &-public {
      &:hover {
        background-color: lighten($gt-color-main, 20%);
        border-color: lighten($gt-color-main, 20%);
      }
    }
  }

  .gt-link {
    border-bottom-color: $gt-color-main;
  }

  .gt-user .is--poping .gt-ico svg {
    fill: $gt-color-main;
  }

  .gt-popup .gt-action.is--active:before {
    background: $gt-color-main;
  }

  .gt-header-controls-tip {
    color: $gt-color-main;
  }

  .gt-comment-username {
    color: $gt-color-main;
  }
}
</style>

覆盖 Gitalk 颜色

Source: gitalk/gitalk

View original on GitHub View discussion on GitHub