origami is a playful yet functional theme for obsidian, a note-taking application. origami started as my first intro to theming in october of 2022. i challenged myself to learn how to make a theme in a month, with minimal css knowledge, and ended up winning obsidian october that year ＞﹏＜
i knew i wanted something subtle, something that didnt deviate too far from vanilla obsidian, and simply polished what was already there. origami is a lightweight theme (though not without features) stripping away distractions and putting your notes first .𖥔 ݁ ˖๋ ࣭ ⭑
inspiration was taken from printed works and the creases of folded paper, mimicked using dashed borders. i spent hours (hundreds at this point) prototyping fonts and color schemes to figure out what worked aesthetically. the end result is that origami is _writing refined_a faithful attempt to bring the tactility of real physical media to a modern electronic writing app ⸜(｡˃ ᵕ ˂ )⸝♡
if you like what im doing and wanna help out, check out my kofi!
- 🤔 what is origami?
- 📝 typography
- title fonts
- body fonts
- 🎨 color schemes
- 📝 typography
- ⚙️ nifty things
- 🖤 credits
- 👋 it’s been a while
- 📕 other; about
the default title font is fraunces, while the default body and ui font is iawriter, but you can choose from a number of additional fonts on a per-note basis. just add a cssclasses property to your note, then add one (or two) of the following classes to customize the fonts within
all of these are unique fonts with a rich history or a rigorous design. fonts have been handpicked for their legibility, their history, and their design. variable typefaces are used wherever possible to reduce filesize and increase utility. this allows different fonts to use special features, such as ligatures, special characters, or kerning tweaks (like texture healing for monaspace).
missing your favorite typeface? either submit an issue, or just load it yourself –origami doesnt override fonts set in obsidian appearance settings Ꮺ ָ࣪ ۰ ͙⊹
a variety of color schemes can be selected via the style settings plugin. these extra palettes have been carefully tuned for clarity, contrast, and readability. careful time was spent adapting classic themes like gruvbox and solarized, along with some original palettes created just for origami:
origami comes with several pre-defined color schemes, as well as the ability to create a custom color scheme. These are the available options:
- default fine-tuned: a finely tuned color scheme that offers a balanced blend of colors for a pleasant and comfortable reading experience.
- sorcery: a red theme.
- eidolon: a green theme.
- umbra: a purple theme.
- shadow: a blue theme.
- minimum: a stripped down minimal theme with fewer backgrounds and borders.
- soft: a light and soft color scheme that uses pastel colors for a calming and inviting feel mimicking paper.
- shark time: a trans coded color theme inspired by the blahaj sharks.
- gruvbox: the classic gruv theme, adapted to origami.
- solarized: another classic, carefully adapted to the origami color system.
- hack: an amoled brutalist white theme inspired by nano and tmux.
- dracula: the classic vampire, brought to obsidian.
- linking your thinking: a wonderful theme made with and for nick milo.
- abaddon: a dark yet warm theme inspired by the ancient shadow worlds of my stories.
- custom minimal file explorer with icon compatibility
- font ligatures and tweaks for clarity
- animations, lots of animations
- lightweight/optimized code
- custom callouts
- custom blockqoutes
- custom canvas cards
- style settings support and styling
- header bars
- rainbow headers
- header sizes
- rainbow headers
- header underlines
- justify text
- accent colored bold & italic
- plugin support
- kanban: notion styling & vertical wrapping
- tag wrangler
- loomsidian
- iconic
- style settings
i couldnt have made the theme without the following people:
- 🏗️ kapirklaa & angler fish for help with css
- 🟥 akifyss for their menu icons from the border theme
- 🖲️ fab for testing
- 🥰 holo for testing and brainstorming
- ✨ Carboxyl & Pseudometa, for the lovely name 💖
- 💎 Obsidian, for the amazing program to theme
- ⌨️ The amazing plugin developers, for their time
- 🎨 The gifted theme community, for their inspiration
- 👯 Countless members of the community, for helping me test things
- 😈 Myself, for writing all of this
- 🎡 John Wheeler, for having a really cool name
- 💖 You, for reading this & trying my theme
you might be wondering, what is this? it's a bit different than the old origami. its lighter, sure. i wanted something i could actually support with the time and mental energy i have at the moment.
like i said, there are fair fewer options than the old origami. i removed them for a few reasons. style settings is really hard for me to maintain, it just is a pain. so i am forgoing it where i can with cssclasses. but more on those later.
if there was something you really liked in the original origami, feel free to open an issue or create a pull request :)
finally, i'm sorry it's not a 1:1 update, but its the best i can do, and leans on much better code and understanding of design. im also medicated now, lol ૮ ˶ᵔ ᵕ ᵔ˶ ა
origami was made during a difficult period of my life. i was struggling with depression, and had been for many years. i was also in a bad relationship, and had lost interest in many of my hobbies. i joined the obsidian group around that time, and quickly found code as an escape from my life. i shared a few items, chatted with a few people, and tinkered on some snippets and code for my own use; but didn’t take it seriously until obsidian october (o_o) of 2022.
i saw o_o as an excuse to get back into coding. i had written stuff before, mostly in lua and js, but had never really delved into front-end languages like css. but obsidian gave me a project to work on that had direct, visual impact on my workflow. css was a way to tailor the application to my own needs and wants. it was tangible.
but i only had a month to get good enough at css to enter into the competition, less than a month actually by the time i really decided to try and compete.
so i spent hours, sleepless days, pouring over design. i wanted something functional, something playful, especially something accessible; but more than anything, i wanted something i would use even if i missed the deadline to enter. i poured over different resources on typefaces, colors, accessibility, and ui/ux design. i spent hours going over information, and many more hours going over my code. by the time i was done, i had learned a lot.
and you know what?
it was fun. it was the most fun i had in years, and even after i submitted my entry (on the day submissions closed), i found i wanted to keep working on css.
an interest had turned into an obsession. and i loved it.
i never expected to win best new theme, i didnt even expect any recognition at all. so when i won, i couldn’t believe it. because to me, winning was more than just a trophy i could put on my desk; it was proof that i could still do things, and that they could be good. it was a boost to my self-confidence that i needed at the time, and to this day i am thankful that i tried.
so origami is a few things. its accessible, its fun, its a reminder of what i can do even when things are dark, and most importantly: its a theme i can be proud of.
- Contrast Standard Resources
- Are humans more adapted to "light mode" or "dark mode"?
- Applying Color Theory to Digital Displays
- Contrast Sensitivity
- Dark Mode vs. Light Mode: Which Is Better?
- Typeface features and legibility research
- Font size guidelines for responsive websites
- The ideal line length & line height in web design
- Is there an optimal font size / line height ratio?
- The good line-height
- Guide to Only the Best Open-Source Typefaces
- What’s the right font size in web design?
- Type Scale Calculator
- The Typographic Scale