diff --git a/src/components/live/StatusBadge.tsx b/src/components/live/StatusBadge.tsx
index 2f2fa7a..57c6a86 100644
--- a/src/components/live/StatusBadge.tsx
+++ b/src/components/live/StatusBadge.tsx
@@ -16,7 +16,7 @@ export function StatusBadge({
const config = {
live: {
label: "LIVE",
- className: "bg-red-600 text-white",
+ className: "bg-live text-white",
icon: Circle,
},
planned: {
diff --git a/src/components/nostr/kinds/ZapReceiptRenderer.tsx b/src/components/nostr/kinds/ZapReceiptRenderer.tsx
index 3a08432..395b655 100644
--- a/src/components/nostr/kinds/ZapReceiptRenderer.tsx
+++ b/src/components/nostr/kinds/ZapReceiptRenderer.tsx
@@ -66,8 +66,8 @@ export function Kind9735Renderer({ event }: BaseEventProps) {
{/* Zap indicator */}
-
-
+
+
{amountInSats.toLocaleString("en", {
notation: "compact",
})}
diff --git a/src/index.css b/src/index.css
index bec41fe..fdf2997 100644
--- a/src/index.css
+++ b/src/index.css
@@ -58,6 +58,10 @@
--warning: 45 93% 47%;
--info: 199 89% 48%;
+ /* Nostr-specific colors */
+ --zap: 45 93% 40%;
+ --live: 0 72% 45%;
+
/* Syntax highlighting */
--syntax-comment: 215.4 16.3% 46.9%;
--syntax-punctuation: 222.2 84% 30%;
@@ -115,6 +119,10 @@
--warning: 45 93% 47%;
--info: 199 89% 48%;
+ /* Nostr-specific colors */
+ --zap: 45 93% 58%;
+ --live: 0 72% 51%;
+
/* Syntax highlighting */
--syntax-comment: 215 20.2% 70%;
--syntax-punctuation: 210 40% 70%;
diff --git a/src/lib/themes/apply.ts b/src/lib/themes/apply.ts
index f08d860..bff8c6f 100644
--- a/src/lib/themes/apply.ts
+++ b/src/lib/themes/apply.ts
@@ -53,6 +53,10 @@ export function applyTheme(theme: Theme): void {
root.style.setProperty("--warning", theme.colors.warning);
root.style.setProperty("--info", theme.colors.info);
+ // Nostr-specific colors
+ root.style.setProperty("--zap", theme.colors.zap);
+ root.style.setProperty("--live", theme.colors.live);
+
// Syntax highlighting
root.style.setProperty("--syntax-comment", theme.syntax.comment);
root.style.setProperty("--syntax-punctuation", theme.syntax.punctuation);
@@ -113,6 +117,9 @@ export function getThemeVariables(): string[] {
"--success",
"--warning",
"--info",
+ // Nostr-specific
+ "--zap",
+ "--live",
// Syntax
"--syntax-comment",
"--syntax-punctuation",
diff --git a/src/lib/themes/builtin/dark.ts b/src/lib/themes/builtin/dark.ts
index 6a2fa66..324e1ec 100644
--- a/src/lib/themes/builtin/dark.ts
+++ b/src/lib/themes/builtin/dark.ts
@@ -42,6 +42,10 @@ export const darkTheme: Theme = {
success: "142 76% 36%",
warning: "45 93% 47%",
info: "199 89% 48%",
+
+ // Nostr-specific colors
+ zap: "45 93% 58%", // Gold/yellow for zaps
+ live: "0 72% 51%", // Red for live indicator
},
syntax: {
diff --git a/src/lib/themes/builtin/light.ts b/src/lib/themes/builtin/light.ts
index a49a412..8e40c16 100644
--- a/src/lib/themes/builtin/light.ts
+++ b/src/lib/themes/builtin/light.ts
@@ -42,6 +42,10 @@ export const lightTheme: Theme = {
success: "142 70% 30%",
warning: "38 92% 40%",
info: "199 80% 40%",
+
+ // Nostr-specific colors (darker for light background)
+ zap: "45 93% 40%", // Darker gold for contrast on light
+ live: "0 72% 45%", // Dark red for live indicator
},
syntax: {
@@ -70,9 +74,9 @@ export const lightTheme: Theme = {
},
gradient: {
- color1: "234 179 8", // yellow-500 (darker for light bg)
- color2: "249 115 22", // orange-500
- color3: "147 51 234", // purple-600
- color4: "6 182 212", // cyan-500
+ color1: "202 138 4", // yellow-600 (darker for light bg)
+ color2: "194 65 12", // orange-700 (much darker)
+ color3: "126 34 206", // purple-700
+ color4: "8 145 178", // cyan-600
},
};
diff --git a/src/lib/themes/builtin/plan9.ts b/src/lib/themes/builtin/plan9.ts
index b982f11..26c1af9 100644
--- a/src/lib/themes/builtin/plan9.ts
+++ b/src/lib/themes/builtin/plan9.ts
@@ -7,8 +7,8 @@ import type { Theme } from "../types";
* - Pale yellow/cream backgrounds (#ffffe0)
* - Light blue-green window chrome (#eaffea)
* - Black text for high contrast
- * - Bright yellow selections
- * - Dark blue accents
+ * - Purple accents for good contrast on pale yellow
+ * - Muted blue interactive elements
*/
export const plan9Theme: Theme = {
id: "plan9",
@@ -35,9 +35,9 @@ export const plan9Theme: Theme = {
secondary: "120 30% 88%",
secondaryForeground: "0 0% 0%",
- // Bright yellow accent (Plan9 signature selection color)
- accent: "60 100% 50%",
- accentForeground: "0 0% 0%",
+ // Purple accent (good contrast on pale yellow)
+ accent: "280 60% 45%",
+ accentForeground: "0 0% 100%",
// Muted yellow for subdued elements
muted: "60 30% 88%",
@@ -56,6 +56,10 @@ export const plan9Theme: Theme = {
success: "120 60% 25%",
warning: "35 90% 35%",
info: "200 70% 35%",
+
+ // Nostr-specific colors (dark for contrast on pale yellow)
+ zap: "35 90% 35%", // Dark amber/gold for zaps
+ live: "0 70% 40%", // Dark red for live indicator
},
syntax: {
diff --git a/src/lib/themes/types.ts b/src/lib/themes/types.ts
index 48fc40e..75732e5 100644
--- a/src/lib/themes/types.ts
+++ b/src/lib/themes/types.ts
@@ -59,6 +59,10 @@ export interface ThemeColors {
success: HSLValue;
warning: HSLValue;
info: HSLValue;
+
+ // Nostr-specific colors
+ zap: HSLValue; // Lightning zaps (typically yellow/gold)
+ live: HSLValue; // Live streaming indicator (typically red)
}
/** Syntax highlighting colors for code blocks */
diff --git a/tailwind.config.js b/tailwind.config.js
index df78150..8614cbf 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -69,6 +69,9 @@ export default {
success: "hsl(var(--success))",
warning: "hsl(var(--warning))",
info: "hsl(var(--info))",
+ // Nostr-specific colors
+ zap: "hsl(var(--zap))",
+ live: "hsl(var(--live))",
},
},
},