feat: add themes.

Author: PttCodingMan

frontend/src/components/ChangePasswordModal.jsx

@@ -55,10 +55,10 @@ export default function ChangePasswordModal({ isOpen, onClose }) {
   return (
     <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={handleClose}>
       <div
-        className="bg-white dark:bg-gray-800 rounded-xl shadow-xl w-full max-w-sm mx-4 p-6"
+        className="bg-surface rounded-xl shadow-xl w-full max-w-sm mx-4 p-6"
         onClick={(e) => e.stopPropagation()}
       >
-        <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">Change Password</h2>
+        <h2 className="text-lg font-semibold text-text mb-4">Change Password</h2>
 
         {success ? (
           <div className="p-3 rounded-lg text-sm bg-green-50 text-green-700 border border-green-200">
@@ -67,48 +67,48 @@ export default function ChangePasswordModal({ isOpen, onClose }) {
         ) : (
           <form onSubmit={handleSubmit} className="space-y-3">
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Current Password</label>
+              <label className="block text-sm font-medium text-text mb-1">Current Password</label>
               <input
                 type="password"
                 value={oldPassword}
                 onChange={(e) => setOldPassword(e.target.value)}
                 required
-                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:border-blue-400"
+                className="w-full px-3 py-2 border border-border rounded-lg text-sm bg-surface text-text focus:outline-none focus:border-primary"
               />
             </div>
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">New Password</label>
+              <label className="block text-sm font-medium text-text mb-1">New Password</label>
               <input
                 type="password"
                 value={newPassword}
                 onChange={(e) => setNewPassword(e.target.value)}
                 required
-                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:border-blue-400"
+                className="w-full px-3 py-2 border border-border rounded-lg text-sm bg-surface text-text focus:outline-none focus:border-primary"
               />
             </div>
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Confirm New Password</label>
+              <label className="block text-sm font-medium text-text mb-1">Confirm New Password</label>
               <input
                 type="password"
                 value={confirmPassword}
                 onChange={(e) => setConfirmPassword(e.target.value)}
                 required
-                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:border-blue-400"
+                className="w-full px-3 py-2 border border-border rounded-lg text-sm bg-surface text-text focus:outline-none focus:border-primary"
               />
             </div>
             {error && <p className="text-sm text-red-600">{error}</p>}
             <div className="flex justify-end gap-2 pt-2">
               <button
                 type="button"
                 onClick={handleClose}
-                className="px-4 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200"
+                className="px-4 py-2 text-sm text-text-secondary hover:text-text"
               >
                 Cancel
               </button>
               <button
                 type="submit"
                 disabled={loading}
-                className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 disabled:opacity-50"
+                className="px-4 py-2 bg-primary text-primary-text rounded-lg text-sm hover:bg-primary-hover disabled:opacity-50"
               >
                 {loading ? 'Saving...' : 'Change Password'}
               </button>

frontend/src/components/Comments.jsx

@@ -16,39 +16,39 @@ function CommentItem({ comment, currentUser, onDelete, onUpdate }) {
 
   return (
     <div className="flex gap-3 py-3">
-      <div className="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-sm font-medium shrink-0">
+      <div className="w-8 h-8 rounded-full bg-primary-soft text-primary flex items-center justify-center text-sm font-medium shrink-0">
         {((comment.display_name || comment.username) || '?')[0].toUpperCase()}
       </div>
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2 mb-1">
-          <span className="text-sm font-medium text-gray-800 dark:text-gray-200">{comment.display_name || comment.username}</span>
-          <span className="text-xs text-gray-400">{new Date(comment.created_at).toLocaleString()}</span>
+          <span className="text-sm font-medium text-text">{comment.display_name || comment.username}</span>
+          <span className="text-xs text-text-secondary">{new Date(comment.created_at).toLocaleString()}</span>
           {comment.updated_at !== comment.created_at && (
-            <span className="text-xs text-gray-400">(edited)</span>
+            <span className="text-xs text-text-secondary">(edited)</span>
           )}
         </div>
         {editing ? (
           <div>
             <textarea
               value={editContent}
               onChange={(e) => setEditContent(e.target.value)}
-              className="w-full p-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:border-blue-400 resize-none"
+              className="w-full p-2 border border-border rounded-lg text-sm focus:outline-none focus:border-primary resize-none bg-surface text-text"
               rows={3}
             />
             <div className="flex gap-2 mt-1">
-              <button onClick={handleSave} className="text-xs px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700">Save</button>
-              <button onClick={() => { setEditing(false); setEditContent(comment.content) }} className="text-xs px-3 py-1 text-gray-500 hover:text-gray-700">Cancel</button>
+              <button onClick={handleSave} className="text-xs px-3 py-1 bg-primary text-primary-text rounded hover:bg-primary-hover">Save</button>
+              <button onClick={() => { setEditing(false); setEditContent(comment.content) }} className="text-xs px-3 py-1 text-text-secondary hover:text-text">Cancel</button>
             </div>
           </div>
         ) : (
-          <div className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap">{comment.content}</div>
+          <div className="text-sm text-text whitespace-pre-wrap">{comment.content}</div>
         )}
         {!editing && (isOwner || isAdmin) && (
           <div className="flex gap-3 mt-1">
             {isOwner && (
-              <button onClick={() => setEditing(true)} className="text-xs text-gray-400 hover:text-gray-600">Edit</button>
+              <button onClick={() => setEditing(true)} className="text-xs text-text-secondary hover:text-text">Edit</button>
             )}
-            <button onClick={() => onDelete(comment.id)} className="text-xs text-gray-400 hover:text-red-500">Delete</button>
+            <button onClick={() => onDelete(comment.id)} className="text-xs text-text-secondary hover:text-red-500">Delete</button>
           </div>
         )}
       </div>
@@ -106,17 +106,17 @@ export default function Comments({ slug }) {
   }
 
   return (
-    <div className="mt-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
-      <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">
+    <div className="mt-6 bg-surface rounded-xl shadow-sm border border-border p-6">
+      <h3 className="text-sm font-semibold text-text-secondary uppercase tracking-wider mb-4">
         Discussion {total > 0 && `(${total})`}
       </h3>
 
       {loading ? (
-        <div className="text-sm text-gray-400">Loading...</div>
+        <div className="text-sm text-text-secondary">Loading...</div>
       ) : (
         <>
           {comments.length > 0 && (
-            <div className="divide-y divide-gray-100 mb-4">
+            <div className="divide-y divide-border mb-4">
               {comments.map((c) => (
                 <CommentItem
                   key={c.id}
@@ -134,14 +134,14 @@ export default function Comments({ slug }) {
               value={newComment}
               onChange={(e) => setNewComment(e.target.value)}
               placeholder="Write a comment..."
-              className="w-full p-3 border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg text-sm focus:outline-none focus:border-blue-400 resize-none"
+              className="w-full p-3 border border-border bg-surface text-text rounded-lg text-sm focus:outline-none focus:border-primary resize-none"
               rows={3}
             />
             <div className="flex justify-end mt-2">
               <button
                 type="submit"
                 disabled={submitting || !newComment.trim()}
-                className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 disabled:opacity-50"
+                className="px-4 py-2 bg-primary text-primary-text rounded-lg text-sm hover:bg-primary-hover disabled:opacity-50"
               >
                 {submitting ? 'Posting...' : 'Comment'}
               </button>

frontend/src/components/Layout/Layout.jsx

@@ -1,18 +1,109 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import useAuth from '../../store/useAuth'
 import usePages from '../../store/usePages'
 import useBookmarks from '../../store/useBookmarks'
-import useTheme from '../../store/useTheme'
+import useTheme, { themes } from '../../store/useTheme'
 import Sidebar from './Sidebar'
 import KeyboardShortcuts from '../../hooks/useKeyboard'
 import SearchModal from '../Search/SearchModal'
 
+function applyThemePreview(themeId) {
+  const t = themes[themeId] || themes.light
+  document.documentElement.setAttribute('data-theme', themeId)
+  document.documentElement.classList.toggle('dark', t.dark)
+}
+
+function ThemePicker({ theme, setTheme }) {
+  const [open, setOpen] = useState(false)
+  const ref = useRef(null)
+  const savedTheme = useRef(theme)
+
+  useEffect(() => {
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        applyThemePreview(savedTheme.current)
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [])
+
+  const handleOpen = () => {
+    savedTheme.current = theme
+    setOpen(!open)
+  }
+
+  const handleHover = (id) => {
+    applyThemePreview(id)
+  }
+
+  const handleLeave = () => {
+    applyThemePreview(savedTheme.current)
+  }
+
+  const handleSelect = (id) => {
+    savedTheme.current = id
+    setTheme(id)
+    setOpen(false)
+  }
+
+  return (
+    <div className="relative mr-2" ref={ref}>
+      <button
+        onClick={handleOpen}
+        className="p-1.5 rounded hover:bg-surface-hover text-text-secondary flex items-center gap-1"
+        title="Change theme"
+      >
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" />
+          <path d="M12 2c3 2.5 4.5 6 4.5 10s-1.5 7.5-4.5 10" />
+          <path d="M12 2c-3 2.5-4.5 6-4.5 10s1.5 7.5 4.5 10" />
+          <path d="M2 12h20" />
+        </svg>
+      </button>
+      {open && (
+        <div
+          className="absolute right-0 top-full mt-1 bg-surface border border-border rounded-xl shadow-lg p-2 z-50 w-44"
+          onMouseLeave={handleLeave}
+        >
+          <div className="text-xs font-semibold text-text-secondary uppercase tracking-wider px-2 py-1 mb-1">Theme</div>
+          {Object.entries(themes).map(([id, t]) => (
+            <button
+              key={id}
+              onMouseEnter={() => handleHover(id)}
+              onClick={() => handleSelect(id)}
+              className={`w-full flex items-center gap-2.5 px-2 py-1.5 rounded-lg text-sm text-left transition-colors ${
+                theme === id
+                  ? 'bg-surface-hover font-medium text-text'
+                  : 'text-text-secondary hover:bg-surface-hover'
+              }`}
+            >
+              <span className="flex gap-0.5 shrink-0">
+                {t.preview.map((c, i) => (
+                  <span
+                    key={i}
+                    className="w-3 h-3 rounded-full border border-border"
+                    style={{ background: c }}
+                  />
+                ))}
+              </span>
+              <span>{t.name}</span>
+              {theme === id && <span className="ml-auto text-primary text-xs">&#10003;</span>}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
 export default function Layout({ children }) {
   const { user, logout } = useAuth()
   const { fetchTree } = usePages()
   const { fetchBookmarks } = useBookmarks()
-  const { dark, toggle: toggleTheme, init: initTheme } = useTheme()
+  const { theme, setTheme, init: initTheme, dark } = useTheme()
   const navigate = useNavigate()
   const [sidebarOpen, setSidebarOpen] = useState(window.innerWidth > 768)
   const [searchOpen, setSearchOpen] = useState(false)
@@ -29,69 +120,54 @@ export default function Layout({ children }) {
   }
 
   return (
-    <div className="h-screen flex flex-col bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+    <div className="h-screen flex flex-col bg-bg text-text">
       <KeyboardShortcuts onOpenSearch={() => setSearchOpen(true)} />
       <SearchModal isOpen={searchOpen} onClose={() => setSearchOpen(false)} />
 
       {/* Navbar */}
-      <nav className="h-12 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex items-center px-4 shrink-0">
+      <nav className="h-12 bg-surface border-b border-border flex items-center px-4 shrink-0">
         <button
           onClick={() => setSidebarOpen(!sidebarOpen)}
-          className="p-1.5 rounded hover:bg-gray-100 mr-2 text-gray-500"
+          className="p-1.5 rounded hover:bg-surface-hover mr-2 text-text-secondary"
           title="Toggle sidebar"
         >
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
             <path d="M3 12h18M3 6h18M3 18h18" />
           </svg>
         </button>
-        <Link to="/" className="font-bold text-lg text-gray-800 dark:text-gray-100 mr-4">JustWiki</Link>
+        <Link to="/" className="font-bold text-lg text-text mr-4">JustWiki</Link>
         <div className="flex-1" />
 
         {/* Search button */}
         <button
           onClick={() => setSearchOpen(true)}
-          className="flex items-center gap-2 text-sm px-3 py-1.5 bg-gray-100 text-gray-500 rounded-lg hover:bg-gray-200 mr-3"
+          className="flex items-center gap-2 text-sm px-3 py-1.5 bg-surface-hover text-text-secondary rounded-lg hover:brightness-95 mr-3"
           title="Search (Ctrl+K)"
         >
           <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
             <circle cx="11" cy="11" r="8" />
             <path d="m21 21-4.35-4.35" />
           </svg>
           <span className="hidden sm:inline">Search</span>
-          <kbd className="text-xs text-gray-400 border border-gray-300 rounded px-1">⌘K</kbd>
+          <kbd className="text-xs text-text-secondary border border-border rounded px-1">⌘K</kbd>
         </button>
 
         <button
           onClick={() => navigate('/new')}
-          className="text-sm px-3 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 mr-3"
+          className="text-sm px-3 py-1.5 bg-primary text-primary-text rounded-lg hover:bg-primary-hover mr-3"
           title="New page (Ctrl+N)"
         >
           + New
         </button>
-        <button
-          onClick={toggleTheme}
-          className="p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 mr-2 text-gray-500 dark:text-gray-400"
-          title={dark ? 'Light mode' : 'Dark mode'}
-        >
-          {dark ? (
-            <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
-              <circle cx="12" cy="12" r="5" />
-              <path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
-            </svg>
-          ) : (
-            <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
-              <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
-            </svg>
-          )}
-        </button>
+        <ThemePicker theme={theme} setTheme={setTheme} />
         <Link
           to="/profile"
-          className="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 mr-3"
+          className="text-sm text-text-secondary hover:text-text mr-3"
           title="Profile"
         >
           {user?.username}
         </Link>
-        <button onClick={handleLogout} className="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+        <button onClick={handleLogout} className="text-sm text-text-secondary hover:text-text">
           Logout
         </button>
       </nav>
@@ -112,7 +188,7 @@ export default function Layout({ children }) {
         >
           <Sidebar />
         </div>
-        <main className="flex-1 overflow-auto bg-gray-50 dark:bg-gray-900 p-4 sm:p-6">
+        <main className="flex-1 overflow-auto bg-bg p-4 sm:p-6">
           {children}
         </main>
       </div>