@@ -108,7 +108,7 @@ function SidebarItem({ to, icon, label, end }: { to: string; icon: React.ReactNo
className={({ isActive }) => cn(
'flex items-center gap-2.5 px-3 py-2 mx-1 rounded text-sm transition-colors min-h-[36px]',
isActive
- ? 'bg-white/12 text-white font-medium'
+ ? 'bg-[var(--c-surface)]/12 text-white font-medium'
: 'text-white/65 hover:bg-white/8 hover:text-white',
)}
>
@@ -124,7 +124,7 @@ function RecentRepoItem({ ownerName, name, isActive, isStarred, onStar }: {
return (
@@ -160,7 +160,7 @@ function RepoSubNav({ owner, repo }: { owner: string; repo: string }) {
className={({ isActive }) => cn(
'flex items-center gap-2 px-3 py-1.5 mx-1 rounded text-xs transition-colors',
isActive
- ? 'bg-white/12 text-white'
+ ? 'bg-[var(--c-surface)]/12 text-white'
: 'text-white/55 hover:bg-white/8 hover:text-white/90',
)}>
{item.icon}
diff --git a/frontend/src/components/repos/RepoCard.tsx b/frontend/src/components/repos/RepoCard.tsx
index ac62eb8..1f8824a 100644
--- a/frontend/src/components/repos/RepoCard.tsx
+++ b/frontend/src/components/repos/RepoCard.tsx
@@ -12,25 +12,25 @@ export function RepoCard({ repo }: RepoCardProps) {
return (
-
+
{repo.name}
{repo.isPrivate && (
-
+
Private
)}
{repo.description && (
-
{repo.description}
+
{repo.description}
)}
-
+
Updated {ago} · {repo.defaultBranch}
diff --git a/frontend/src/components/repos/TreeBrowser.tsx b/frontend/src/components/repos/TreeBrowser.tsx
index e993cf7..f8d4d30 100644
--- a/frontend/src/components/repos/TreeBrowser.tsx
+++ b/frontend/src/components/repos/TreeBrowser.tsx
@@ -35,9 +35,9 @@ export function TreeBrowser({ owner, repo, ref, path = '' }: TreeBrowserProps) {
const { data: entries, isLoading, isError } = useRepoTree(owner, repo, ref, path)
if (isLoading) return
- if (isError) return
Failed to load file tree.
+ if (isError) return
Failed to load file tree.
if (!entries?.length) return (
-
+
No files yet — push your first commit to see them here.
)
@@ -47,19 +47,19 @@ export function TreeBrowser({ owner, repo, ref, path = '' }: TreeBrowserProps) {
const sorted = [...dirs, ...files]
return (
-
+
{/* Path breadcrumb inside tree */}
{path && (
-
-
{repo}
+
+
{repo}
{path.split('/').map((seg, i, arr) => {
const partial = arr.slice(0, i + 1).join('/')
return (
/
{i < arr.length - 1
- ? {seg}
- : {seg}
+ ? {seg}
+ : {seg}
}
)
@@ -82,36 +82,36 @@ export function TreeBrowser({ owner, repo, ref, path = '' }: TreeBrowserProps) {
: `/repos/${owner}/${repo}/blob?ref=${encodeURIComponent(ref)}&path=${encodeURIComponent(entryPath)}`
return (
-
+
{/* Name */}
{isDir ? (
- |
{/* Commit message */}
-
+ |
{entry.commitMsg}
|
{/* Date */}
-
+ |
{relativeTime(entry.commitDate)}
|
@@ -125,9 +125,9 @@ export function TreeBrowser({ owner, repo, ref, path = '' }: TreeBrowserProps) {
function TreeSkeleton() {
return (
-
+
{Array.from({ length: 5 }).map((_, i) => (
-
+
diff --git a/frontend/src/hooks/useDarkMode.ts b/frontend/src/hooks/useDarkMode.ts
new file mode 100644
index 0000000..b2d1bae
--- /dev/null
+++ b/frontend/src/hooks/useDarkMode.ts
@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react'
+
+export function useDarkMode() {
+ const [dark, setDark] = useState(() => {
+ const stored = localStorage.getItem('fb_dark')
+ if (stored !== null) return stored === 'true'
+ return window.matchMedia('(prefers-color-scheme: dark)').matches
+ })
+
+ useEffect(() => {
+ document.documentElement.classList.toggle('dark', dark)
+ localStorage.setItem('fb_dark', String(dark))
+ }, [dark])
+
+ return { dark, toggle: () => setDark(d => !d) }
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 46ba5be..df6d351 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,15 +1,71 @@
@import "tailwindcss";
-/* Reset #root to full viewport — Tailwind handles all layout via utility classes */
+/* Enable class-based dark mode for Tailwind v4 */
+@variant dark (&:where(.dark, .dark *));
+
+/* ── Semantic color tokens ───────────────────────────────────────────────── */
+:root {
+ --c-text: #172B4D;
+ --c-muted: #5E6C84;
+ --c-subtle: #97A0AF;
+ --c-surface: #FFFFFF;
+ --c-surface-raised: #FAFBFC;
+ --c-surface-muted: #F4F5F7;
+ --c-border: #DFE1E6;
+ --c-brand: #0052CC;
+ --c-brand-hover: #0065FF;
+ --c-brand-focus: #4C9AFF;
+ --c-brand-tint: #DEEBFF;
+ --c-success: #00875A;
+ --c-danger: #DE350B;
+ --c-danger-dark: #BF2600;
+ --c-danger-tint: #FFEBE6;
+ --c-warning: #FF8B00;
+}
+
+.dark {
+ color-scheme: dark;
+ --c-text: #CBD5E1;
+ --c-muted: #94A3B8;
+ --c-subtle: #64748B;
+ --c-surface: #1E293B;
+ --c-surface-raised: #1A2535;
+ --c-surface-muted: #0F172A;
+ --c-border: #334155;
+ --c-brand: #3B82F6;
+ --c-brand-hover: #60A5FA;
+ --c-brand-focus: #93C5FD;
+ --c-brand-tint: #1E3A5F;
+ --c-success: #34D399;
+ --c-danger: #F87171;
+ --c-danger-dark: #EF4444;
+ --c-danger-tint: #451a1a;
+ --c-warning: #FBBF24;
+}
+
body {
margin: 0;
font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- color: #172B4D;
- background: #FAFBFC;
+ color: var(--c-text);
+ background: var(--c-surface-raised);
}
#root {
height: 100dvh;
}
+
+/* Native form elements in dark mode */
+.dark input,
+.dark textarea,
+.dark select {
+ background-color: var(--c-surface);
+ color: var(--c-text);
+ border-color: var(--c-border);
+ color-scheme: dark;
+}
+.dark input::placeholder,
+.dark textarea::placeholder {
+ color: var(--c-subtle);
+}
diff --git a/frontend/src/pages/BlobPage.tsx b/frontend/src/pages/BlobPage.tsx
index d6f223a..60c1367 100644
--- a/frontend/src/pages/BlobPage.tsx
+++ b/frontend/src/pages/BlobPage.tsx
@@ -50,7 +50,7 @@ export default function BlobPage() {
}
if (isLoading) return
- if (isError || !blob) return
File not found.
+ if (isError || !blob) return
File not found.
const lines = blob.content.split('\n')
const pathParts = filePath.split('/')
@@ -60,18 +60,18 @@ export default function BlobPage() {
{/* Breadcrumb */}
- Repositories
- /
- {repoName}
+ Repositories
+ /
+ {repoName}
{pathParts.map((seg, i) => {
const partial = pathParts.slice(0, i + 1).join('/')
const isLast = i === pathParts.length - 1
return (
- /
+ /
{isLast
- ? {seg}
- : {seg}
+ ? {seg}
+ : {seg}
}
)
@@ -79,24 +79,24 @@ export default function BlobPage() {
{/* File card */}
-
+
{/* Toolbar */}
-
+
{/* Branch pill */}
-
+
{branch}
- {repoName}
- /
- {fileName}
+ {repoName}
+ /
+ {fileName}