Themes & Layouts

Customize the appearance and navigation layout of your documentation.

Themes

Available Themes

System (Default)

Automatically matches your operating system theme
Switches between light and dark based on OS settings
Best for most users

Light

Always displays in light mode
White background, dark text
High contrast for readability

Dark

Always displays in dark mode
Dark background, light text
Reduces eye strain in low light

Changing Theme

Open project settings (⚙️ button)
Select Theme dropdown
Choose: System, Light, or Dark
Changes apply immediately

Theme in Exported Sites

Exported documentation includes theme switching:

Users can toggle between light/dark
Theme preference is saved
Button in header for easy access

Layouts

Available Layouts

Left Navigation (Default)

Sidebar on the left
Content on the right
Most common layout
Best for desktop

Right Navigation

Sidebar on the right
Content on the left
Alternative layout
Good for RTL languages

Top Navigation

Horizontal menu at top
Full-width content below
Modern, clean look
Great for fewer pages

Changing Layout

Open project settings
Select Layout dropdown
Choose layout type
Export to see changes

Layout Behavior

Desktop (≥1024px)

Sidebar layouts: Fixed sidebar, scrolling content
Top layout: Sticky header, full-width content

Mobile (<1024px)

All layouts: Stacked vertically
Sidebar appears above content
Responsive and touch-friendly

Customization Options

Project Title

Set a custom title for your documentation:

Open project settings
Enter Project Title
Appears in headers and browser tabs

Home Link

Toggle home link visibility:

Open project settings
Check/uncheck Show Home Link
Adds/removes home link in navigation

Home Page Card Layout

Customize the number of columns for page cards on the home page:

Open project settings
Go to Home Page tab
Select Card Columns: 2, 3, or 4 columns
Changes apply to exported sites

Column Options:

2 Columns - Larger cards, more detail visible
3 Columns - Balanced layout (default)
4 Columns - Compact, more cards per row

Responsive Behavior:

Desktop: Shows selected column count
Tablet: Automatically adjusts to 2 columns
Mobile: Stacks to 1 column

Theme Colors

ezDoc uses Bulma's color system:

Primary Colors

Primary - Turquoise (#00d1b2)
Link - Blue (#3273dc)
Info - Cyan (#3e8ed0)
Success - Green (#48c774)
Warning - Yellow (#ffe08a)
Danger - Red (#f14668)

Neutral Colors

Dark - Dark grey (#363636)
Light - Light grey (#f5f5f5)
White - Pure white (#ffffff)
Black - Pure black (#0a0a0a)

Dark Mode Features

Automatic Adjustments

In dark mode:

Background becomes dark
Text becomes light
Colors adjust for contrast
Images maintain quality
Code blocks adapt

CSS Variables

ezDoc uses Bulma CSS variables that automatically adapt:

var(--bulma-scheme-main)      /* Background */
var(--bulma-text)             /* Text color */
var(--bulma-border)           /* Borders */
var(--bulma-link)             /* Links */

Responsive Design

Breakpoints

Mobile: < 769px
Tablet: 769px - 1023px
Desktop: 1024px - 1215px
Widescreen: 1216px - 1407px
FullHD: ≥ 1408px

Mobile Optimizations

Stacked layouts
Touch-friendly buttons
Readable font sizes
Optimized spacing
Collapsible navigation

Best Practices

Theme Selection

Use System for automatic adaptation
Use Light for print-friendly docs
Use Dark for developer docs

Layout Selection

Left Nav: Traditional documentation
Right Nav: Alternative preference
Top Nav: Modern, minimal docs

Consistency

Stick to one layout per project
Use consistent colors
Maintain visual hierarchy

Preview Before Export

Always preview your documentation:

Click Preview button
Check theme appearance
Test navigation
Verify responsive design

Accessibility

Color Contrast

All themes maintain WCAG AA contrast ratios:

Text is readable
Links are distinguishable
Buttons are clear

Theme Switching

Users can choose their preferred theme regardless of your default setting.

🎨 Design Tip: Test your documentation in both light and dark modes to ensure readability!