# The Reading Experience
*Customizing your study environment*
---
Customize your reading environment with color themes, fonts, and section toggles.
> **In this article:** Color themes · Font choices · Text sizes · Section toggles for focused reading
### Choosing Your Colors
Not everyone reads the same way. Some prefer dark backgrounds for late-night study. Others find light backgrounds easier during the day. We've included ten color themes:
```
+--------------------------------------------------+
| COLOR SCHEMES |
+--------------------------------------------------+
| Rosé Pine .......... Warm and gentle (default) |
| Catppuccin ......... Soft pastels |
| Nord ............... Cool arctic blues |
| Nightshade ......... Dark purple accent |
| Gruvbox ............ Retro warmth |
| Solarized .......... Scientific precision |
| Everforest ......... Forest green tones |
| High Contrast ...... Maximum readability |
| E-Ink .............. Grayscale for e-readers |
| Sepia .............. Warm paper tones |
+--------------------------------------------------+
```
To change themes, click the **gear icon** (⚙) in the toolbar. Your choice is saved automatically.
### Choosing Your Font
Typography matters. The words of the spiritual master should be presented clearly and beautifully. We offer six fonts:
| Font | Style | Best For |
|------|-------|----------|
| **Noto Sans** | Clean, modern | General reading (default) |
| **Noto Serif** | Traditional | Book-like experience |
| **Noto Mono** | Monospaced | Technical readers |
| **Lexend** | Optimized | Reading ease, dyslexia |
| **Andika** | Clear letters | Accessibility |
| **EB Garamond** | Elegant | Classical feel |
All fonts include proper support for Sanskrit diacritics (ā, ī, ū, ṛ, ṣ, etc.), so transliterations display correctly.
### Text Size
Five sizes are available, from XS to XL. Click the size buttons in the settings menu to find what's comfortable for you.
### Focusing on What Matters
Scripture pages have several sections. Sometimes you may want to focus only on certain parts.
```
+-------------------------------------+
| SCRIPTURE PAGE STRUCTURE |
+-------------------------------------+
| |
| [ ] Devanagari/Bengali | <-- Toggle ON/OFF
| (Original script) |
| |
| [ ] Transliteration | <-- Toggle ON/OFF
| (Romanized Sanskrit) |
| |
| [ ] Synonyms | <-- Toggle ON/OFF
| (Word-by-word meanings) |
| |
| [*] Translation |
| (Always visible) |
| |
| [*] Purport |
| (Always visible) |
| |
+-------------------------------------+
```
In the settings menu, toggle checkboxes for:
- **Devanagari/Bengali** — The original script
- **Transliteration** — The romanized version
- **Word-for-word** — Synonyms section
Your preferences are saved. Hidden sections stay hidden until you show them again.
> **Quick Tip:** For fast reading, hide Devanagari and Synonyms. For deep study, show everything.
---
> [!question] Frequently Asked Questions
>
> **Q: How do I open settings?**
> Click the gear icon (⚙) in the top toolbar.
>
> **Q: Will my settings be saved?**
> Yes. Settings are saved in your browser and apply automatically on every visit.
>
> **Q: Do settings work on mobile?**
> Yes. The same settings work on phones and tablets.
>
> **Q: Can I use different settings on different devices?**
> Settings are saved per-device. Your phone and computer can have different preferences.
>
> **Q: What if a font doesn't load?**
> If a custom font fails to load, the browser uses a fallback font. Text remains readable.
---
> [!abstract]- Technical Implementation Details
>
> Building a reading interface for sacred texts presents interesting challenges. The content spans multiple scripts, requires careful typography, and needs to work across devices.
>
> **Settings Storage**
>
> All settings persist to `localStorage` under the key `scripture-display-settings`:
>
> ```javascript
> const defaultSettings = {
> devanagari: true, // Show Devanagari section
> transliteration: true, // Show transliteration section
> synonyms: true, // Show synonyms section
> colorScheme: 'default', // Theme ID
> bodyFont: 'noto-sans', // Font ID
> fontSize: 'normal' // Size ID
> };
> ```
>
> **Theme Implementation**
>
> Themes are applied via a `data-color-scheme` attribute on `<body>`. CSS uses attribute selectors to apply the color variables for each theme.
>
> **Font Loading**
>
> Google Fonts are loaded with extended character sets including Bengali and Devanagari subsets. Font application uses CSS custom properties (`--font-text-override`).
>
> **Section Toggle System**
>
> Sections are hidden using CSS classes on `<html>`:
> ```javascript
> html.classList.toggle('hide-devanagari', !settings.devanagari);
> html.classList.toggle('hide-transliteration', !settings.transliteration);
> html.classList.toggle('hide-synonyms', !settings.synonyms);
> ```
>
> **Flash Prevention**
>
> Settings apply before the page paints using early CSS injection. A `MutationObserver` watches for body class changes and restores settings if Obsidian Publish clears them during navigation.