Winner of Obsidian October 2021's Best Theme ✨
Primary is soft, chewy, comforting — like a chocolate chip cookie, or a warm brownie. Primary instantly puts you in a relaxed state that opens the door to creativity and exploration. Wonderfully executed down to the smallest details, Primary ran away with first place. — O_O 2021 Judges
📌 Primary Development Roadmap
Primary is currently on the works to bring its warm palette to other developer apps!
A combination of Bauhaus, Scandinavian and yellowing magazine pages as palette inspiration—Primary is a theme for people looking for a certain nostalgic warmness.
It is toppled with functional pop of red blue yellow colors. The perfect mix of loud and reserved.
Playful, reminiscing, productive.
Available in both Light and Dark modes, for both Mobile and Desktop!
- Help users give instant visual context of their notes through colors and scale that is both beautiful and productive.
- Create a playful, elegant, easy-going, complete and beautiful environment in Obsidian.
- Offer a balance of fun and serious work.
- Apply premium palettes by @ceciliamay (soon)
Primary was crafted with a "perfect fundamentals first, nail other features later" approach, so it should cover most standard Obsidian UI and markdown cues. But some plugins were given extra love.
- Calendar by Liam Cain
- Sliding Panes by death_au — recommended width of 36px
- Dataview by Michael Brenan
- Supercharged Links by mdelobelle
- Style Settings by mgmeyers — through this plugin, you can change fonts, colors, and get access to features! See Customizing Primary through Style Settings section below.
- Map View by esm
- Hover Editor by nothingislost
If you'd like to see what plugins I'm planning to support next, check out the roadmap linked above.
By downloading the Style Settings plugin, Primary offers you tons of customization and feature toggling options. This includes:
- 5 Preset fonts to choose from (guaranteed Primary-certified), as well as option to add your own
- Toggle to use Tabular Numbers (this option makes numbers evenly spaced out)
- Adjust Line Height
- Hide Obsidian Elements such as:
- Vault Titles
- Note Header Bar (Shows on Hover)
- Side Dock Ribbon
- You can also choose other styles such as Mini Floating Side Dock or Show on Hover Side Dock
- Status Bar
- You can also choose other styles such as Only Show Sync Icon
- Choose between Preset Header Styles or Customizable Headers
- 3 Preset Header Sizes to choose from or use your own sizes
- 4 Preset Header Colors to choose from including Rainbow
- Add Border Lines to your Headers, adjust the width, adjust the color
- Add Background Color to your Headers
- Add Border Curves to your Headers
- Toggle Active Line Highlighting on or off
- Make Markdown Formatting inconspicuous by graying them out
- Toggle Link Underline
- Customize Markdown Features including:
- Custom Bold color
- Custom Italics color
- Custom Bold and Italics color
- Custom Strikethrough color
- Custom "Hidden Comments"
%% text %%color - Custom Resolved and Unresolved Links color
- Custom Blockquotes color (change text color, syntax color, border color, background color)
- Custom Highlight colors
- 3 Markdown Embed Style options (Original, Minimal, or Clean)
- Customize Popover sizes
- Customize Graph View colors
- 3 Preset options for Scrollbar Style (Thin, Mac, Hidden)
and more...
Obsidian internally supports unchecked, and checked (x) syntax. Primary offers additional syntaxes!
| Syntax | Description |
|---|---|
- [ ] |
Unchecked |
- [x] |
Checked |
- [>] |
Rescheduled |
- [<] |
Scheduled |
- [!] |
Important |
- [-] |
Cancelled |
- [/] |
In Progress |
- [?] |
Question |
- [*] |
Star |
- [n] |
Note |
- [l] |
Location |
- [i] |
Information |
- [I] |
Idea |
- [S] |
Amount |
- [p] |
Pro |
- [c] |
Con |
- [b] |
Bookmark |
Primary styles Callouts, using already known visual cues in Primary. But Primary also offers additional support for some exclusively added Callouts.
> [!celebrate]
> Let's party!
> [!success]
> Let's party!
> [!pro]
> I think this is a good feature because...
> [!con]
> This is a bad feature becacuse...
> [!idea]
> I think it would be great to add...
> [!morning]
> “If you are irritated by every rub, how will your mirror be polished?” ― Rumi
Primary also supports HTML progress bars. Progress bars are mainly composed of the value="n" and max="100" parts. You can create them inside of your note by using this code:
| Percentage | HTML Code |
|---|---|
| 10% | <progress value="10" max="100"></progress> |
| 20% | <progress value="20" max="100"></progress> |
| 30% | <progress value="30" max="100"></progress> |
| 40% | <progress value="40" max="100"></progress> |
| 50% | <progress value="50" max="100"></progress> |
| 60% | <progress value="60" max="100"></progress> |
| 70% | <progress value="70" max="100"></progress> |
| 80% | <progress value="80" max="100"></progress> |
| 90% | <progress value="90" max="100"></progress> |
| 100% | <progress value="100" max="100"></progress> |
Note: Currently, Primary only supprots these specific values - but will be updated to properly visually support any value from 1-100 in the next update.
I had 3 problems I wanted to solve.
- I needed a theme that would give me instant visual context. Much like how Cybertron is, but less cyber-y.
- I needed a theme that would remind me that my PKM is fun and welcoming.
- I needed a theme that would remind me that my PKM is not perfect.
I decided to make a theme for my own use. (Coincidentally, I found out about Obsidian October at last minute. I literally didn't start until 10 days ago. HAHAHA. This event really pushed me to start making it!)
BUT, going back to the theme, I wanted to solve these three problems.
Coming from my experience in watercoloring back in high school (and expressing that color science nerd-side of mine), I figured I wanted to go back to the basics. I thought, why not primary colors? In paint mixing for most works, a defined set of "primary colors" (or a limited palette) are all you need! Each text emphasis would correspond to a primary color. To me, italics felt blue, bold felt red, and links felt yellow. And so Problem #1 was solved.
Now, what else has primary colors? Well, I remembered Bauhaus and Ikea. My favorite Ikea items were the wooden toys. They also came in primary colors. Despite the primary colors as a basis of the design, I still wanted it to be warm (as in, feeling cozy) and not so "in your face" or "poppy". While working on the theme, I stumbled upon one of my indie favorites, I'm Fine by Hazel English. The music video actually is just pages of retro magazines. What I noticed was how colorful but calming these pages were. I've gone through old magazines myself. The aspect I was most fascinated with was how the aging and yellowing affected the colors... The luxurious green was now minty. The blues were subdued. The reds were cozy. I decided to combine all of their visual language and concluded a summary explained in these following words: Warm. Wood is Warm. Primary Colors. Warm Primary Colors. Warm and Primary SCHOOLS. Primary is children? Children love to play. Children love games. Ikea wooden toys with primary colors that children love to play with? Anyway, Problem #2 is now solved.
All of these design choices and coincidences tied perfectly to this feeling of imperfectness. Like, a kid growing up. Karla—the ever so slightly weird looking font I've chosen for Primary—looks like a better version of your handwriting in 5th grade. The cherry on top was when I figured out how to create that specific button and box shadows style. It felt like the interface of a game I used to play!
Thus, 3 personal problems solved through this theme. I really enjoyed making this. I hope it'll give you joy too.
I'm planning to update it as best as I can and create more themes hopefully with a different design.
If you've read all the way down here, well, what the heck. Thank you for listening to my TED talk. Please go back to writing your notes or whatever was more important than my rambles. Hahaha!
I owe a lot to @jdanielmourao, @kepano and @chetachiezikeuzor! Their work inspired me design-wise and studying their theme helped me a lot in creating mine.
I also would like to thank the Obsidian Theme Community (hey #appearance-dev folks!) for continuously giving me inspiration.
Last but not the least, I would like to say that I am very blessed to have such active, loving, and supportive Primary users. You guys are the best!