From 7967397ad8f4cbb7056358054f43bed3de618c2c Mon Sep 17 00:00:00 2001
From: sooniter <sooniter@gmail.com>
Date: Wed, 28 Oct 2026 17:19:16 +0800
Subject: [PATCH] fix: align blog effects with Rstack brand colors

---
 src/blog-background/MeteorsBackground.tsx | 15 +++++++++++----
 src/blog-background/glow-dark.svg         |  8 ++++----
 src/blog-background/glow-light.svg        |  8 ++++----
 src/blog-list/BorderBeam.tsx              |  9 +++++----
 src/blog-palette.ts                       |  6 ++++++
 5 files changed, 30 insertions(+), 16 deletions(-)
 create mode 100644 src/blog-palette.ts

diff --git a/src/blog-background/MeteorsBackground.tsx b/src/blog-background/MeteorsBackground.tsx
index 07bb84d..c736ec7 100644
--- a/src/blog-background/MeteorsBackground.tsx
+++ b/src/blog-background/MeteorsBackground.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef } from 'react';
+import { blogPalette } from '../blog-palette';
 
 type CanvasBounds = {
   width: number;
@@ -127,10 +128,16 @@ class Meteor {
     }
 
     const gradient = context.createLinearGradient(startX, startY, endX, endY);
-    gradient.addColorStop(0, `rgba(18, 229, 229, ${this.opacity})`);
-    gradient.addColorStop(0.02, `rgba(18, 229, 229, ${this.opacity * 0.8})`);
-    gradient.addColorStop(0.05, `rgba(255, 53, 26, ${this.opacity * 0.6})`);
-    gradient.addColorStop(1, 'rgba(255, 53, 26, 0)');
+    gradient.addColorStop(0, `rgba(${blogPalette.gold}, ${this.opacity})`);
+    gradient.addColorStop(
+      0.02,
+      `rgba(${blogPalette.gold}, ${this.opacity * 0.8})`,
+    );
+    gradient.addColorStop(
+      0.05,
+      `rgba(${blogPalette.orange}, ${this.opacity * 0.6})`,
+    );
+    gradient.addColorStop(1, `rgba(${blogPalette.orange}, 0)`);
 
     context.beginPath();
     context.strokeStyle = gradient;
diff --git a/src/blog-background/glow-dark.svg b/src/blog-background/glow-dark.svg
index f961f9b..d12e504 100644
--- a/src/blog-background/glow-dark.svg
+++ b/src/blog-background/glow-dark.svg
@@ -3,12 +3,12 @@
 <rect width="959" height="677" fill="url(#paint1_radial_2002_11167)" fill-opacity="0.15"/>
 <defs>
 <radialGradient id="paint0_radial_2002_11167" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(616.147 377.815) rotate(121.487) scale(261.625 237.327)">
-<stop stop-color="#ff8b00"/>
-<stop offset="1" stop-color="#ff8b00" stop-opacity="0"/>
+<stop stop-color="#ffd259"/>
+<stop offset="1" stop-color="#ffd259" stop-opacity="0"/>
 </radialGradient>
 <radialGradient id="paint1_radial_2002_11167" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(479.5 289.093) rotate(93.4123) scale(346.066 262.102)">
-<stop stop-color="#f93920"/>
-<stop offset="1" stop-color="#f93920" stop-opacity="0"/>
+<stop stop-color="#f58961"/>
+<stop offset="1" stop-color="#f58961" stop-opacity="0"/>
 </radialGradient>
 </defs>
 </svg>
diff --git a/src/blog-background/glow-light.svg b/src/blog-background/glow-light.svg
index 7100e55..f3bae9b 100644
--- a/src/blog-background/glow-light.svg
+++ b/src/blog-background/glow-light.svg
@@ -3,12 +3,12 @@
 <rect width="959" height="677" fill="url(#paint1_radial_2002_13780)" fill-opacity="0.15"/>
 <defs>
 <radialGradient id="paint0_radial_2002_13780" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(616.147 377.815) rotate(121.487) scale(261.625 237.327)">
-<stop stop-color="#ff8b00"/>
-<stop offset="1" stop-color="#ff8b00" stop-opacity="0"/>
+<stop stop-color="#ffd259"/>
+<stop offset="1" stop-color="#ffd259" stop-opacity="0"/>
 </radialGradient>
 <radialGradient id="paint1_radial_2002_13780" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(479.952 355.03) rotate(94.3068) scale(280.307 212.232)">
-<stop stop-color="#f93920"/>
-<stop offset="1" stop-color="#f93920" stop-opacity="0"/>
+<stop stop-color="#f58961"/>
+<stop offset="1" stop-color="#f58961" stop-opacity="0"/>
 </radialGradient>
 </defs>
 </svg>
diff --git a/src/blog-list/BorderBeam.tsx b/src/blog-list/BorderBeam.tsx
index 939d079..1cdc1b5 100644
--- a/src/blog-list/BorderBeam.tsx
+++ b/src/blog-list/BorderBeam.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef } from 'react';
+import { blogPalette } from '../blog-palette';
 import styles from './BorderBeam.module.scss';
 
 type ResizeSubscription = {
@@ -14,7 +15,7 @@ export type BorderBeamProps = {
 };
 
 export function BorderBeam({
-  color = '#12e5e5',
+  color = `rgb(${blogPalette.gold})`,
   size = 3,
   duration = 4,
   className,
@@ -130,9 +131,9 @@ export function BorderBeam({
       );
 
       gradient.addColorStop(0, 'transparent');
-      gradient.addColorStop(0.2, 'rgba(255, 53, 26, 0.3)');
-      gradient.addColorStop(0.5, '#ff351a');
-      gradient.addColorStop(0.8, '#ff351a');
+      gradient.addColorStop(0.2, `rgba(${blogPalette.orange}, 0.3)`);
+      gradient.addColorStop(0.5, `rgb(${blogPalette.orange})`);
+      gradient.addColorStop(0.8, `rgb(${blogPalette.orange})`);
       gradient.addColorStop(0.9, color);
       gradient.addColorStop(1, 'transparent');
 
diff --git a/src/blog-palette.ts b/src/blog-palette.ts
new file mode 100644
index 0000000..78617cf
--- /dev/null
+++ b/src/blog-palette.ts
@@ -0,0 +1,6 @@
+// RGB channels keep the Rstack accents consistent across canvas gradients
+// while allowing each animation to control its own opacity.
+export const blogPalette = {
+  gold: '255, 210, 89',
+  orange: '245, 137, 97',
+};