Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/sureshamal/markview/llms.txt

Use this file to discover all available pages before exploring further.

MarkView comes with 7 carefully crafted themes to suit different preferences and lighting conditions. Switch themes instantly with a keyboard shortcut, and your preference is automatically saved.

​
Available Themes

MarkView includes the following themes:

Light

Clean, bright theme perfect for daytime use
Background: #ffffff

Dark

Classic dark theme for reduced eye strain
Background: #0f172a

Ocean

Deep blue theme inspired by ocean depths
Background: #0c1929

Forest

Natural green theme for a calming experience
Background: #1a2e1a

Sunset

Warm reddish theme reminiscent of dusk
Background: #2d1f1f

Purple

Rich purple theme for a unique look
Background: #1a1428

Midnight

Ultra-dark theme for minimal light emission
Background: #0a0a12

​
Switching Themes

You can change themes in two ways:
Press Alt+T to open the theme selector modal.
1

Open Theme Selector

Press Alt+T to open the theme selection dialog
2

Search or Navigate

  • Type to filter themes by name
  • Use ↑ and ↓ arrow keys to navigate
3

Select Theme

Press Enter to apply the selected theme, or click on any theme
Press Esc to close the theme selector without making changes.

​
Theme Persistence

MarkView automatically saves your theme preference using localStorage. Your selected theme will be:
  • Saved immediately when you switch themes (page.tsx:377)
  • Restored automatically when you reopen MarkView (page.tsx:369-373)
  • Persisted across browser sessions
The theme preference is stored locally in your browser and does not sync across different devices or browsers.

​
Theme-Aware Components

Several UI components adapt to the selected theme:

​
Syntax Highlighting

Code blocks automatically adjust their color scheme based on the theme:
  • Light theme: Uses the prism style
  • Dark themes (dark, ocean, forest, sunset, purple, midnight): Use the vscDarkPlus style
This is handled automatically in the CodeBlock component (page.tsx:46-47).

​
Mermaid Diagrams

Mermaid diagrams are rendered with theme-appropriate colors:
  • Light themes get standard Mermaid rendering
  • Dark themes apply a color inversion filter for better visibility (page.tsx:23-29)

​
UI Elements

All UI elements use CSS custom properties that change based on the selected theme:
  • --background: Main background color
  • --foreground: Primary text color
  • --card-bg: Card and sidebar background
  • --card-border: Border colors
  • --primary: Accent color for interactive elements
  • --text-secondary: Muted text color
  • --code-bg: Code block background

​
Implementation Details

Themes are defined as an array of objects (page.tsx:251-259): 
type Theme = 'light' | 'dark' | 'ocean' | 'forest' | 'sunset' | 'purple' | 'midnight';

const themes: { value: Theme; label: string; color: string }[] = [
  { value: 'light', label: 'Light', color: '#ffffff' },
  { value: 'dark', label: 'Dark', color: '#0f172a' },
  { value: 'ocean', label: 'Ocean', color: '#0c1929' },
  { value: 'forest', label: 'Forest', color: '#1a2e1a' },
  { value: 'sunset', label: 'Sunset', color: '#2d1f1f' },
  { value: 'purple', label: 'Purple', color: '#1a1428' },
  { value: 'midnight', label: 'Midnight', color: '#0a0a12' },
];
The theme is applied via a data-theme attribute on the root element (page.tsx:677), which triggers CSS variable updates.