From 056c8bad961b6f0351f0606c7ceaa50665219352 Mon Sep 17 00:00:00 2001
From: radishzzz <shuyinsen@gmail.com>
Date: Sat, 31 May 2025 00:25:36 +0100
Subject: [PATCH] style: optimize giscus styling

---
 public/vendors/giscus/theme-dark.css  | 91 ++++++++++++++++++++++++--
 public/vendors/giscus/theme-light.css | 93 ++++++++++++++++++++++++---
 src/components/Comments/Giscus.astro  |  3 +
 src/config.ts                         |  2 +-
 4 files changed, 173 insertions(+), 16 deletions(-)

diff --git a/public/vendors/giscus/theme-dark.css b/public/vendors/giscus/theme-dark.css
index 738d399..a8d8279 100644
--- a/public/vendors/giscus/theme-dark.css
+++ b/public/vendors/giscus/theme-dark.css
@@ -4,6 +4,20 @@
  */
 
  main {
+  /* Custom Theme Colors */
+  --secondary-color: oklch(77% 0.005 298);
+  --secondary-color-25: oklch(77% 0.005 298 / 25%);
+  --background-color: oklch(22% 0.005 298);
+
+  --color-fg-default: var(--secondary-color);
+  --color-canvas-default: var(--background-color);
+  --color-canvas-overlay: var(--background-color);
+  --color-canvas-inset: var(--background-color);
+  --color-canvas-subtle: var(--background-color);
+  --color-accent-fg: oklch(70.7% 0.165 254.624);
+  --color-accent-emphasis: oklch(70.7% 0.165 254.624);
+
+  /* Offical Theme Colors */
   --color-prettylights-syntax-comment: #8b949e;
   --color-prettylights-syntax-constant: #79c0ff;
   --color-prettylights-syntax-entity: #d2a8ff;
@@ -60,18 +74,18 @@
   --color-segmented-control-bg: rgb(110 118 129 / 10%);
   --color-segmented-control-button-bg: #0d1117;
   --color-segmented-control-button-selected-border: #6e7681;
-  --color-fg-default: #e6edf3;
+  /* --color-fg-default: var(--secondary-color); */
   --color-fg-muted: #7d8590;
   --color-fg-subtle: #6e7681;
-  --color-canvas-default: #0d1117;
-  --color-canvas-overlay: #161b22;
-  --color-canvas-inset: #010409;
-  --color-canvas-subtle: #161b22;
+  /* --color-canvas-default: var(--background-color);
+  --color-canvas-overlay: var(--background-color);
+  --color-canvas-inset: var(--background-color);
+  --color-canvas-subtle: var(--background-color); */
   --color-border-default: #30363d;
   --color-border-muted: #21262d;
   --color-neutral-muted: rgb(110 118 129 / 40%);
-  --color-accent-fg: #2f81f7;
-  --color-accent-emphasis: #1f6feb;
+  /* --color-accent-fg: oklch(70.7% 0.165 254.624);
+  --color-accent-emphasis: oklch(70.7% 0.165 254.624); */
   --color-accent-muted: rgb(56 139 253 / 40%);
   --color-accent-subtle: rgb(56 139 253 / 10%);
   --color-success-fg: #3fb950;
@@ -96,4 +110,67 @@ main .pagination-loader-container {
 
 main .gsc-loading-image {
   background-image: url("https://github.githubassets.com/images/mona-loading-dark.gif");
+}
+
+/* Smooth Font */
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* All Border Color */
+*:not(.BtnGroup-item) {
+  border-color: var(--secondary-color-25)!important;
+}
+
+/* No Giscus Copyright and Avatar Line */
+.gsc-tl-line,
+.gsc-left-header em {
+  display: none;
+}
+
+/* Comments Count Font No Underline and Small Size */
+h4.gsc-comments-count-separator,
+h4.gsc-replies-count {
+  color: var(--secondary-color);
+  font-size: 0.875rem;
+}
+
+/* Oldest and Newest Buttons Style */
+.BtnGroup-item,
+.BtnGroup-item.BtnGroup-item--selected {
+  background-color: var(--background-color);
+}
+.BtnGroup-item.BtnGroup-item--selected {
+  border-color: var(--secondary-color-25)!important;
+}
+.BtnGroup-item:not(.BtnGroup-item--selected):hover {
+  border-color: var(--secondary-color-25)!important;
+}
+.BtnGroup-item button.btn:hover {
+  background-color: var(--background-color);
+}
+
+/* Reply Time No Underline */
+.gsc-comment-author a:has(time),
+.gsc-reply-author a:has(time) {
+  text-decoration: none;
+  font-size: 0.75rem;
+}
+
+/* Comments Count No Underline */
+.gsc-comments-count a {
+  text-decoration: none!important;
+}
+
+/* Social Reactions Icons */
+.gsc-social-reaction-summary-item.has-reacted {
+  background-color: var(--background-color);
+}
+.gsc-social-reaction-summary-item.has-reacted:hover {
+  background-color: var(--background-color)!important;
+  border-color: var(--color-accent-fg)!important;
+}
+.color-bg-info {
+  background-color: var(--background-color);
 }
\ No newline at end of file
diff --git a/public/vendors/giscus/theme-light.css b/public/vendors/giscus/theme-light.css
index 7bf1850..099d851 100644
--- a/public/vendors/giscus/theme-light.css
+++ b/public/vendors/giscus/theme-light.css
@@ -4,6 +4,20 @@
  */
 
  main {
+  /* Custom Theme Colors */
+  --secondary-color: oklch(40% 0.005 298);
+  --secondary-color-25: oklch(40% 0.005 298 / 25%);
+  --background-color: oklch(96% 0.005 298);
+
+  --color-fg-default: var(--secondary-color);
+  --color-canvas-default: var(--background-color);
+  --color-canvas-overlay: var(--background-color);
+  --color-canvas-inset: var(--background-color);
+  --color-canvas-subtle: var(--background-color);
+  --color-accent-fg: oklch(48.8% 0.243 264.376);
+  --color-accent-emphasis: oklch(48.8% 0.243 264.376);
+
+  /* Offical Theme Colors */
   --color-prettylights-syntax-comment: #6e7781;
   --color-prettylights-syntax-constant: #0550ae;
   --color-prettylights-syntax-entity: #8250df;
@@ -60,18 +74,18 @@
   --color-segmented-control-bg: #eaeef2;
   --color-segmented-control-button-bg: #fff;
   --color-segmented-control-button-selected-border: #8c959f;
-  --color-fg-default: #1F2328;
+  /* --color-fg-default: var(--secondary-color); */
   --color-fg-muted: #656d76;
   --color-fg-subtle: #6e7781;
-  --color-canvas-default: #fff;
-  --color-canvas-overlay: #fff;
-  --color-canvas-inset: #f6f8fa;
-  --color-canvas-subtle: #f6f8fa;
+  /* --color-canvas-default: var(--background-color);
+  --color-canvas-overlay: var(--background-color);
+  --color-canvas-inset: var(--background-color);
+  --color-canvas-subtle: var(--background-color); */
   --color-border-default: #d0d7de;
   --color-border-muted: hsl(210deg 18% 87% / 100%);
   --color-neutral-muted: rgb(175 184 193 / 20%);
-  --color-accent-fg: #0969da;
-  --color-accent-emphasis: #0969da;
+  /* --color-accent-fg: oklch(48.8% 0.243 264.376);
+  --color-accent-emphasis: oklch(48.8% 0.243 264.376); */
   --color-accent-muted: rgb(84 174 255 / 40%);
   --color-accent-subtle: #ddf4ff;
   --color-success-fg: #1a7f37;
@@ -96,4 +110,67 @@ main .pagination-loader-container {
 
 main .gsc-loading-image {
   background-image: url("https://github.githubassets.com/images/mona-loading-default.gif");
-}
\ No newline at end of file
+}
+
+/* Smooth Font */
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* All Border Color */
+*:not(.BtnGroup-item) {
+  border-color: var(--secondary-color-25)!important;
+}
+
+/* No Giscus Copyright and Avatar Line */
+.gsc-tl-line,
+.gsc-left-header em {
+  display: none;
+}
+
+/* Comments Count Font No Underline and Small Size */
+h4.gsc-comments-count-separator,
+h4.gsc-replies-count {
+  color: var(--secondary-color);
+  font-size: 0.875rem;
+}
+
+/* Oldest and Newest Buttons Style */
+.BtnGroup-item,
+.BtnGroup-item.BtnGroup-item--selected {
+  background-color: var(--background-color);
+}
+.BtnGroup-item.BtnGroup-item--selected {
+  border-color: var(--secondary-color-25)!important;
+}
+.BtnGroup-item:not(.BtnGroup-item--selected):hover {
+  border-color: var(--secondary-color-25)!important;
+}
+.BtnGroup-item button.btn:hover {
+  background-color: var(--background-color);
+}
+
+/* Reply Time No Underline */
+.gsc-comment-author a:has(time),
+.gsc-reply-author a:has(time) {
+  text-decoration: none;
+  font-size: 0.75rem;
+}
+
+/* Comments Count No Underline */
+.gsc-comments-count a {
+  text-decoration: none!important;
+}
+
+/* Social Reactions Icons */
+.gsc-social-reaction-summary-item.has-reacted {
+  background-color: var(--background-color);
+}
+.gsc-social-reaction-summary-item.has-reacted:hover {
+  background-color: var(--background-color)!important;
+  border-color: var(--color-accent-fg)!important;
+}
+.color-bg-info {
+  background-color: var(--background-color);
+}
diff --git a/src/components/Comments/Giscus.astro b/src/components/Comments/Giscus.astro
index a9e5c83..2624661 100644
--- a/src/components/Comments/Giscus.astro
+++ b/src/components/Comments/Giscus.astro
@@ -46,6 +46,9 @@ const shouldRender = Boolean(repo && repoID && categoryID)
     return isDark
       ? `${siteUrl}/vendors/giscus/theme-dark.css`
       : `${siteUrl}/vendors/giscus/theme-light.css`
+      // For local development
+      // ? `http://localhost:4321/vendors/giscus/theme-dark.css`
+      // : `http://localhost:4321/vendors/giscus/theme-light.css`
   }
 
   function setupGiscus() {
diff --git a/src/config.ts b/src/config.ts
index 5d78869..2f89a34 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -96,7 +96,7 @@ export const themeConfig: ThemeConfig = {
       categoryID: 'DIC_kwDOOy1K084CqwuZ',
       mapping: 'pathname',
       strict: '0',
-      reactionsEnabled: '0',
+      reactionsEnabled: '1',
       emitMetadata: '0',
       inputPosition: 'bottom',
     },