Retroma

Retroma Theme

Your notes are chaotic, your vault is a mess, and every modern theme looks the same. Retroma fixes that. It draws inspiration from retro arcade machines, vintage software, and the early web, bringing back actual tactile designs and personality. You don't need design skills to make it look good, either. Simply pick a single accent color and Retroma handles the rest of the palette automatically, protecting you from your own worst styling instincts.

🖌️ Style Manager

From simple visual tweaks to absolute control over every pixel, the Style Manager plugin acts as your bridge between casual styling and hardcore customization. Swap color schemes, choose from a selection of built-in retro fonts to apply globally or to specific parts like your markdown editor and canvas, push heading colors from muted to neon, fine-tune the corner roundness of your code blocks, or style your buttons to range from classic skeuomorphism to bold neubrutalism. You can even apply a vintage CRT scanline filter, go completely monochrome with a grayscale toggle, or strip away the clutter with Zen Mode to focus entirely on your writing. No judgment here, this is your chance to show off your inner perfectionist.

🎨 Presets

If you’d rather skip the manual configurations, you can use and experiment with the sample presets below. Just download the bundle, import it into the Style Manager plugin, and apply your favorite style. You can even set schedules to switch styles automatically throughout the day, light and crisp by day, dark retro arcade by night.

A. How to Import the Presets

1. Download the retroma-presets.json file.
2. Open Style Manager in Obsidian.
3. Click the More Actions menu (⋮ three vertical dots) in the top toolbar.
4. Select Import preset…
5. Either click Choose files under "Import from files" to select the downloaded .json file, or paste the raw JSON text directly into the text box.
6. Hit Import. The presets will now appear under your Presets tab.

B. How to Apply a Preset

1. Go to the Presets tab in Style Manager.
2. Click on the preset you want to use (like Retroma: Newspaper or Retroma: Sweet Strawberry).
3. Select Apply > Apply to shared locker > Overwrite to load the style onto your workspace.

C. How to Save Your Own Preset

1. After customizing your settings in Style Manager, go to the Presets tab.
2. Click Create preset.
3. Select which styles to include in your snapshot (like Active theme, Appearance, Accent color, or Retroma theme styles). You can also click Select modified to automatically check only your changes.
4. Click Save preset to store your custom setup for quick access later.

---

Better Canvas

The floating UI elements in Canvas now automatically hides when panning or actively editing card content.

---

Alternative Checkboxes

Requires Style Manager plugin.

Retroma includes built-in styling for 23 alternative checkbox types. To use them, write standard markdown checkboxes containing any of the supported keys inside:

---

Per-Note Font

You can override the font on a per-note basis using Obsidian's built-in cssclasses property combined with any of Retroma's rtm-font-* classes. This lets individual notes use a different typeface without touching your global Style Manager settings.

How to Use

Add a cssclasses property to the note's frontmatter with one of the class names from the table below:

---
cssclasses:
  - rtm-font-special-elite
---

Available Font Classes

Only one rtm-font-* class should be applied per note. Using multiple font classes at the same time produces unpredictable results.

---

Per-Note Accent Color & Color Scheme

You can override the accent color and color scheme on a per-note basis using Obsidian's cssclasses property. The override is scoped to the active leaf, so only the note you are currently viewing changes — your global Style Manager accent stays untouched.

How to Use

Add one or both of the following class types to the note's frontmatter:

---
cssclasses:
  - rtm-accent-teal
  - rtm-triadic
---

Available Accent Color Classes

Available Color Scheme Classes

Accent color and color scheme classes can be combined freely. Only one class from each group should be used per note.

---

Retroma Callouts

Requires Style Manager plugin.

A collection of 79 styled callouts for Obsidian, themed around vintage stationery, retro media hardware, photography, and academic materials.

Basic Usage

Use the standard Obsidian callout syntax with any callout name from the table below:

> [!callout-name] Optional Title
> Your content goes here.

Example:

> [!polaroid-1] ROAD TRIP — OCT 1991
> Stopped at the diner near Route 66.

Size Variants

Every callout supports three width sizes. Append -s, -m, or -l to the callout name:

> [!notepad-s] Small
> Compact, centered.

> [!notepad-m] Medium
> Half-width, centered.

