diff --git a/frontend/website/src/pages/CommunityPage.jsx b/frontend/website/src/pages/CommunityPage.jsx
index 70a246f..c2c3720 100644
--- a/frontend/website/src/pages/CommunityPage.jsx
+++ b/frontend/website/src/pages/CommunityPage.jsx
@@ -1,8 +1,60 @@
-import { useState, useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import Sidebar from '../components/Sidebar'
import Topbar from '../components/TopBar'
import * as api from '../services/api'
+const THEME_VARS = {
+ dark: {
+ 'bg-primary': '#0B0F1A',
+ 'bg-secondary': '#121727',
+ 'card-bg': 'rgba(255,255,255,0.025)',
+ 'card-bg-hover': 'rgba(255,255,255,0.04)',
+ 'card-border': 'rgba(255,255,255,0.06)',
+ 'card-border-hover': 'rgba(255,255,255,0.1)',
+ 'text-primary': '#F1F5F9',
+ 'text-secondary': '#CBD5E1',
+ 'text-muted': '#64748B',
+ 'text-tertiary': '#475569',
+ 'accent-amber': '#E5A653',
+ 'accent-purple': '#9F8FE3',
+ 'accent-green': '#10B981',
+ 'accent-blue': '#3B82F6',
+ 'accent-pink': '#EC4899',
+ 'accent-red': '#EF4444',
+ 'accent-orange': '#F97316',
+ 'accent-cyan': '#06B6D4',
+ 'code-bg': 'rgba(8,12,30,0.8)',
+ 'code-border': 'rgba(255,255,255,0.06)',
+ 'code-inline-bg': 'rgba(229,166,83,0.1)',
+ 'code-inline-border': 'rgba(229,166,83,0.18)',
+ 'code-inline-color': '#F3C887',
+ },
+ light: {
+ 'bg-primary': '#FFFFFF',
+ 'bg-secondary': '#F8FAFC',
+ 'card-bg': 'rgba(15,23,42,0.04)',
+ 'card-bg-hover': 'rgba(15,23,42,0.08)',
+ 'card-border': 'rgba(15,23,42,0.12)',
+ 'card-border-hover': 'rgba(15,23,42,0.18)',
+ 'text-primary': '#0F172A',
+ 'text-secondary': '#334155',
+ 'text-muted': '#94A3B8',
+ 'text-tertiary': '#CBD5E1',
+ 'accent-amber': '#D97706',
+ 'accent-purple': '#7C3AED',
+ 'accent-green': '#059669',
+ 'accent-blue': '#2563EB',
+ 'accent-pink': '#DB2777',
+ 'accent-red': '#DC2626',
+ 'accent-orange': '#EA580C',
+ 'accent-cyan': '#0891B2',
+ 'code-bg': 'rgba(15,23,42,0.06)',
+ 'code-border': 'rgba(15,23,42,0.12)',
+ 'code-inline-bg': 'rgba(217,119,6,0.1)',
+ 'code-inline-border': 'rgba(217,119,6,0.2)',
+ 'code-inline-color': '#B45309',
+ }
+}
// ─── Constants ────────────────────────────────────────────────────────────────
const TOPICS = ['all', 'arrays', 'graphs', 'dynamic-programming', 'trees', 'binary-search', 'system-design', 'strings', 'backtracking']
@@ -43,7 +95,6 @@ const FEED_TABS = [
{ id: 'mine', label: 'My Posts' },
]
-// Static right-panel data (backend integration to be done in a separate issue)
const TRENDING_TOPICS = [
{ tag: 'SystemDesign', count: '1.2k' },
{ tag: 'DynamicProgramming', count: '845' },
@@ -58,6 +109,10 @@ const TOP_CONTRIBUTORS = [
]
// ─── Helpers ──────────────────────────────────────────────────────────────────
+function getCSSVar(varName, theme = 'dark') {
+ return THEME_VARS[theme][varName] || THEME_VARS.dark[varName]
+}
+
function topicColor(t) { return TOPIC_COLORS[t?.toLowerCase()] || TOPIC_COLORS.general }
function timeAgo(isoStr) {
@@ -75,15 +130,30 @@ function readTime(content) {
}
function difficultyBadge(post) {
- // Infer a badge from the topic / title length heuristic
- if (post.featured) return { label: 'STAFF PICK', color: '#E5A653', bg: 'rgba(229,166,83,0.12)', border: 'rgba(229,166,83,0.3)' }
+ const theme = 'dark'
+ if (post.featured) return {
+ label: 'STAFF PICK',
+ color: getCSSVar('accent-amber', theme),
+ bg: `rgba(229,166,83,0.12)`,
+ border: `rgba(229,166,83,0.3)`
+ }
const words = (post.content || '').split(/\s+/).length
- if (words > 400) return { label: 'HARD', color: '#EF4444', bg: 'rgba(239,68,68,0.1)', border: 'rgba(239,68,68,0.25)' }
- if (words > 150) return { label: 'MEDIUM', color: '#F59E0B', bg: 'rgba(245,158,11,0.1)', border: 'rgba(245,158,11,0.25)' }
+ if (words > 400) return {
+ label: 'HARD',
+ color: getCSSVar('accent-red', theme),
+ bg: `rgba(239,68,68,0.1)`,
+ border: `rgba(239,68,68,0.25)`
+ }
+ if (words > 150) return {
+ label: 'MEDIUM',
+ color: getCSSVar('accent-orange', theme),
+ bg: `rgba(245,158,11,0.1)`,
+ border: `rgba(245,158,11,0.25)`
+ }
return null
}
-// ─── Avatar ───────────────────────────────────────────────────────────────────
+// Avatar
function Avatar({ name, size = 36, colors }) {
const [c1, c2] = colors || topicColor('general')
const letter = (name || '?')[0].toUpperCase()
@@ -99,8 +169,9 @@ function Avatar({ name, size = 36, colors }) {
)
}
-// ─── Upvote column ────────────────────────────────────────────────────────────
+// Upvote column
function UpvoteCol({ count, liked, onLike, liking }) {
+ const theme = 'dark'
const fmt = n => n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n)
return (
@@ -120,14 +192,14 @@ function UpvoteCol({ count, liked, onLike, liking }) {
-
+
{fmt(count)}