MythEclipse/mcpedia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(theme): support full dynamic Light Mode and Dark Mode with CSS variables and storage sync

Browse Source
This commit is contained in:
asepharyana
2026-08-21 11:13:05 +07:00
parent 62116be88d
commit aedfb022f3
16 changed files with 464 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/search/page.tsx
+29 -29
View File
@@ -74,16 +74,16 @@ function SearchContent() {
<div className="max-w-4xl space-y-8">
{/* Header */}
<div>
<h1 className="text-3xl font-bold text-[#f7f8f8] tracking-tight mb-2">
<h1 className="text-3xl font-bold text-[var(--text-primary)] tracking-tight mb-2">
Search Knowledge Base
</h1>
<p className="text-sm text-[#8a8f98]">
<p className="text-sm text-[var(--text-muted)]">
Find answers across all documentation, CTF writeups, research notes, and semantic vector chunks.
</p>
</div>
{/* Search Box & Controls */}
<div className="bg-[#0f1011] border border-[#1f2022] rounded-xl p-4 sm:p-5 shadow-sm space-y-4">
<div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl p-4 sm:p-5 shadow-sm space-y-4">
{/* Search Input */}
<div className="relative">
<input
@@ -91,11 +91,11 @@ function SearchContent() {
value={query}
onChange={handleChange}
placeholder="Search by keywords, challenge names, tools, concepts..."
className="w-full pl-11 pr-10 py-3 bg-[#141517] border border-[#23252a] hover:border-[#383b42] rounded-lg text-[#f7f8f8] placeholder-[#62666d] focus:outline-none focus:border-[#5e6ad2] focus:ring-2 focus:ring-[#5e6ad2]/20 text-base transition-all"
className="w-full pl-11 pr-10 py-3 bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-lg text-[var(--text-primary)] placeholder-[var(--text-dim)] focus:outline-none focus:border-[var(--brand)] focus:ring-2 focus:ring-[#5e6ad2]/20 text-base transition-all"
autoFocus
/>
<svg
className="w-5 h-5 text-[#7170ff] absolute left-3.5 top-3.5"
className="w-5 h-5 text-[#5e6ad2] dark:text-[#7170ff] absolute left-3.5 top-3.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -108,7 +108,7 @@ function SearchContent() {
setQuery("");
setResults([]);
}}
className="absolute right-3.5 top-3.5 text-xs text-[#62666d] hover:text-[#d0d6e0] p-0.5"
className="absolute right-3.5 top-3.5 text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)] p-0.5"
>
✕
</button>
@@ -116,10 +116,10 @@ function SearchContent() {
</div>
{/* Search Mode & Section Filters */}
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pt-2 border-t border-[#1a1b1d] text-xs">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pt-2 border-t border-[var(--border-color)] text-xs">
{/* Mode Selector */}
<div className="flex items-center gap-1.5 flex-wrap">
<span className="text-[#62666d] mr-1">Algorithm:</span>
<span className="text-[var(--text-muted)] mr-1">Algorithm:</span>
{[
{ id: "hybrid", label: "⚡ Hybrid (RRF)", desc: "FTS + Vector Fusion" },
{ id: "keyword", label: "🔍 Keyword", desc: "PostgreSQL FTS" },
@@ -133,7 +133,7 @@ function SearchContent() {
className={`px-3 py-1 rounded-md border font-medium transition-all ${
mode === m.id
? "bg-[#5e6ad2] border-[#5e6ad2] text-white shadow-sm"
: "bg-[#141517] border-[#23252a] text-[#8a8f98] hover:text-[#d0d6e0]"
: "bg-[var(--bg-elevated)] border-[var(--border-color)] text-[var(--text-muted)] hover:text-[var(--text-primary)]"
}`}
>
{m.label}
@@ -148,8 +148,8 @@ function SearchContent() {
onClick={() => setSelectedSection("all")}
className={`px-2.5 py-1 rounded-md text-xs transition-colors ${
selectedSection === "all"
? "bg-[#23252a] text-white"
: "text-[#62666d] hover:text-[#8a8f98]"
? "bg-[var(--bg-elevated-hover)] text-[var(--text-primary)] font-medium"
: "text-[var(--text-dim)] hover:text-[var(--text-muted)]"
}`}
>
All Sections
@@ -161,8 +161,8 @@ function SearchContent() {
onClick={() => setSelectedSection(s.id)}
className={`px-2.5 py-1 rounded-md text-xs transition-colors ${
selectedSection === s.id
? "bg-[#23252a] text-white"
: "text-[#62666d] hover:text-[#8a8f98]"
? "bg-[var(--bg-elevated-hover)] text-[var(--text-primary)] font-medium"
: "text-[var(--text-dim)] hover:text-[var(--text-muted)]"
}`}
>
{s.label}
@@ -174,7 +174,7 @@ function SearchContent() {
{/* Loading State */}
{loading && (
<div className="flex items-center gap-3 py-8 text-[#8a8f98] text-sm">
<div className="flex items-center gap-3 py-8 text-[var(--text-muted)] text-sm">
<div className="w-5 h-5 border-2 border-[#5e6ad2] border-t-transparent rounded-full animate-spin" />
<span>Searching knowledge base...</span>
</div>
@@ -182,10 +182,10 @@ function SearchContent() {
{/* Empty State */}
{!loading && query && filteredResults.length === 0 && (
<div className="text-center py-16 bg-[#0f1011] border border-[#1f2022] rounded-xl">
<div className="text-center py-16 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl shadow-sm">
<div className="text-3xl mb-3">🔍</div>
<h3 className="text-base font-medium text-[#f7f8f8] mb-1">No matching documents</h3>
<p className="text-xs text-[#8a8f98] max-w-sm mx-auto">
<h3 className="text-base font-semibold text-[var(--text-primary)] mb-1">No matching documents</h3>
<p className="text-xs text-[var(--text-muted)] max-w-sm mx-auto">
Try switching algorithm mode to <strong>Hybrid</strong> or <strong>Semantic</strong>, or search with different keywords.
</p>
</div>
@@ -193,8 +193,8 @@ function SearchContent() {
{/* Initial Hint */}
{!loading && !query && (
<div className="p-8 text-center bg-[#0c0d0e] border border-[#1f2022] rounded-xl space-y-4">
<p className="text-xs text-[#8a8f98]">Popular search queries:</p>
<div className="p-8 text-center bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl space-y-4 shadow-sm">
<p className="text-xs text-[var(--text-muted)]">Popular search queries:</p>
<div className="flex justify-center flex-wrap gap-2 text-xs">
{["stack alignment", "ret2win", "bullmq worker", "streamable http", "full-text search", "caddy reverse proxy"].map((term) => (
<button
@@ -203,7 +203,7 @@ function SearchContent() {
setQuery(term);
handleSearch(term, mode);
}}
className="px-3 py-1 bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] hover:border-[#5e6ad2]/40 rounded-md text-[#d0d6e0] transition-colors"
className="px-3 py-1 bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-md text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
>
{term}
</button>
@@ -215,7 +215,7 @@ function SearchContent() {
{/* Results List */}
{!loading && filteredResults.length > 0 && (
<div className="space-y-4">
<div className="flex items-center justify-between text-xs text-[#62666d]">
<div className="flex items-center justify-between text-xs text-[var(--text-dim)]">
<span>Found {filteredResults.length} result{filteredResults.length !== 1 ? "s" : ""}</span>
<span className="font-mono">Ranked by {mode} score</span>
</div>
@@ -225,29 +225,29 @@ function SearchContent() {
<Link
key={r.slug}
href={`/${r.slug}`}
className="group block bg-[#0f1011] hover:bg-[#131415] border border-[#1f2022] hover:border-[#5e6ad2]/40 rounded-xl p-4 sm:p-5 transition-all shadow-sm"
className="group block bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-xl p-4 sm:p-5 transition-all shadow-sm"
>
<div className="flex items-center justify-between gap-3 mb-2">
<div className="flex items-center gap-2">
<span className="text-xs font-mono px-2 py-0.5 rounded bg-[#5e6ad2]/10 border border-[#5e6ad2]/30 text-[#7170ff] uppercase">
<span className="text-xs font-mono px-2 py-0.5 rounded bg-[#5e6ad2]/10 border border-[#5e6ad2]/30 text-[#5e6ad2] dark:text-[#7170ff] uppercase">
{r.section}
</span>
<span className="text-xs text-[#62666d] font-mono truncate">
<span className="text-xs text-[var(--text-dim)] font-mono truncate">
/{r.slug}
</span>
</div>
<span className="text-xs font-mono text-[#8a8f98] bg-[#141517] px-2 py-0.5 rounded">
<span className="text-xs font-mono text-[var(--text-muted)] bg-[var(--bg-elevated)] border border-[var(--border-color)] px-2 py-0.5 rounded">
Score: {r.score.toFixed(3)}
</span>
</div>
<h2 className="text-base font-semibold text-[#f7f8f8] group-hover:text-[#7170ff] transition-colors mb-2">
<h2 className="text-base font-semibold text-[var(--text-primary)] group-hover:text-[#5e6ad2] dark:group-hover:text-[#7170ff] transition-colors mb-2">
{r.title}
</h2>
{r.snippet && (
<p
className="text-xs text-[#8a8f98] leading-relaxed line-clamp-2 [&>mark]:bg-[#5e6ad2]/30 [&>mark]:text-white [&>mark]:px-1 [&>mark]:rounded [&>mark]:font-medium"
className="text-xs text-[var(--text-muted)] leading-relaxed line-clamp-2 [&>mark]:bg-[#5e6ad2]/30 [&>mark]:text-[var(--text-primary)] [&>mark]:px-1 [&>mark]:rounded [&>mark]:font-medium"
dangerouslySetInnerHTML={{ __html: r.snippet }}
/>
)}
@@ -265,8 +265,8 @@ export default function SearchPage() {
<Suspense
fallback={
<div className="max-w-4xl py-12">
<h1 className="text-2xl font-bold text-[#f7f8f8] mb-4">Search</h1>
<p className="text-sm text-[#8a8f98]">Loading search module...</p>
<h1 className="text-2xl font-bold text-[var(--text-primary)] mb-4">Search</h1>
<p className="text-sm text-[var(--text-muted)]">Loading search module...</p>
</div>
}
>