gitalk · NriotHrreion · Jun 16, 2025
diff --git a/dev/index.html b/dev/index.html
@@ -7,7 +7,8 @@
     <title>Gitalk</title>
     <style type="text/css">
       body {
-        margin: 0
+        margin: 0;
+        background-color: #000;
       }
       #gitalk-container {
         margin: 0 auto;

diff --git a/dev/index.js b/dev/index.js
@@ -11,6 +11,6 @@
  *   pagerDirection: 'last'
  * }
  */
-const gitalk = new Gitalk(window.GT_CONFIG)
+const gitalk = new Gitalk(window.GT_CONFIG, 'dark')
 
 gitalk.render('gitalk-container')
diff --git a/readme-cn.md b/readme-cn.md
@@ -215,6 +215,24 @@ import GitalkComponent from "gitalk/dist/gitalk-component";
 
   初始化渲染并挂载插件。
 
+## 主题
+
+Gitalk默认使用浅色主题，你可以通过`theme`参数来启用深色主题。
+
+```js
+const gitalk = new Gitalk({
+  // ...
+  // 设置项
+}, 'dark')
+```
+
+```jsx
+<GitalkComponent options={{
+  // ...
+  // 设置项
+}} theme="dark"/>
+```
+
 ## TypeScript
 
 已经包括了配置项和Gitalk类的类型定义，不包括React组件的类型定义。

diff --git a/readme-zh.md b/readme-zh.md
@@ -210,6 +210,24 @@ import GitalkComponent from "gitalk/dist/gitalk-component";
 
   初始化渲染並掛載插件。
 
+## 主題
+
+Gitalk預設使用淺色主題，你可以透過`theme`參數來啟用深色主題。
+
+```js
+const gitalk = new Gitalk({
+  // ...
+  // 設置项
+}, 'dark')
+```
+
+```jsx
+<GitalkComponent options={{
+  // ...
+  // 設置项
+}} theme="dark"/>
+```
+
 ## TypeScript
 
 已經包括了配置項和Gitalk類的類型定義，不包括React組件的類型定義。

diff --git a/readme.md b/readme.md
@@ -215,6 +215,24 @@ And use the component like
 
   Init render and mount plugin.
 
+## Theme
+
+By default, Gitalk uses light theme. You can choose to use dark theme by setting the `theme` parameter.
+
+```js
+const gitalk = new Gitalk({
+  // ...
+  // options
+}, 'dark')
+```
+
+```jsx
+<GitalkComponent options={{
+  // ...
+  // options
+}} theme="dark"/>
+```
+
 ## TypeScript
 
 TypeScript definitions for options and Gitalk class come with the package and should be automatically detected.

