Theme Customization
eziwiki supports extensive theme customization through the payload configuration and CSS variables.
Theme Configuration#
Basic Theme#
Add a theme object to your payload/config.ts:
export const payload: Payload = {
global: {
title: 'My Wiki',
description: 'My personal knowledge base',
},
navigation: [...],
theme: {
primary: '#2563eb',
secondary: '#7c3aed',
background: '#ffffff',
text: '#1f2937',
sidebarBg: '#f9fafb',
codeBg: '#f3f4f6',
},
};Theme Properties#
All properties are optional:
- primary - Primary color (links, active states)
- secondary - Secondary color (accents)
- background - Page background color
- text - Main text color
- sidebarBg - Sidebar background color
- codeBg - Code block background color
Colors must be in hex format: #rrggbb
Built-in Dark Mode#
eziwiki includes automatic dark mode support. Users can toggle between light and dark themes using the theme toggle button.
Dark mode colors are automatically adjusted, but you can customize them in styles/theme.css.
Advanced Customization#
CSS Variables#
For more control, edit styles/theme.css:
:root {
/* Light mode colors */
--color-primary: #2563eb;
--color-secondary: #7c3aed;
--color-background: #ffffff;
--color-text: #1f2937;
--color-text-muted: #6b7280;
--color-sidebar-bg: #f9fafb;
--color-sidebar-hover: #f3f4f6;
--color-code-bg: #f3f4f6;
--color-code-text: #1f2937;
--color-border: #e5e7eb;
}
.dark {
/* Dark mode colors */
--color-primary: #3b82f6;
--color-secondary: #8b5cf6;
--color-background: #111827;
--color-text: #f9fafb;
--color-text-muted: #9ca3af;
--color-sidebar-bg: #1f2937;
--color-sidebar-hover: #374151;
--color-code-bg: #1f2937;
--color-code-text: #f9fafb;
--color-border: #374151;
}Typography#
Customize fonts and text styles:
:root {
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'Fira Code', 'Courier New', monospace;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
}Spacing#
Adjust spacing and layout:
:root {
--sidebar-width: 280px;
--content-max-width: 800px;
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
}Color Schemes#
Blue Theme (Default)#
theme: {
primary: '#2563eb',
secondary: '#7c3aed',
background: '#ffffff',
text: '#1f2937',
sidebarBg: '#f9fafb',
codeBg: '#f3f4f6',
}Green Theme#
theme: {
primary: '#059669',
secondary: '#10b981',
background: '#ffffff',
text: '#1f2937',
sidebarBg: '#f0fdf4',
codeBg: '#f3f4f6',
}Purple Theme#
theme: {
primary: '#7c3aed',
secondary: '#a78bfa',
background: '#ffffff',
text: '#1f2937',
sidebarBg: '#faf5ff',
codeBg: '#f3f4f6',
}Dark Theme#
theme: {
primary: '#3b82f6',
secondary: '#8b5cf6',
background: '#111827',
text: '#f9fafb',
sidebarBg: '#1f2937',
codeBg: '#1f2937',
}Section Colors#
Add colors to navigation sections:
navigation: [
{
name: 'Getting Started',
color: '#dbeafe', // Light blue
children: [...],
},
{
name: 'API Reference',
color: '#fef3c7', // Light yellow
children: [...],
},
{
name: 'Examples',
color: '#d1fae5', // Light green
children: [...],
},
]Recommended Section Colors#
Light, subtle colors work best:
- Blue:
#dbeafe - Yellow:
#fef3c7 - Green:
#d1fae5 - Purple:
#e9d5ff - Pink:
#fce7f3 - Orange:
#fed7aa - Red:
#fecaca
Syntax Highlighting#
Code blocks use Shiki for syntax highlighting. The theme is configured in lib/markdown/highlighter.ts.
Available themes:
github-light(default light)github-dark(default dark)norddraculamonokaione-dark-pro
To change the theme, edit lib/markdown/highlighter.ts:
const highlighter = await getHighlighter({
themes: ['github-light', 'nord'], // Change themes here
langs: ['javascript', 'typescript', ...],
});Custom Fonts#
Using Google Fonts#
Add to app/layout.tsx:
import { Inter, Fira_Code } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
const firaCode = Fira_Code({ subsets: ['latin'] });
export default function RootLayout({ children }) {
return (
<html lang="en" className={inter.className}>
<body>{children}</body>
</html>
);
}Using Local Fonts#
Place fonts in public/fonts/ and add to styles/theme.css:
@font-face {
font-family: 'CustomFont';
src: url('/fonts/CustomFont.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
:root {
--font-sans: 'CustomFont', system-ui, sans-serif;
}Responsive Design#
eziwiki is fully responsive. Customize breakpoints in tailwind.config.ts:
module.exports = {
theme: {
screens: {
xs: '475px',
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
},
},
};