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/components/CommandMenu.tsx
+24 -24
View File
@@ -91,13 +91,13 @@ export default function CommandMenu() {
return (
<button
onClick={() => setOpen(true)}
className="hidden md:flex items-center gap-2 px-3 py-1.5 bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] hover:border-[#383b42] text-xs text-[#8a8f98] hover:text-[#d0d6e0] rounded-lg transition-all shadow-inner"
className="hidden md:flex items-center gap-2 px-3 py-1.5 bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--brand)] text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-lg transition-all shadow-sm"
>
<svg className="w-3.5 h-3.5 text-[#62666d]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg className="w-3.5 h-3.5 text-[var(--text-dim)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<span>Search documentation...</span>
<kbd className="ml-2 font-mono bg-[#08090a] px-1.5 py-0.5 rounded border border-[#1f2022] text-[10px] text-[#62666d]">
<span>Search docs...</span>
<kbd className="ml-2 font-mono bg-[var(--bg-elevated)] px-1.5 py-0.5 rounded border border-[var(--border-color)] text-[10px] text-[var(--text-dim)]">
⌘K
</kbd>
</button>
@@ -108,15 +108,15 @@ export default function CommandMenu() {
<div className="fixed inset-0 z-50 flex items-start justify-center pt-20 px-4">
{/* Backdrop */}
<div
className="fixed inset-0 bg-black/70 backdrop-blur-sm transition-opacity"
className="fixed inset-0 bg-black/60 dark:bg-black/80 backdrop-blur-sm transition-opacity"
onClick={() => setOpen(false)}
/>
{/* Modal */}
<div className="relative w-full max-w-2xl bg-[#0f1011] border border-[#27292d] rounded-xl shadow-2xl overflow-hidden animate-fade-in">
<div className="relative w-full max-w-2xl bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl shadow-2xl overflow-hidden animate-fade-in">
{/* Search input bar */}
<div className="flex items-center gap-3 px-4 py-3.5 border-b border-[#1f2022] bg-[#141517]">
<svg className="w-5 h-5 text-[#7170ff] shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<div className="flex items-center gap-3 px-4 py-3.5 border-b border-[var(--border-color)] bg-[var(--bg-elevated)]">
<svg className="w-5 h-5 text-[#5e6ad2] dark:text-[#7170ff] shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<input
@@ -126,14 +126,14 @@ export default function CommandMenu() {
onChange={(e) => setQuery(e.target.value)}
onKeyDown={handleKeyNavigation}
placeholder="Type to search (titles, keywords, concepts)..."
className="w-full bg-transparent text-[#f7f8f8] placeholder-[#62666d] text-sm focus:outline-none"
className="w-full bg-transparent text-[var(--text-primary)] placeholder-[var(--text-dim)] text-sm focus:outline-none"
/>
{loading && (
<div className="w-4 h-4 border-2 border-[#5e6ad2] border-t-transparent rounded-full animate-spin shrink-0" />
)}
<button
onClick={() => setOpen(false)}
className="text-xs text-[#62666d] hover:text-[#d0d6e0] bg-[#1b1d20] px-1.5 py-0.5 rounded border border-[#27292d]"
className="text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)] bg-[var(--bg-surface)] px-1.5 py-0.5 rounded border border-[var(--border-color)]"
>
ESC
</button>
@@ -143,14 +143,14 @@ export default function CommandMenu() {
<div className="max-h-96 overflow-y-auto p-2">
{query.trim() === "" ? (
<div className="px-3 py-6 text-center">
<p className="text-xs text-[#8a8f98]">Search full-text, semantic embeddings, and CTF writeups.</p>
<div className="flex justify-center gap-2 mt-3 text-[11px] text-[#62666d]">
<span>Navigation: <kbd className="bg-[#141517] px-1 py-0.5 rounded border border-[#1f2022]">↑</kbd> <kbd className="bg-[#141517] px-1 py-0.5 rounded border border-[#1f2022]">↓</kbd></span>
<span>Select: <kbd className="bg-[#141517] px-1 py-0.5 rounded border border-[#1f2022]">↵</kbd></span>
<p className="text-xs text-[var(--text-muted)]">Search full-text, semantic embeddings, and CTF writeups.</p>
<div className="flex justify-center gap-2 mt-3 text-[11px] text-[var(--text-dim)]">
<span>Navigation: <kbd className="bg-[var(--bg-elevated)] px-1 py-0.5 rounded border border-[var(--border-color)]">↑</kbd> <kbd className="bg-[var(--bg-elevated)] px-1 py-0.5 rounded border border-[var(--border-color)]">↓</kbd></span>
<span>Select: <kbd className="bg-[var(--bg-elevated)] px-1 py-0.5 rounded border border-[var(--border-color)]">↵</kbd></span>
</div>
</div>
) : results.length === 0 && !loading ? (
<div className="px-4 py-8 text-center text-xs text-[#8a8f98]">
<div className="px-4 py-8 text-center text-xs text-[var(--text-muted)]">
No documents matching &quot;{query}&quot;
</div>
) : (
@@ -164,27 +164,27 @@ export default function CommandMenu() {
onMouseEnter={() => setSelectedIndex(index)}
className={`flex items-start justify-between gap-3 px-3 py-2.5 rounded-lg cursor-pointer transition-all ${
isSelected
? "bg-[#5e6ad2]/15 border border-[#5e6ad2]/40 text-[#f7f8f8]"
: "hover:bg-[#141517] text-[#d0d6e0] border border-transparent"
? "bg-[#5e6ad2]/15 border border-[#5e6ad2]/40 text-[var(--text-primary)]"
: "hover:bg-[var(--bg-elevated)] text-[var(--text-secondary)] border border-transparent"
}`}
>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<span className="text-xs px-1.5 py-0.25 bg-[#191a1b] border border-[#23252a] rounded text-[#7170ff] font-mono">
<span className="text-xs px-1.5 py-0.25 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded text-[#5e6ad2] dark:text-[#7170ff] font-mono">
{hit.section}
</span>
<span className={`text-sm font-medium ${isSelected ? "text-[#7170ff]" : "text-[#f7f8f8]"} truncate`}>
<span className={`text-sm font-medium ${isSelected ? "text-[#5e6ad2] dark:text-[#7170ff]" : "text-[var(--text-primary)]"} truncate`}>
{hit.title}
</span>
</div>
{hit.snippet && (
<p
className="text-xs text-[#8a8f98] mt-1 line-clamp-1 [&>mark]:bg-[#5e6ad2]/30 [&>mark]:text-[#f7f8f8] [&>mark]:rounded [&>mark]:px-0.5"
className="text-xs text-[var(--text-muted)] mt-1 line-clamp-1 [&>mark]:bg-[#5e6ad2]/30 [&>mark]:text-[var(--text-primary)] [&>mark]:rounded [&>mark]:px-0.5"
dangerouslySetInnerHTML={{ __html: hit.snippet }}
/>
)}
</div>
<span className="text-[11px] text-[#62666d] shrink-0 self-center">
<span className="text-[11px] text-[var(--text-dim)] shrink-0 self-center">
{hit.slug}
</span>
</li>
@@ -195,12 +195,12 @@ export default function CommandMenu() {
</div>
{/* Footer */}
<div className="flex items-center justify-between px-4 py-2.5 border-t border-[#1f2022] bg-[#0c0d0e] text-[11px] text-[#62666d]">
<span>Tip: Press <kbd className="bg-[#141517] px-1 py-0.5 rounded border border-[#1f2022]">Hybrid</kbd> search is enabled by default</span>
<div className="flex items-center justify-between px-4 py-2.5 border-t border-[var(--border-color)] bg-[var(--bg-elevated)] text-[11px] text-[var(--text-dim)]">
<span>Tip: Press <kbd className="bg-[var(--bg-surface)] px-1 py-0.5 rounded border border-[var(--border-color)]">Hybrid</kbd> search is enabled</span>
<Link
href={`/search?q=${encodeURIComponent(query)}`}
onClick={() => setOpen(false)}
className="hover:text-[#7170ff] transition-colors"
className="hover:text-[#5e6ad2] dark:hover:text-[#7170ff] transition-colors"
>
Open full search page →
</Link>
apps/web/app/components/DocActions.tsx
+8 -8
View File
@@ -32,14 +32,14 @@ export default function DocActions({ slug, body, canEdit }: DocActionsProps) {
onClick={handleCopyMarkdown}
type="button"
title="Copy raw markdown content"
className="inline-flex items-center gap-1 px-2.5 py-1 text-xs bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] hover:border-[#383b42] text-[#8a8f98] hover:text-[#f7f8f8] rounded-md transition-all"
className="inline-flex items-center gap-1 px-2.5 py-1 text-xs bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--brand)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md transition-all shadow-sm"
>
{copiedMd ? (
<>
<svg className="w-3.5 h-3.5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg className="w-3.5 h-3.5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
<span className="text-emerald-400">Copied MD</span>
<span className="text-emerald-500 font-medium">Copied MD</span>
</>
) : (
<>
@@ -56,14 +56,14 @@ export default function DocActions({ slug, body, canEdit }: DocActionsProps) {
onClick={handleCopyLink}
type="button"
title="Copy link to document"
className="inline-flex items-center gap-1 px-2.5 py-1 text-xs bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] hover:border-[#383b42] text-[#8a8f98] hover:text-[#f7f8f8] rounded-md transition-all"
className="inline-flex items-center gap-1 px-2.5 py-1 text-xs bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--brand)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md transition-all shadow-sm"
>
{copiedLink ? (
<>
<svg className="w-3.5 h-3.5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg className="w-3.5 h-3.5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
<span className="text-emerald-400">Copied</span>
<span className="text-emerald-500 font-medium">Copied Link</span>
</>
) : (
<>
@@ -78,12 +78,12 @@ export default function DocActions({ slug, body, canEdit }: DocActionsProps) {
{/* Edit Link */}
<Link
href={canEdit ? `/${slug}?edit=1` : `/login?redirect=/${slug}`}
className="inline-flex items-center gap-1 px-2.5 py-1 text-xs bg-[#5e6ad2]/15 hover:bg-[#5e6ad2]/25 border border-[#5e6ad2]/30 hover:border-[#5e6ad2]/60 text-[#7170ff] hover:text-white rounded-md transition-all"
className="inline-flex items-center gap-1 px-2.5 py-1 text-xs bg-[#5e6ad2]/10 hover:bg-[#5e6ad2]/20 border border-[#5e6ad2]/30 hover:border-[#5e6ad2]/60 text-[#5e6ad2] dark:text-[#7170ff] rounded-md transition-all font-medium"
>
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
<span>{canEdit ? "Edit" : "Edit"}</span>
<span>Edit</span>
</Link>
</div>
);
apps/web/app/components/DocForm.tsx
+37 -37
View File
@@ -82,7 +82,7 @@ export default function DocForm({
const availableFolders = existingFolders?.[section] ?? [];
const baseInputCls =
"w-full px-3.5 py-2 bg-[#0f1011] border border-[#23252a] hover:border-[#383b42] rounded-lg text-sm text-[#f7f8f8] placeholder-[#62666d] focus:outline-none focus:border-[#5e6ad2] focus:ring-1 focus:ring-[#5e6ad2] transition-colors";
"w-full px-3.5 py-2 bg-[var(--bg-surface)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-lg text-sm text-[var(--text-primary)] placeholder-[var(--text-dim)] focus:outline-none focus:border-[var(--brand)] focus:ring-1 focus:ring-[#5e6ad2] transition-colors";
function addCustomField(key = "", value = "") {
setCustomFields([...customFields, { key, value }]);
@@ -184,14 +184,14 @@ export default function DocForm({
return (
<form onSubmit={handleSubmit} className="space-y-6 max-w-4xl">
{error && (
<div className="p-3.5 rounded-lg border border-rose-500/30 bg-rose-500/10 text-rose-400 text-sm">
<div className="p-3.5 rounded-lg border border-rose-500/30 bg-rose-500/10 text-rose-500 dark:text-rose-400 text-sm">
{error}
</div>
)}
{/* Title */}
<div>
<label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
<label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
Document Title *
</label>
<input
@@ -207,7 +207,7 @@ export default function DocForm({
{/* Section + Type + Status */}
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div>
<label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
<label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
Section
</label>
<select
@@ -224,7 +224,7 @@ export default function DocForm({
</select>
</div>
<div>
<label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
<label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
Type
</label>
<select
@@ -240,7 +240,7 @@ export default function DocForm({
</select>
</div>
<div>
<label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
<label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
Status
</label>
<select
@@ -257,7 +257,7 @@ export default function DocForm({
{/* Folder + Slug */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
<label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
Parent Folder
</label>
<select
@@ -275,7 +275,7 @@ export default function DocForm({
</select>
</div>
<div>
<label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
<label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
{isEdit ? "Full Slug" : "Slug (File name) *"}
</label>
{isEdit ? (
@@ -283,7 +283,7 @@ export default function DocForm({
type="text"
value={slug ?? ""}
readOnly
className="w-full px-3.5 py-2 bg-[#141517] border border-[#23252a] rounded-lg text-sm text-[#8a8f98] font-mono"
className="w-full px-3.5 py-2 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded-lg text-sm text-[var(--text-muted)] font-mono"
/>
) : (
<input
@@ -295,8 +295,8 @@ export default function DocForm({
required
/>
)}
<p className="text-[11px] text-[#62666d] mt-1 font-mono">
Path: <span className="text-[#7170ff]">{effectiveSlug || section}</span>
<p className="text-[11px] text-[var(--text-dim)] mt-1 font-mono">
Path: <span className="text-[#5e6ad2] dark:text-[#7170ff]">{effectiveSlug || section}</span>
</p>
</div>
</div>
@@ -304,7 +304,7 @@ export default function DocForm({
{/* Tags + Author */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
<label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
Tags (comma separated)
</label>
<input
@@ -316,7 +316,7 @@ export default function DocForm({
/>
</div>
<div>
<label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
<label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
Author
</label>
<input
@@ -330,25 +330,25 @@ export default function DocForm({
</div>
{/* Custom Metadata Fields */}
<div className="p-4 bg-[#0c0d0e] border border-[#1f2022] rounded-xl space-y-3">
<div className="p-4 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl space-y-3 shadow-sm">
<div className="flex items-center justify-between">
<div>
<h3 className="text-xs font-semibold uppercase tracking-wider text-[#8a8f98]">
<h3 className="text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)]">
Dynamic Custom Metadata
</h3>
<p className="text-[11px] text-[#62666d] mt-0.5">
<p className="text-[11px] text-[var(--text-dim)] mt-0.5">
Add custom key-values (event, difficulty, points, etc.) rendered as styled badges.
</p>
</div>
<div className="flex items-center gap-1.5 flex-wrap">
<span className="text-[11px] text-[#62666d]">Presets:</span>
<span className="text-[11px] text-[var(--text-dim)]">Presets:</span>
{PRESET_FIELDS.map((preset) => (
<button
key={preset.key}
type="button"
onClick={() => addCustomField(preset.key, preset.value)}
className="px-2 py-0.5 text-[11px] bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] text-[#8a8f98] hover:text-[#d0d6e0] rounded transition-colors"
className="px-2 py-0.5 text-[11px] bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded transition-colors"
>
+{preset.key}
</button>
@@ -375,7 +375,7 @@ export default function DocForm({
<button
type="button"
onClick={() => removeCustomField(i)}
className="p-2 text-[#fca5a5] hover:text-rose-400 rounded hover:bg-[#191a1b] transition-colors"
className="p-2 text-rose-500 hover:text-rose-600 rounded hover:bg-[var(--bg-elevated)] transition-colors"
title="Remove field"
>
✕
@@ -386,16 +386,16 @@ export default function DocForm({
<button
type="button"
onClick={() => addCustomField()}
className="text-xs text-[#7170ff] hover:text-[#828fff] px-3 py-1.5 rounded-lg border border-[#5e6ad2]/30 hover:border-[#5e6ad2]/60 bg-[#5e6ad2]/5 transition-colors"
className="text-xs text-[#5e6ad2] dark:text-[#7170ff] hover:underline px-3 py-1.5 rounded-lg border border-[#5e6ad2]/30 hover:border-[#5e6ad2]/60 bg-[#5e6ad2]/5 transition-colors font-medium"
>
+ Add Custom Field
</button>
</div>
{/* Body with Write / Preview Tabs */}
<div className="border border-[#1f2022] rounded-xl overflow-hidden bg-[#0c0d0e]">
<div className="border border-[var(--border-color)] rounded-xl overflow-hidden bg-[var(--bg-surface)] shadow-sm">
{/* Editor Toolbar */}
<div className="flex items-center justify-between px-3 py-2 bg-[#141517] border-b border-[#1f2022] flex-wrap gap-2">
<div className="flex items-center justify-between px-3 py-2 bg-[var(--bg-elevated)] border-b border-[var(--border-color)] flex-wrap gap-2">
{/* Tabs */}
<div className="flex items-center gap-1">
<button
@@ -403,8 +403,8 @@ export default function DocForm({
onClick={() => setActiveTab("write")}
className={`px-3 py-1 text-xs rounded-md font-medium transition-all ${
activeTab === "write"
? "bg-[#5e6ad2] text-white"
: "text-[#8a8f98] hover:text-[#d0d6e0]"
? "bg-[#5e6ad2] text-white shadow-sm"
: "text-[var(--text-muted)] hover:text-[var(--text-primary)]"
}`}
>
Write
@@ -414,8 +414,8 @@ export default function DocForm({
onClick={() => setActiveTab("preview")}
className={`px-3 py-1 text-xs rounded-md font-medium transition-all ${
activeTab === "preview"
? "bg-[#5e6ad2] text-white"
: "text-[#8a8f98] hover:text-[#d0d6e0]"
? "bg-[#5e6ad2] text-white shadow-sm"
: "text-[var(--text-muted)] hover:text-[var(--text-primary)]"
}`}
>
Live Preview
@@ -424,11 +424,11 @@ export default function DocForm({
{/* Markdown Action Shortcuts */}
{activeTab === "write" && (
<div className="flex items-center gap-1 text-xs text-[#8a8f98]">
<div className="flex items-center gap-1 text-xs text-[var(--text-muted)]">
<button
type="button"
onClick={() => insertMarkdown("**", "**")}
className="px-2 py-0.5 hover:bg-[#23252a] rounded text-[#d0d6e0]"
className="px-2 py-0.5 hover:bg-[var(--bg-surface)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
title="Bold"
>
<b>B</b>
@@ -436,7 +436,7 @@ export default function DocForm({
<button
type="button"
onClick={() => insertMarkdown("*", "*")}
className="px-2 py-0.5 hover:bg-[#23252a] rounded text-[#d0d6e0]"
className="px-2 py-0.5 hover:bg-[var(--bg-surface)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
title="Italic"
>
<i>I</i>
@@ -444,7 +444,7 @@ export default function DocForm({
<button
type="button"
onClick={() => insertMarkdown("## ")}
className="px-2 py-0.5 hover:bg-[#23252a] rounded text-[#d0d6e0]"
className="px-2 py-0.5 hover:bg-[var(--bg-surface)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
title="Heading 2"
>
H2
@@ -452,7 +452,7 @@ export default function DocForm({
<button
type="button"
onClick={() => insertMarkdown("```\n", "\n```")}
className="px-2 py-0.5 hover:bg-[#23252a] rounded text-[#d0d6e0] font-mono"
className="px-2 py-0.5 hover:bg-[var(--bg-surface)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)] font-mono"
title="Code Block"
>
{"</>"}
@@ -460,7 +460,7 @@ export default function DocForm({
<button
type="button"
onClick={() => insertMarkdown("[", "](https://)")}
className="px-2 py-0.5 hover:bg-[#23252a] rounded text-[#d0d6e0]"
className="px-2 py-0.5 hover:bg-[var(--bg-surface)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
title="Link"
>
Link
@@ -468,7 +468,7 @@ export default function DocForm({
<button
type="button"
onClick={() => insertMarkdown("> [!NOTE]\n> ")}
className="px-2 py-0.5 hover:bg-[#23252a] rounded text-[#d0d6e0]"
className="px-2 py-0.5 hover:bg-[var(--bg-surface)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
title="Note Callout"
>
Note
@@ -483,16 +483,16 @@ export default function DocForm({
ref={textareaRef}
value={body}
onChange={(e) => setBody(e.target.value)}
className="w-full h-96 p-4 bg-transparent text-[#f7f8f8] placeholder-[#62666d] font-mono text-sm focus:outline-none resize-y leading-relaxed"
className="w-full h-96 p-4 bg-transparent text-[var(--text-primary)] placeholder-[var(--text-dim)] font-mono text-sm focus:outline-none resize-y leading-relaxed"
placeholder="# Write your markdown document here..."
required
/>
) : (
<div className="p-6 h-96 overflow-y-auto bg-[#08090a]">
<div className="p-6 h-96 overflow-y-auto bg-[var(--bg-app)]">
{body.trim() ? (
<Markdown source={body} />
) : (
<p className="text-xs text-[#62666d] italic">Nothing to preview yet.</p>
<p className="text-xs text-[var(--text-dim)] italic">Nothing to preview yet.</p>
)}
</div>
)}
@@ -513,7 +513,7 @@ export default function DocForm({
<button
type="button"
onClick={() => router.back()}
className="px-4 py-2.5 border border-[#23252a] hover:border-[#383b42] text-[#8a8f98] hover:text-[#d0d6e0] rounded-lg text-sm transition-colors"
className="px-4 py-2.5 border border-[var(--border-color)] hover:border-[var(--brand)] text-[var(--text-muted)] hover:text-[var(--text-primary)] bg-[var(--bg-surface)] rounded-lg text-sm transition-colors shadow-sm"
>
Cancel
</button>
apps/web/app/components/Header.tsx
+16 -16
View File
@@ -12,7 +12,7 @@ export default function Header() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
return (
<header className="sticky top-0 z-30 border-b border-[#1f2022] glass-nav">
<header className="sticky top-0 z-30 border-b border-[var(--border-color)] glass-nav">
<div className="mx-auto max-w-7xl px-4 sm:px-6 h-14 flex items-center justify-between gap-4">
{/* Brand */}
<div className="flex items-center gap-3">
@@ -20,11 +20,11 @@ export default function Header() {
<div className="w-7 h-7 rounded-lg bg-gradient-to-br from-[#5e6ad2] to-[#7170ff] flex items-center justify-center text-white font-bold text-xs shadow-md shadow-[#5e6ad2]/20 group-hover:scale-105 transition-transform">
M
</div>
<span className="font-semibold text-[#f7f8f8] text-base tracking-tight group-hover:text-white transition-colors">
<span className="font-semibold text-[var(--text-primary)] text-base tracking-tight transition-colors">
MCPedia
</span>
</Link>
<span className="hidden sm:inline-block text-[10px] uppercase font-mono px-1.5 py-0.5 rounded bg-[#141517] border border-[#23252a] text-[#8a8f98]">
<span className="hidden sm:inline-block text-[10px] uppercase font-mono px-1.5 py-0.5 rounded bg-[var(--bg-elevated)] border border-[var(--border-color)] text-[var(--text-muted)]">
v0.1.0
</span>
</div>
@@ -39,11 +39,11 @@ export default function Header() {
href={`/${s.id}`}
className={`px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
isActive
? "text-[#f7f8f8] bg-[#141517] border border-[#23252a]"
: "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[#141517]/50"
? "text-[var(--text-primary)] bg-[var(--bg-elevated)] border border-[var(--border-color)]"
: "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-surface-hover)]"
}`}
>
<span className="mr-1.5 opacity-70">{s.icon}</span>
<span className="mr-1.5 opacity-80">{s.icon}</span>
{s.label}
</Link>
);
@@ -56,7 +56,7 @@ export default function Header() {
<Link
href="/search"
className="md:hidden p-1.5 text-[#8a8f98] hover:text-[#f7f8f8] rounded-lg hover:bg-[#141517] transition-colors"
className="md:hidden p-1.5 text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-lg hover:bg-[var(--bg-elevated)] transition-colors"
title="Search"
>
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -66,7 +66,7 @@ export default function Header() {
<Link
href="/create"
className="hidden sm:inline-flex items-center gap-1.5 px-3 py-1 bg-[#5e6ad2] hover:bg-[#7170ff] text-white text-xs font-medium rounded-lg transition-all shadow-sm hover:shadow-[#5e6ad2]/20"
className="hidden sm:inline-flex items-center gap-1.5 px-3 py-1 bg-[#5e6ad2] hover:bg-[#7170ff] text-white text-xs font-medium rounded-lg transition-all shadow-sm"
>
<span>+</span>
<span>New Doc</span>
@@ -76,21 +76,21 @@ export default function Header() {
href="/login"
className={`px-2.5 py-1 text-xs rounded-lg transition-colors ${
pathname === "/login"
? "text-[#f7f8f8] bg-[#141517]"
: "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[#141517]"
? "text-[var(--text-primary)] bg-[var(--bg-elevated)] font-medium"
: "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]"
}`}
>
Login
</Link>
<div className="border-l border-[#1f2022] pl-2.5 flex items-center">
<div className="border-l border-[var(--border-color)] pl-2.5 flex items-center">
<ThemeToggle />
</div>
{/* Mobile menu toggle */}
<button
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
className="md:hidden p-1 text-[#8a8f98] hover:text-[#f7f8f8]"
className="md:hidden p-1 text-[var(--text-muted)] hover:text-[var(--text-primary)]"
aria-label="Toggle navigation"
>
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -106,23 +106,23 @@ export default function Header() {
{/* Mobile Drawer */}
{mobileMenuOpen && (
<div className="md:hidden border-t border-[#1f2022] bg-[#0c0d0e] px-4 py-3 space-y-1 animate-fade-in">
<div className="md:hidden border-t border-[var(--border-color)] bg-[var(--bg-surface)] px-4 py-3 space-y-1 animate-fade-in shadow-lg">
{SECTIONS.map((s) => (
<Link
key={s.id}
href={`/${s.id}`}
onClick={() => setMobileMenuOpen(false)}
className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-[#d0d6e0] hover:bg-[#141517] hover:text-[#f7f8f8]"
className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-[var(--text-secondary)] hover:bg-[var(--bg-elevated)] hover:text-[var(--text-primary)]"
>
<span>{s.icon}</span>
<span>{s.label}</span>
</Link>
))}
<div className="pt-2 border-t border-[#1f2022] flex gap-2">
<div className="pt-2 border-t border-[var(--border-color)] flex gap-2">
<Link
href="/search"
onClick={() => setMobileMenuOpen(false)}
className="flex-1 text-center py-2 text-xs bg-[#141517] text-[#d0d6e0] rounded-lg"
className="flex-1 text-center py-2 text-xs bg-[var(--bg-elevated)] text-[var(--text-secondary)] rounded-lg font-medium border border-[var(--border-color)]"
>
Search
</Link>
apps/web/app/components/McpConfigSnippet.tsx
+9 -9
View File
@@ -60,9 +60,9 @@ export default function McpConfigSnippet() {
}
return (
<div className="bg-[#0c0d0e] border border-[#1f2022] rounded-xl overflow-hidden shadow-lg">
<div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl overflow-hidden shadow-md">
{/* Header bar with tabs */}
<div className="flex items-center justify-between px-4 py-2.5 bg-[#141517] border-b border-[#1f2022] flex-wrap gap-2">
<div className="flex items-center justify-between px-4 py-2.5 bg-[var(--bg-elevated)] border-b border-[var(--border-color)] flex-wrap gap-2">
<div className="flex items-center gap-1.5">
{CONFIGS.map((c) => (
<button
@@ -71,7 +71,7 @@ export default function McpConfigSnippet() {
className={`px-3 py-1 text-xs rounded-md font-medium transition-all ${
activeTab === c.id
? "bg-[#5e6ad2] text-white shadow-sm"
: "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[#1b1d20]"
: "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-surface)]"
}`}
>
{c.label}
@@ -82,14 +82,14 @@ export default function McpConfigSnippet() {
<button
onClick={handleCopy}
type="button"
className="flex items-center gap-1.5 text-xs text-[#8a8f98] hover:text-white bg-[#1a1b1d] hover:bg-[#23252a] px-2.5 py-1 rounded border border-[#27292d] transition-all"
className="flex items-center gap-1.5 text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)] bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated-hover)] px-2.5 py-1 rounded border border-[var(--border-color)] transition-all shadow-sm"
>
{copied ? (
<>
<svg className="w-3.5 h-3.5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg className="w-3.5 h-3.5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
<span className="text-emerald-400 font-medium">Copied!</span>
<span className="text-emerald-500 font-medium">Copied!</span>
</>
) : (
<>
@@ -103,12 +103,12 @@ export default function McpConfigSnippet() {
</div>
{/* Code preview */}
<pre className="p-4 text-xs font-mono text-[#d0d6e0] overflow-x-auto leading-relaxed">
<pre className="p-4 text-xs font-mono text-[var(--pre-text)] bg-[var(--code-block-bg)] overflow-x-auto leading-relaxed">
<code>{current.content}</code>
</pre>
<div className="px-4 py-2 bg-[#090a0b] border-t border-[#1a1b1d] text-[11px] text-[#62666d]">
Config location: <span className="font-mono text-[#8a8f98]">{current.filename}</span>
<div className="px-4 py-2 bg-[var(--bg-elevated)] border-t border-[var(--border-color)] text-[11px] text-[var(--text-dim)]">
Config location: <span className="font-mono text-[var(--text-muted)]">{current.filename}</span>
</div>
</div>
);
apps/web/app/components/Sidebar.tsx
+16 -16
View File
@@ -102,14 +102,14 @@ function TreeNodeItem({
const isCollapsed = collapsedMap[node.slug] ?? false;
return (
<li className={`select-none ${depth > 0 ? "ml-3 pl-2 border-l border-[#1f2022]" : ""}`}>
<li className={`select-none ${depth > 0 ? "ml-3 pl-2 border-l border-[var(--border-color)]" : ""}`}>
<div
className={`group flex items-center justify-between gap-1.5 text-xs py-1.5 px-2 rounded-md transition-all ${
isActive
? "text-[#7170ff] bg-[#5e6ad2]/15 font-medium border border-[#5e6ad2]/30 shadow-sm"
? "text-[#5e6ad2] dark:text-[#7170ff] bg-[#5e6ad2]/15 font-semibold border border-[#5e6ad2]/30 shadow-sm"
: isParentOfActive
? "text-[#d0d6e0] bg-[#141517]/80"
: "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[#141517]"
? "text-[var(--text-primary)] bg-[var(--bg-elevated)]"
: "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]"
}`}
>
<Link
@@ -125,7 +125,7 @@ function TreeNodeItem({
{isFolder && (
<div className="flex items-center gap-1 shrink-0">
<span className="text-[10px] text-[#62666d] bg-[#191a1b] px-1 py-0.2 rounded font-mono">
<span className="text-[10px] text-[var(--text-muted)] bg-[var(--bg-surface)] border border-[var(--border-color)] px-1 py-0.2 rounded font-mono">
{node.docCount}
</span>
<button
@@ -135,7 +135,7 @@ function TreeNodeItem({
e.stopPropagation();
toggleCollapse(node.slug);
}}
className="p-0.5 text-[#62666d] hover:text-[#d0d6e0] rounded hover:bg-[#23252a] transition-transform"
className="p-0.5 text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded hover:bg-[var(--bg-elevated-hover)] transition-transform"
aria-label={isCollapsed ? "Expand folder" : "Collapse folder"}
>
<svg
@@ -210,10 +210,10 @@ export default function Sidebar() {
value={filterText}
onChange={(e) => setFilterText(e.target.value)}
placeholder="Filter docs..."
className="w-full pl-7 pr-3 py-1.5 bg-[#141517] border border-[#23252a] hover:border-[#383b42] rounded-md text-xs text-[#f7f8f8] placeholder-[#62666d] focus:outline-none focus:border-[#5e6ad2] transition-colors"
className="w-full pl-7 pr-3 py-1.5 bg-[var(--bg-surface)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-md text-xs text-[var(--text-primary)] placeholder-[var(--text-dim)] focus:outline-none focus:border-[var(--brand)] transition-colors"
/>
<svg
className="w-3.5 h-3.5 text-[#62666d] absolute left-2 top-2.5"
className="w-3.5 h-3.5 text-[var(--text-muted)] absolute left-2 top-2.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -223,7 +223,7 @@ export default function Sidebar() {
{filterText && (
<button
onClick={() => setFilterText("")}
className="absolute right-2 top-2 text-xs text-[#62666d] hover:text-[#d0d6e0]"
className="absolute right-2 top-2 text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)]"
>
✕
</button>
@@ -232,7 +232,7 @@ export default function Sidebar() {
</div>
{/* Summary count */}
<div className="flex items-center justify-between px-1 mb-3 text-[11px] text-[#62666d]">
<div className="flex items-center justify-between px-1 mb-3 text-[11px] text-[var(--text-dim)]">
<span className="uppercase tracking-wider font-mono">Documentation</span>
<span>{filteredDocs.length} items</span>
</div>
@@ -247,20 +247,20 @@ export default function Sidebar() {
const isSectionActive = pathname === `/${id}` || pathname.startsWith(`/${id}/`);
return (
<div key={id} className="border-b border-[#141516] pb-3 last:border-0">
<div key={id} className="border-b border-[var(--border-color)] pb-3 last:border-0">
<Link
href={`/${id}`}
className={`flex items-center justify-between gap-1.5 px-1 py-1 mb-1 rounded text-xs font-semibold uppercase tracking-wider transition-colors ${
isSectionActive
? "text-[#7170ff]"
: "text-[#8a8f98] hover:text-[#d0d6e0]"
? "text-[#5e6ad2] dark:text-[#7170ff]"
: "text-[var(--text-muted)] hover:text-[var(--text-primary)]"
}`}
>
<div className="flex items-center gap-1.5">
<span>{icon}</span>
<span>{label}</span>
</div>
<span className="text-[10px] text-[#62666d] font-normal font-mono">
<span className="text-[10px] text-[var(--text-dim)] font-normal font-mono">
{sectionDocs.length}
</span>
</Link>
@@ -283,10 +283,10 @@ export default function Sidebar() {
</div>
{/* Bottom quick links */}
<div className="pt-3 border-t border-[#1f2022] mt-auto">
<div className="pt-3 border-t border-[var(--border-color)] mt-auto">
<Link
href="/create"
className="flex items-center justify-center gap-1.5 w-full py-1.5 text-xs bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] text-[#d0d6e0] hover:text-white rounded-md transition-colors font-medium"
className="flex items-center justify-center gap-1.5 w-full py-1.5 text-xs bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] rounded-md transition-colors font-medium"
>
<span>+ Create New Document</span>
</Link>
apps/web/app/components/TOC.tsx
+6 -6
View File
@@ -60,16 +60,16 @@ export default function TOC({ source }: { source: string }) {
return (
<nav className="text-xs">
<div className="flex items-center gap-2 mb-3 pb-2 border-b border-[#1f2022]">
<svg className="w-3.5 h-3.5 text-[#7170ff]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<div className="flex items-center gap-2 mb-3 pb-2 border-b border-[var(--border-color)]">
<svg className="w-3.5 h-3.5 text-[#5e6ad2] dark:text-[#7170ff]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h7" />
</svg>
<span className="font-semibold uppercase tracking-wider text-[#8a8f98] text-[11px]">
<span className="font-semibold uppercase tracking-wider text-[var(--text-muted)] text-[11px]">
On this page
</span>
</div>
<ul className="space-y-1.5 border-l border-[#1f2022] pl-2.5">
<ul className="space-y-1.5 border-l border-[var(--border-color)] pl-2.5">
{toc.map((entry) => {
const isActive = activeId === entry.id;
return (
@@ -92,8 +92,8 @@ export default function TOC({ source }: { source: string }) {
}}
className={`block py-0.5 transition-colors line-clamp-1 ${
isActive
? "text-[#7170ff] font-medium translate-x-0.5"
: "text-[#8a8f98] hover:text-[#d0d6e0]"
? "text-[#5e6ad2] dark:text-[#7170ff] font-semibold translate-x-0.5"
: "text-[var(--text-muted)] hover:text-[var(--text-primary)]"
}`}
title={entry.text}
>
apps/web/app/components/ThemeToggle.tsx
+36 -10
View File
@@ -4,33 +4,59 @@ import { useEffect, useState } from "react";
const STORAGE_KEY = "mcpedia-theme";
/** Dark mode toggle — persisted in localStorage, defaults to system preference. */
export default function ThemeToggle() {
const [dark, setDark] = useState(false);
const [mounted, setMounted] = useState(false);
const [isDark, setIsDark] = useState(true);
useEffect(() => {
setMounted(true);
const stored = localStorage.getItem(STORAGE_KEY);
const initial =
const darkActive =
stored === "dark" ||
(stored === null &&
window.matchMedia("(prefers-color-scheme: dark)").matches);
setDark(initial);
setIsDark(darkActive);
if (darkActive) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
}, []);
function toggle() {
const next = !dark;
setDark(next);
const next = !isDark;
setIsDark(next);
localStorage.setItem(STORAGE_KEY, next ? "dark" : "light");
document.documentElement.classList.toggle("dark", next);
if (next) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
}
if (!mounted) {
return (
<div className="w-8 h-8 rounded-lg bg-[var(--bg-elevated)] border border-[var(--border-color)] opacity-50" />
);
}
return (
<button
onClick={toggle}
aria-label="Toggle dark mode"
className="text-[#d0d6e0] hover:text-[#f7f8f8] p-1 rounded transition-colors"
type="button"
aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
title={isDark ? "Switch to light mode" : "Switch to dark mode"}
className="p-1.5 rounded-lg text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-elevated)] border border-transparent hover:border-[var(--border-color)] transition-all flex items-center justify-center"
>
{dark ? "☀️" : "🌙"}
{isDark ? (
<svg className="w-4 h-4 text-amber-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
) : (
<svg className="w-4 h-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
)}
</button>
);
}