diff --git a/src/__tests__/gitalk.test.js b/src/__tests__/gitalk.test.js
@@ -18,6 +18,20 @@ describe('Gitalk', function () {
     const props = {}
     const wrapper = shallow(<Gitalk {...props} />)
     expect(wrapper.find('.gt-container')).toHaveLength(1)
+    expect(wrapper.find('.gt-light')).toHaveLength(1)
+    expect(wrapper.find('.gt-dark')).toHaveLength(0)
+
+    moxios.wait(function () {
+      wrapper.update()
+      expect(wrapper.find(Comment)).toHaveLength(2)
+      done()
+    })
+  })
+  it('render-dark-theme', function (done) {
+    const props = {}
+    const wrapper = shallow(<Gitalk {...props} theme="dark"/>)
+    expect(wrapper.find('.gt-light')).toHaveLength(0)
+    expect(wrapper.find('.gt-dark')).toHaveLength(1)
 
     moxios.wait(function () {
       wrapper.update()

diff --git a/src/gitalk.jsx b/src/gitalk.jsx
@@ -44,6 +44,8 @@ class GitalkComponent extends Component {
     isInputFocused: false,
     isPreview: false,
 
+    theme: 'light',
+
     isOccurError: false,
     errorMsg: '',
   }
@@ -80,6 +82,8 @@ class GitalkComponent extends Component {
       updateCountCallback: null
     }, props.options)
 
+    this.state.theme = props.theme
+
     this.state.pagerDirection = this.options.pagerDirection
     const storedComment = window.localStorage.getItem(GT_COMMENT)
     if (storedComment) {
@@ -542,8 +546,8 @@ class GitalkComponent extends Component {
     this.setState({
       isPreview: !this.state.isPreview
     })
-    if(!this.state.isPreview){
-      return;
+    if (!this.state.isPreview) {
+      return
     }
     axiosGithub.post('/markdown', {
       text: this.state.comment
@@ -753,9 +757,9 @@ class GitalkComponent extends Component {
   }
 
   render () {
-    const { isIniting, isNoInit, isOccurError, errorMsg, isInputFocused } = this.state
+    const { isIniting, isNoInit, isOccurError, errorMsg, isInputFocused, theme } = this.state
     return (
-      <div className={`gt-container${isInputFocused ? ' gt-input-focused' : ''}`}>
+      <div className={`gt-container${isInputFocused ? ' gt-input-focused' : ''}${theme === 'light' ? ' gt-light' : ' gt-dark'}`}>
         {isIniting && this.initing()}
         {!isIniting && (
           isNoInit ? [

diff --git a/src/index.js b/src/index.js
@@ -4,8 +4,9 @@ import 'es6-promise/auto'
 import GitalkComponent from './gitalk'
 
 class Gitalk {
-  constructor (options = {}) {
+  constructor (options = {}, theme = 'light') {
     this.options = options
+    this.theme = theme
   }
 
   render (container, callback) {
@@ -25,7 +26,7 @@ class Gitalk {
       callback = () => {}
     }
 
-    return render(<GitalkComponent options={this.options}/>, node, callback)
+    return render(<GitalkComponent options={this.options} theme={this.theme}/>, node, callback)
   }
 }
 

diff --git a/src/style/dark.styl b/src/style/dark.styl
@@ -0,0 +1,42 @@
+/* variables */
+$gt-color-main := #6190e8
+$gt-color-sub := #a1a1a1
+$gt-color-text := #dddddd
+$gt-color-loader := #999999
+$gt-color-error := #ff3860
+$gt-color-hr :=  #333333
+$gt-color-popover-bg := #111111
+$gt-color-input-border := rgba(0,0,0,0.1)
+$gt-color-input-bg := #262626
+$gt-color-comment-bg := #f9f9f9
+$gt-color-comment-adminbg := #f6f9fe
+$gt-color-comment-txt := #333333
+$gt-color-link-active := #333333
+$gt-color-btn := #ffffff
+$gt-color-popbg := #ffffff
+
+.gt-container.gt-dark
+  .gt-meta
+    border-bottom-color: $gt-color-hr
+    .gt-counts
+      color: $gt-color-text
+    .gt-user svg
+      fill: $gt-color-text
+    .gt-popup
+      background-color: $gt-color-popover-bg
+      border-color: $gt-color-hr
+      .gt-copyright
+        border-top-color: $gt-color-hr
+  .gt-header
+    .gt-avatar-github svg
+      fill: #ffffff
+    .gt-header-comment
+      textarea, .gt-header-preview
+        background-color: $gt-color-input-bg
+        color: $gt-color-text
+  .gt-comments .gt-comment .gt-comment-content
+    background-color: $gt-color-input-bg
+    &:hover
+      box-shadow: none
+    .gt-comment-body
+      color: $gt-color-text
diff --git a/src/style/index.styl b/src/style/index.styl
@@ -1,3 +1,5 @@
+@import 'dark.styl'
+
 /* variables */
 $gt-color-main := #6190e8
 $gt-color-sub := #a1a1a1
@@ -173,7 +175,7 @@ $gt-size-avatar-mobi := em(32px)
     &-login
       margin-right: 0
     &-preview
-      background-color: $gt-color-btn
+      background-color: transparent
       color: $gt-color-main
       &:hover
         background-color: darken($gt-color-btn, 5%)

diff --git a/typings/index.d.ts b/typings/index.d.ts
@@ -18,8 +18,9 @@ declare class Gitalk {
     /**
      * Construct a Gitalk instance.
      * @param options Gitalk options
+     * @param theme Use light or dark theme. (default: light)
      */
-    constructor(options: Gitalk.GitalkOptions);
+    constructor(options: Gitalk.GitalkOptions, theme?: 'light' | 'dark');
 
     /**
      * Init render and mount plugin.