Primary for Obsidian
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.
Obsidian October 2021 Judges
🧭 Navigation
- 🧭 Navigation
- 🖼️ Previews
- 🍭 Design Approach
- 📖 Installation
- 🧸 Features, Customization, and Plugins
- 🚧 Disclaimer
- 🌺 Contributing
- 🧠 Creating Primary
- 🩵 Credits
🖼️ Previews
Light Mode
Desktop
Tablet
Mobile
Dark Mode
Desktop
Tablet
Mobile
🍭 Design Approach
Primary is an opinionated Obsidian theme that merges play with work.
Fine-tuned to pixel and color perfection, Primary aims to take away the need to think about customization, so that you can focus on what matters – the concepts, that link, this great idea.
Despite being opinionated, it has plenty of options and ways to make it yours.
Stay tuned, because Primary will come in more flavors soon.
🌞 Principles
Opinionated but Open
From high-level concept down to pixel-level perfection, we bring not only a theme, but an artistic experience.
Work doesn’t have to be boring, so we’re bringing play through Primary by putting you in interesting color environments.
A beautiful palette is to each their own, but we’re dedicated to allowing you to taste different versions of what we think is beautiful.
We made Primary to allow you to easily customize things on your own through snippets. Most of the code isn't hard coded, and the whole palette will be accessible through Style Settings.
Functional Design
- Primary forces you to focus on the files/note panes by lifting it up visually through dimming the sidebars
- Lower contrast/chroma for not so important things, and higher contrast/chroma to bring a sense of urgency.
- Layers (through visual cues of shadows, blur, and color) help establish different levels of the space
- Borders can easily garner attention due to the space they take (size, shape and color wise), but we added them with purpose: to either separate or lift
Balance of Aesthetic and Optimization
Primary is dedicated to serve bigger vaults. By following a design structure, it allows us to keep Primary’s code lean, lessening potential performance overhead while keeping its visual language.
This means sacrificing preset customizability. Most Primary users seem to use it out of the box, so we're putting out options in Style Settings for most customization use cases or special cases only.
Instead of presets, we exposed the variables, so that you're free to edit them to your liking. The caveat is that you do have to have some CSS knowledge, but rest assured we're here to explain as much as we can.
You will also be able to import Presets or create snippets, all using the exposed variables!
Top quality. Know you're in good hands.
Primary was built with every component's state in mind. Quality is considering the little things, that one may not know matters, but affects the overall experience.
We're here to build slow and deliberate, considering every pixel, fine tuning down to the decimals. Questions like: how does this thickness make me feel? What do these mix of colors trigger within me? We review the theme again and again every second you're immersed in it.
By giving you the best quality, we offload the stress of having to tinker to make Obsidian better by offering you a beautiful piece of product that just works.
A Collection of Fashion Houses
Primary isn’t here to give every single UI possibility. We’re here to give you just the Primary experience, but allow you to experience different fashion houses.
Additional color palettes and theme presets options will be available for those who want Primary’s design principles to better suit their personality.
📖 Installation
Install Official Release
This option will give you access to public releases.
- Open up Obsidian and go to Settings.
- Inside Settings, head over to the Appearance tab.
- Under Themes, you should find a button called,
Manage. Click on it. This will open up the Community Themes page. - On the search bar, type
Primary, and click the one that says,By Cecilia May. It should open up the theme. - Click
Install and Useto install the theme! Enjoy.
Install Beta Version
This option is exclusive to monthly subscribers of Primary.
- Head on over to Primary's Ko-fi page.Under Buy a Coffee, choose Membership and subscribe to get access to member exclusive posts.
- After subscribing, head over to the
Poststab. This is under the header, just below my name and ko-fi link. - Once in the Posts tab, you should be able to find posts usually titled along the lines of
Primary x.x.x-beta (Monthly Subscriber Exclusive). Click on the latest post. - The post includes the full Release Notes so you're fully informed what new features or fixes you get for that release! To get the a copy of that beta, scroll down a bit until you find the
Click here to download the CSS file.link. This should take you to a GitHub gist page. - On the GitHub gist page at the top right side, click Download Zip. This will give you a
.zipfile with 1 file inside, theprimary-x.x.x-beta.cssfile (where x.x.x is the version number). - Unzip the file and copy the CSS file.
- Paste it under your vault's
.obsidian/themesfolder. You can open this folder through Obsidian. To do so, open up Settings, and go to the Appearance tab. UnderThemes, there's an icon beside the theme dropdown. Click it to open the themes folder. It should open up the folderVault Name/.obsidian/themes. Paste the CSS file there. - Go back to Obsidian and open up your Command Palette. Type
Reload app without savingand press enter so that your Obsidian gets reloaded and ensures it identifies the CSS file. - Once your Obsidian has reloaded, open up Settings -> Appearance tab. Under the
Themesdropdown, select theprimary-x.x.x-betayou downloaded. This should load the theme. - Reload the app again for best results.
🧸 Features, Customization, and Plugins
For a complete and up to date list of features, customization options, customization guide, and supported plugins, head on over to Primary for Obsidian Full Guide.
🚧 Disclaimer
The theme, as stated in the license, is provided as is. The theme is originally designed to be of personal use with macOS, Windows, and mobile. It isn't thoroughly tested in all operating systems, or in all use cases (considering Obsidian's flexibility).
The theme is a heavily modified version of Obsidian so it may break with future updates. It may also clash with other CSS snippets you have (or plugins' CSS styling).
Consider contributing to this open project if you'd like to support a necessary feature or plugin, or share your CSS snippets in the discussion page!
🌺 Contributing
Non-developers
If you are not a developer, a great way to contribute to the theme is by reporting issues and feature requests! You can do so through the Issues Page.
Don't have a GitHub account? Consider sending a message through Twitter or send me a report directly via Email.
Another great way to contribute is by sharing screenshots of how you use Primary! You can share them on Twitter and tagging @primarytheme or me @ceciliamay_ . You can also send them through the Discussions Page.
Developers
Build Instructions
Let's start by installing the essentials.
Primary is written with a mix of CSS and Sass. If you haven't, do install Sass.
sudo gem install sassAfter that, we need to install GruntJS. Grunt allows developers to run various tasks that would otherwise be tedious. In our case, we want our repo to follow Obisidan's repository guidelines while making it easy for us to debug.
Prerequisites would be installing any NodeJS version.
npm install -g grunt-cliSetting up your Theme Dev Environment
Within the repo's path, run npm install to build all the necessary modules.
Then, go to the .env.example and define your local Obsidian vault path.
Update the OBSIDIAN_PATH to the local path of your Obsidian theme folder.
Once done, rename the file from .env.example to .env.
Code, Build and Test
Run the command below when you start writing code and testing.
npx grunt[!NOTE] What does the command do? The command activates the grunt file so that when you save a file in the repo, the Grunt file watches for your save, compiles the CSS and Sass files, minifies it, and copies it in to two locations — one into this repository, and one into the defined path in the
.envfile. This ensures we have an identical copy for testing live within your vault, and one ready for publishing!
License
// TODO: Write Licensing terms.
🧠 Creating Primary
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!
written 2021-11-01
🩵 Credits
I owe a lot to jdanielmourao (Sanctum), kepano (Minimal), chetachiezikeuzor (Yin and Yang), and sainhe (Gruvbox Material and Everforest)! Their work inspired me design-wise and their themes helped me a lot in creating mine.
I would also like to thank the Community for continuously giving me inspiration! It's been that way since I joined the Obsidian Discord. I would never forget the welcoming and incredible response I received when I first posted Primary to the group. I'm forever grateful.
Lastly, I would like to say that I am very blessed to have such active, loving, and supportive users. Despite being inactive for a couple of years, many have stood by the theme, continued to support and encourage me. I cannot fathom this support, but I deeply appreciate it.
Thank you guys for everything.