From 153bd0cf39f1b356f14f0bdfda177a418fd90bdf Mon Sep 17 00:00:00 2001
From: Timothy Pidashev <mail@timmypidashev.dev>
Date: Mon, 6 Apr 2026 16:32:15 -0700
Subject: [PATCH] Update comment themes; add github theme family

---
 src/lib/themes/families/github.ts | 74 +++++++++++++++++++++++++++++++
 src/lib/themes/index.ts           |  2 +
 src/pages/api/giscus-theme.ts     |  9 ++--
 3 files changed, 81 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/themes/families/github.ts

diff --git a/src/lib/themes/families/github.ts b/src/lib/themes/families/github.ts
new file mode 100644
index 0000000..d41d05e
--- /dev/null
+++ b/src/lib/themes/families/github.ts
@@ -0,0 +1,74 @@
+import type { Theme, ThemeFamily } from "../types";
+
+// GitHub — the familiar look from github.com.
+// Dark (default dark), Dark Dimmed (softer), Light (classic white).
+
+const dark: Theme = {
+  id: "github-dark",
+  family: "github",
+  label: "dark",
+  name: "GitHub Dark",
+  type: "dark",
+  colors: {
+    background: "13 17 23",
+    foreground: "230 237 243",
+    red: "255 123 114", redBright: "255 166 158",
+    orange: "217 156 90", orangeBright: "240 183 122",
+    green: "126 231 135", greenBright: "168 242 175",
+    yellow: "224 194 133", yellowBright: "240 215 168",
+    blue: "121 192 255", blueBright: "165 214 255",
+    purple: "210 153 255", purpleBright: "226 187 255",
+    aqua: "118 214 198", aquaBright: "160 230 218",
+    surface: "22 27 34",
+  },
+  canvasPalette: [[255,123,114],[126,231,135],[224,194,133],[121,192,255],[210,153,255],[118,214,198]],
+};
+
+const dimmed: Theme = {
+  id: "github-dimmed",
+  family: "github",
+  label: "dimmed",
+  name: "GitHub Dark Dimmed",
+  type: "dark",
+  colors: {
+    background: "34 39 46",
+    foreground: "173 186 199",
+    red: "255 123 114", redBright: "255 166 158",
+    orange: "219 171 127", orangeBright: "236 195 158",
+    green: "87 196 106", greenBright: "130 218 144",
+    yellow: "224 194 133", yellowBright: "240 215 168",
+    blue: "108 182 255", blueBright: "152 206 255",
+    purple: "195 145 243", purpleBright: "218 180 248",
+    aqua: "96 200 182", aquaBright: "140 220 208",
+    surface: "45 51 59",
+  },
+  canvasPalette: [[255,123,114],[87,196,106],[224,194,133],[108,182,255],[195,145,243],[96,200,182]],
+};
+
+const light: Theme = {
+  id: "github-light",
+  family: "github",
+  label: "light",
+  name: "GitHub Light",
+  type: "light",
+  colors: {
+    background: "255 255 255",
+    foreground: "31 35 40",
+    red: "207 34 46", redBright: "227 70 80",
+    orange: "191 135 0", orangeBright: "212 160 30",
+    green: "26 127 55", greenBright: "45 155 78",
+    yellow: "159 115 0", yellowBright: "182 140 22",
+    blue: "9 105 218", blueBright: "48 132 238",
+    purple: "130 80 223", purpleBright: "158 112 238",
+    aqua: "18 130 140", aquaBright: "42 158 168",
+    surface: "246 248 250",
+  },
+  canvasPalette: [[207,34,46],[26,127,55],[159,115,0],[9,105,218],[130,80,223],[18,130,140]],
+};
+
+export const github: ThemeFamily = {
+  id: "github",
+  name: "GitHub",
+  themes: [dark, dimmed, light],
+  default: "github-dark",
+};
diff --git a/src/lib/themes/index.ts b/src/lib/themes/index.ts
index 633e0e1..c7f539c 100644
--- a/src/lib/themes/index.ts
+++ b/src/lib/themes/index.ts
@@ -10,6 +10,7 @@ import { tokyonight } from "./families/tokyonight";
 import { solarized } from "./families/solarized";
 import { onedark } from "./families/onedark";
 import { monokai } from "./families/monokai";
+import { github } from "./families/github";
 
 export const DEFAULT_THEME_ID = "darkbox-retro";
 
@@ -25,6 +26,7 @@ export const FAMILIES: ThemeFamily[] = [
   solarized,
   onedark,
   monokai,
+  github,
 ];
 
 // Flat lookup — backward compatible with all existing consumers
diff --git a/src/pages/api/giscus-theme.ts b/src/pages/api/giscus-theme.ts
index f677a40..83c661b 100644
--- a/src/pages/api/giscus-theme.ts
+++ b/src/pages/api/giscus-theme.ts
@@ -17,6 +17,7 @@ export const GET: APIRoute = ({ url }) => {
   }
 
   const c = theme.colors;
+  const isLight = theme.type === "light";
   const fg = rgbToHex(c.foreground);
   const fgMuted = rgbToRgba(c.foreground, 0.6);
   const fgSubtle = rgbToRgba(c.foreground, 0.4);
@@ -31,8 +32,8 @@ export const GET: APIRoute = ({ url }) => {
   const surfaceAlpha = rgbToRgba(c.surface, 0.3);
   const surfaceBorder = rgbToRgba(c.surface, 0.5);
   const surfaceHover = rgbToRgba(c.surface, 0.6);
-  const bgTransparent = "rgba(0, 0, 0, 0.5)";
-  const bgSubtle = "rgba(0, 0, 0, 0.3)";
+  const bgTransparent = isLight ? rgbToRgba(c.foreground, 0.06) : rgbToRgba(c.foreground, 0.08);
+  const bgSubtle = isLight ? rgbToRgba(c.foreground, 0.04) : rgbToRgba(c.foreground, 0.05);
 
   const css = `
 main {
@@ -130,7 +131,7 @@ main {
 }
 
 main .pagination-loader-container {
-  background-image: url(https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg);
+  background-image: url(https://github.com/images/modules/pulls/progressive-disclosure-line${isLight ? "" : "-dark"}.svg);
 }
 
 .gsc-reactions-count { display: none; }
@@ -155,7 +156,7 @@ main .pagination-loader-container {
 .gsc-homepage-bg { background-color: transparent; }
 
 main .gsc-loading-image {
-  background-image: url(https://github.githubassets.com/images/mona-loading-dimmed.gif);
+  background-image: url(https://github.githubassets.com/images/mona-loading-${isLight ? "default" : "dimmed"}.gif);
 }
 
 .gsc-comment {