SkillAgentSearch skills...

Retroma

Retroma is an Obsidian theme that blends nostalgic, classic design with an intelligent color scheme algorithm.

Install / Use

/learn @emarpiee/Retroma
About this skill

Quality Score

0/100

Category

Design

Supported Platforms

Universal

README

Retroma Theme

retroma-banner-high.png

Your notes? Chaos. Your vault? A digital junkyard. But fear not, Retroma is here to trick everyone (including you) into thinking your workspace has its life together.

🌟 Key Features

Retroma gives you the best of both worlds, taking inspiration from classic and nostalgic designs of software and websites to create a theme that still feels professional and refined. It's a tribute to the past, reminding us of a time when buttons looked like you could actually press them and when UI actually had personality, Retroma brings that back without sacrificing usability or making your screen look like a MySpace profile circa 2006....unless you’re really determined to make it ugly.

🎨 Intelligent Color Scheme Algorithm

The magic starts with Retroma's advanced color algorithm so advanced, it probably has a Ph.D. in aesthetics. You pick one accent color, and Retroma's algorithm does the rest, creating a complete and harmonious palette. It’s like hiring a personal color consultant who works for free, doesn’t sleep, and never judges your questionable font choices.

🎭️ Theme Variations

retroma-theme-variant.gif

I've also included three distinct variants to match your vibe:

  • Groovy: A retro-inspired design with a focus on depth and distinct borders, ideal for those who appreciate classic aesthetics.
  • Simple: A balanced variant that offers a clean, modern look while retaining the theme's core retro elements.
  • Minimalist: A stripped-down version that emphasizes simplicity and clarity, focusing on essential design elements.

🎨 Color Scheme Selection

Take control of your Obsidian aesthetic with Retroma's brand new Color Scheme Selection feature, powered by the Style Settings plugin!

retroma-color-scheme

🎨 Color Harmony Options

Now you can easily generate a complete theme color palette based on a single Base Accent Color. Simply choose one color, and the theme will apply one of four classic color harmony rules to create a beautiful, cohesive look across your entire Obsidian workspace.

| COLOR SCHEME | PRINCIPLE | VISUAL RESULT | | :--- | :--- | :--- | | Analogous | Colors adjacent to the base accent color. | Harmonious and calm. Delivers a cohesive, low-contrast visual field. | | Split Complementary | Base accent color, plus the two colors next to its opposite. | Balanced contrast. Achieves vibrancy without visual conflict. | | Monochromatic | Variations (shades/tints) of the single base accent color. | Clean and unified. Ensures maximum consistency and visual elegance. | | Triadic | Three colors equally spaced on the color wheel. | Vibrant and dynamic. Produces high contrast for an energetic interface. |

Choose the harmony that fits your style and let one color rule your theme!

🤹 Color Scheme Tuner (advance)

Bored with classic color schemes? The advanced Color Scheme Tuner offers full customization, simply adjust the theme's main and minor accent values to create your own unique scheme.

retroma-color-scheme-tuner

Requries Style Settings plugin

⚙️ Extensive Customization

Think you’ve got an eye for design? Prove it. Thanks to full integration with the Style Settings plugin, Retroma gives you near-total control. Rotate your color scheme, fine-tune folder saturation to match your mood, or adjust typography until it feels “just right.” No judgment here, this is your chance to show the world your inner perfectionist.

retroma-style-settings.webp

Install the Style Settings plugin from the community plugins to access all of Retroma's extensive customization, theme variations, and extra features.

🗃️ Resources

Fonts used in the theme:


⬇️ 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, open a new issue and describe the feature you'd like to see.

📍 Note from the Developer

Retroma is still a work in progress, a passion project born from my love of retro design and my hatred of endless customization menus. Big thanks to @codeisconfusing for the inspiration (and button code) from their Retro Windows Obsidian Theme.

☕️ Buy Me A Coffee

Donations are greatly appreciated and will be used to fund my sanity, and my cats' 😼 expensive tastes."

<a href='https://ko-fi.com/emarpiee' target='_blank'><img height='50' width='150' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi6.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>

<a href="https://buymeacoffee.com/emarpiee" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-red.png" alt="Buy Me A Coffee" height="40" width="150"></a>

View on GitHub
GitHub Stars258
CategoryDesign
Updated2d ago
Forks1

Languages

CSS

Security Score

95/100

Audited on Mar 27, 2026

No findings