> [!notepad-l] Large
> Full width.

Using a callout without a size suffix renders it at its own default width as defined in the CSS.

Stickynote Colors

The stickynote callout comes in all seven rainbow colors. Combine the color name with an optional size suffix:

> [!stickynote-yellow] REMINDER
> Don't forget the milk.

> [!stickynote-red-s] URGENT
> Call back before noon.

> [!stickynote-blue-m] NOTE
> Mid-width blue sticky.

Available colors: red · orange · yellow · green · blue · indigo · violet

Foldable Callouts

Add + (open by default) or - (closed by default) after the name:

> [!indexcard-m]+ Expandable
> Content is visible by default, click to collapse.

> [!flashcard]- Hidden answer
> Revealed only on click.

Full Callout Reference

📷 Photo-Film

📼 Media-Hardware

📝 Office-Stationery

🎓 Academics-Journaling

🔖 Vintage-Stationery & Tactile Paper

Quick Reference Cheat Sheet

A ready-to-use file with one complete, copy-pasteable example of every callout is here.

---

⬇️ Retroma Installations

Obsidian Community Theme

1. Open Settings: In Obsidian, click the gear icon in the bottom-left corner to open your settings.
2. Go to Appearance: From the left-hand sidebar, click on "Appearance."
3. Manage Community Themes: Look for the "Themes" section and click the "Manage" button. This will open up the community themes browser.
4. Find Retroma: In the search bar at the top, type "Retroma." The theme should appear in the list below.
5. Install and Use: Click on "Retroma" and then click the "Install and use" button. Obsidian will automatically download the theme and apply it to your vault.

Manual

1. Download the Theme: First, download the source code for the theme.
2. Extract the Files: Unzip the downloaded folder to access its contents.
3. Find Your Themes Folder: Navigate to your Obsidian vault. Inside, look for the .obsidian/themes/ directory.
4. Create a New Theme Folder: Inside the themes directory, create a new folder and name it Retroma.
5. Move the Theme Files: Copy the theme.css and manifest.json files from the unzipped download and place them into the new Retroma folder you just created.
6. Restart and Apply: Close and reopen Obsidian. Go to Settings > Appearance and select Retroma from the theme list to activate it.

---

🌱 Contribute to the Project

I welcome contributions of all kinds! If you're interested in helping out, please follow these guidelines.

🐞 Found a Bug?

1. Check the issues to see if the bug has already been reported.
2. If not, open a new issue. Please provide a clear title and a detailed description, including steps to reproduce the bug.

🔖 Want a New Feature?

1. Check the issues to see if the feature has already been requested.
2. If not, create a pull request or open a new issue and describe the feature you'd like to see.

🗃️ Resources

Fonts used in the theme:

• Atkinson Hyperlegible
• Cascadia Code
• Caveat
• Courier Prime
• Excalifont
• Fraunces
• iA Writer Mono
• Space Grotesk
• Special Elite
• VT323
• W95font

---

📍 Note from the Developer

Retroma uses an algorithmic color system powered natively by CSS oklch(). Instead of relying on static hex codes, the theme dynamically calculates your entire palette, including background colors, foreground elements, and UI depth across dark and light modes directly from your chosen accent color.

🦚 Why Use OKLCH over HSL or RGB?

OKLCH is a modern CSS color space designed around how human eyes actually perceive color, rather than how computer screens generate it. Legacy formats like hsl() treat colors purely mathematically, meaning a 50% lightness yellow looks blindingly bright while a 50% lightness blue looks very dark.

OKLCH fixes these limitations through perceptual lightness: a lightness value of 60% appears equally bright to the human eye regardless of the hue. Because lightness remains uniform across all colors, creating accessible high-contrast UI design tokens, manipulating palettes, and building light/dark themes becomes purely mathematical, completely predictable, and dramatically easier.

For technical details, check out the official W3C CSS Color Module Level 4 Specification or the MDN Web Docs for oklch()

☕️ Buy Me A Coffee

Donations help me pay the bills, stay sane, and spoil my cat 🐱 Thanks for the support!

• Ko-Fi Support
• PayPal Support

---

Retroma – Written with 💜, with passion, and with cats by my side.