Customization

Scratch offers extensive customization options for appearance and typography. All settings are stored per-folder, so different note collections can have different styles.

Theme

Switch between light, dark, and system themes.

Theme Modes

Light Mode

Clean, bright interface
Optimized for daylight use
High contrast for readability

Dark Mode

Reduced eye strain in low light
OLED-friendly blacks
Subtle color palette

System Mode

Automatically follows your OS theme preference
Switches with system dark mode
Seamless day-to-night transition

Changing Theme

Open Settings (Cmd+, or Ctrl+,)
Go to the Appearance tab
Select Light, Dark, or System

Changes apply immediately. No restart required.

Use the command palette (Cmd+P) and select “Toggle theme” to quickly cycle through modes.

Typography

Customize font family, size, weight, and spacing for optimal readability.

Font Family

Choose from three font families:

Family	Description	Use Case
Sans	System sans-serif fonts	General writing, clean modern look
Serif	Traditional serif fonts	Long-form reading, classic feel
Mono	Monospace fonts	Technical notes, code-heavy content

Font Stack Details:

/* Sans (system-sans) */
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
"Helvetica Neue", Arial, sans-serif

/* Serif */
ui-serif, Georgia, Cambria, "Times New Roman", Times, serif

/* Monospace */
ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, 
'Courier New', monospace

Base Font Size

Adjust the base text size for body content.

Range: 12px - 24px
Default: 15px
Step: 1px

Headings scale proportionally:

H1: 2.25× base size
H2: 1.75× base size
H3: 1.5× base size
H4: 1.25× base size
H5-H6: 1× base size (same as body)

Changing the base size automatically updates all heading sizes to maintain visual hierarchy.

Bold Weight

Control how bold your bold text appears.

Weight	Value	Availability
Medium	500	Sans, Serif only
Semibold	600	All fonts (default)
Bold	700	All fonts
Extra Bold	800	All fonts

Medium weight is not available for monospace fonts and will auto-adjust to Semibold when switching to monospace.

Line Height

Adjust vertical spacing between lines of text.

Range: 1.0 - 2.5
Default: 1.6
Step: 0.1

Recommendations:

Tight (1.0-1.3): Compact layouts, lists
Normal (1.4-1.7): General reading
Loose (1.8-2.5): Poetry, breathing room

Changing Typography

Open Settings → Appearance
Under Typography, adjust:
- Font: Sans, Serif, or Mono
- Size: Drag slider or enter value (12-24)
- Bold Weight: Select from dropdown
- Line Height: Drag slider or enter value (1.0-2.5)
Preview updates in real-time below
Click Reset to defaults to restore original settings

Text Direction

Switch between left-to-right (LTR) and right-to-left (RTL) text direction.

Supported Directions

LTR (Left-to-Right)

Default for most languages
English, Spanish, French, etc.

RTL (Right-to-Left)

Arabic, Hebrew, Persian, Urdu
Flips alignment and UI elements
Proper bidirectional text support

Changing Text Direction

Open Settings → Appearance
Under Typography, find Text Direction
Select LTR or RTL

The editor content, alignment, and cursor behavior all adjust automatically.

Changing text direction affects the entire editor. For mixed-language notes, use inline HTML or markdown with dir attributes.

Page Width

Control the maximum width of editor content for optimal reading.

Width Options

Width	Max Width	Use Case
Narrow	36rem (576px)	Poetry, short notes
Normal	48rem (768px)	General writing (default)
Wide	64rem (1024px)	Documentation, technical content
Full	100%	Tables, diagrams, wide content

Changing Page Width

Open Settings → Appearance
Under Typography, find Page Width
Select Narrow, Normal, Wide, or Full

Content immediately adjusts to the new width. Sidebar and margins respond accordingly.

Use Full width when working with wide tables or when you need maximum horizontal space.

Interface Zoom

Scale the entire interface independently of editor content.

Zoom Levels

Range: 70% - 150%
Default: 100%
Step: 5%

Quick Zoom:

Cmd+= or Ctrl+= - Zoom in
Cmd+- or Ctrl+- - Zoom out
Cmd+0 or Ctrl+0 - Reset to 100%

Settings Panel:

Open Settings → Appearance
Under Typography, find Interface Zoom
Use - and + buttons or enter a percentage

Interface zoom scales the UI chrome (sidebar, toolbar, settings) separately from editor content. Use base font size to adjust reading text.

Preview Panel

The Appearance settings include a live preview showing:

Current font family rendering
Heading hierarchy (H1-H2)
Body text with bold and italic
Lists (bulleted and numbered)
Code blocks
Inline code

Changes update the preview in real-time, so you can see exactly how your notes will look before committing.

Settings Storage

Customization settings are stored per-folder in:

{NOTES_FOLDER}/.scratch/settings.json

This means:

Each notes folder can have different settings
Settings travel with your notes folder
Switching folders switches settings
No global configuration to manage

Settings Structure

