Update comment themes; add github theme family

This commit is contained in:
2026-04-06 16:32:15 -07:00
parent 162032e3f3
commit 153bd0cf39
3 changed files with 81 additions and 4 deletions

View File

@@ -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",
};

View File

@@ -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

View File

@@ -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 {