{
  "theme": {
    "mode": "dark"
  },
  "editorFont": {
    "baseFontFamily": "system-sans",
    "baseFontSize": 15,
    "boldWeight": 600,
    "lineHeight": 1.6
  },
  "textDirection": "ltr",
  "editorWidth": "normal",
  "interfaceZoom": 1.0
}

Manual Settings Editing

You can edit settings.json directly for advanced customization:

Open your notes folder
Navigate to .scratch/settings.json
Edit values in a text editor
Reload note in Scratch (Cmd+R or Ctrl+R)

Supported Values:

{
  "theme": {
    "mode": "light" | "dark" | "system"
  },
  "editorFont": {
    "baseFontFamily": "system-sans" | "serif" | "monospace",
    "baseFontSize": 12-24,
    "boldWeight": 500 | 600 | 700 | 800,
    "lineHeight": 1.0-2.5
  },
  "textDirection": "ltr" | "rtl",
  "editorWidth": "narrow" | "normal" | "wide" | "full",
  "interfaceZoom": 0.7-1.5
}

CSS Variables

Scratch uses CSS custom properties for theming. Advanced users can inspect and understand the theme system:

Editor Variables

--editor-font-family
--editor-base-font-size
--editor-bold-weight
--editor-line-height
--editor-h1-size
--editor-h2-size
--editor-h3-size
--editor-h4-size
--editor-h5-size
--editor-h6-size
--editor-paragraph-spacing
--editor-direction
--editor-max-width

These are set dynamically by the ThemeContext in src/context/ThemeContext.tsx.

Color Tokens

Scratch uses Tailwind CSS v4 with custom color tokens:

--color-bg - Main background
--color-bg-secondary - Secondary background
--color-bg-muted - Muted/subtle background
--color-text - Primary text
--color-text-muted - Secondary/muted text
--color-border - Border color
--color-primary - Accent color

CSS variables are for reference only. Direct modification is not officially supported and may break in future updates.

Resetting to Defaults

To restore all customization settings to defaults:

Open Settings → Appearance
Under Typography, click Reset to defaults
Confirm the reset

This resets:

Font family to Sans
Font size to 15px
Bold weight to Semibold (600)
Line height to 1.6
Text direction to LTR
Page width to Normal
Interface zoom to 100%

Theme mode is not reset (stays at current selection).

Best Practices

Match Your Workflow

Use Serif for long-form writing, Sans for general notes, and Mono for technical content.

Optimize for Comfort

Adjust font size and line height based on your screen size and viewing distance.

Respect Language Needs

Switch to RTL for Arabic, Hebrew, and other right-to-left languages.

Use Full Width Strategically

Enable Full width for tables and diagrams, but use Normal or Narrow for reading.

Accessibility

Customization improves accessibility:

Larger font sizes for vision impairment
Higher line height for dyslexia
Interface zoom for UI scaling
Theme choice for light sensitivity
Monospace for readability with certain conditions

All settings persist across sessions and sync with your notes folder.

Future Enhancements

Potential customization features being considered:

Custom color themes
Font upload support
Per-note overrides
Keyboard shortcut customization
Custom CSS injection
Export theme presets

Get Started

Core Features

Advanced

Guides

Theme

Theme Modes

Changing Theme

Typography

Font Family

Base Font Size

Bold Weight

Line Height

Changing Typography

Text Direction

Supported Directions

Changing Text Direction

Page Width

Width Options

Changing Page Width

Interface Zoom

Zoom Levels

Preview Panel

Settings Storage

Settings Structure

CSS Variables

Editor Variables

Color Tokens

Resetting to Defaults

Best Practices

Match Your Workflow

Optimize for Comfort

Respect Language Needs

Use Full Width Strategically

Accessibility

Future Enhancements

Build docs developers (and LLMs) love

Get Started

Core Features

Advanced

Guides

​Theme

​Theme Modes

​Changing Theme

​Typography

​Font Family

​Base Font Size

​Bold Weight

​Line Height

​Changing Typography

​Text Direction

​Supported Directions

​Changing Text Direction

​Page Width

​Width Options

​Changing Page Width

​Interface Zoom

​Zoom Levels

​Preview Panel

​Settings Storage

​Settings Structure

​CSS Variables

​Editor Variables

​Color Tokens

​Resetting to Defaults

​Best Practices

Match Your Workflow

Optimize for Comfort

Respect Language Needs

Use Full Width Strategically

​Accessibility

​Future Enhancements

Build docs developers (and LLMs) love

Theme

Theme Modes

Changing Theme

Typography

Font Family

Base Font Size

Bold Weight

Line Height

Changing Typography

Text Direction

Supported Directions

Changing Text Direction

Page Width

Width Options

Changing Page Width

Interface Zoom

Zoom Levels

Preview Panel

Settings Storage

Settings Structure

CSS Variables

Editor Variables

Color Tokens

Resetting to Defaults

Best Practices

Accessibility

Future Enhancements