├── LICENSE ├── README.md ├── manifest.json ├── preview_thumb.png ├── screen.png └── theme.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 kneecaps 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 📄 origami 2 | 3 | ![origami](https://github.com/user-attachments/assets/475f9983-4718-4977-8614-c837806a98f3) 4 | 5 | ## 🤔 what is origami? 6 | origami is a playful yet functional theme for [obsidian](obsidian.com), 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 ＞﹏＜ 7 | 8 | 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 .𖥔 ݁ ˖๋ ࣭ ⭑ 9 | 10 | 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 ⸜(｡˃ ᵕ ˂ )⸝♡ 11 | 12 | if you like what im doing and wanna help out, check out my kofi! [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/N4N71EEJAC) 13 | 14 | ### table of contents 15 | 1. 🤔 what is origami? 16 | 1. 📝 typography 17 | 1. title fonts 18 | 2. body fonts 19 | 2. 🎨 color schemes 20 | 2. ⚙️ nifty things 21 | 1. 🖤 credits 22 | 3. 👋 it’s been a while 23 | 4. 📕 **other; about** 24 | 25 | ### 📝 typography 26 | the default title font is [fraunces](https://github.com/undercasetype/fraunces), while the default body and ui font is [iawriter](https://github.com/iaolo/iA-Fonts), but you can choose from a number of additional fonts on a per-note basis. just add a [`cssclasses`](https://help.obsidian.md/snippets#Writing+CSS+for+Obsidian) property to your note, then add one (or two) of the following classes to customize the fonts within 27 | 28 | #### title fonts 29 | ![Pasted image 20250313172752](https://github.com/user-attachments/assets/d1690d15-dba5-4f8a-9a89-fecd06a18946) 30 | - [`fraunces`](https://github.com/undercasetype/fraunces) ← default. 31 | - [`aspekta-title`](https://github.com/ivodolenc/aspekta) 32 | - [`chillax-title`](https://www.fontshare.com/fonts/chillax) 33 | - [`lexend-title`](https://www.lexend.com/) 34 | - [`instrument-title`](https://github.com/Instrument/instrument-sans) 35 | - [`iawriter`](https://github.com/iaolo/iA-Fonts) 36 | 37 | #### body fonts 38 | ![{EAC30AF6-2AC6-48EF-8C19-E21D7C03001F}](https://github.com/user-attachments/assets/7c186e54-a219-48ea-af7b-f8378bf4f554) 39 | - [`aspekta`](https://github.com/ivodolenc/aspekta) 40 | - [`chillax`](https://www.fontshare.com/fonts/chillax) 41 | - [`fraunces`](https://github.com/undercasetype/Fraunces) 42 | - [`lexend`](https://www.lexend.com/) 43 | - [`iawriter`](https://github.com/iaolo/iA-Fonts) ← default. 44 | - [`satoshi`](https://www.fontshare.com/?q=Satoshi) 45 | - [`monaspace`](https://monaspace.githubnext.com/) 46 | 47 | 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](https://monaspace.githubnext.com/#learn-more) for monaspace). 48 | 49 | missing your favorite typeface? either [submit an issue](https://github.com/7368697661/Origami/issues), or just load it yourself –origami doesnt override fonts set in obsidian appearance settings Ꮺ ָ࣪ ۰ ͙⊹ 50 | 51 | ### 🎨 color schemes 52 | ![lm](https://github.com/user-attachments/assets/ea52a536-3db3-4856-9738-9b62f2bd4856) 53 | ![dm](https://github.com/user-attachments/assets/430d3d97-57d8-4f6e-b8fa-d66fda778f0b) 54 | 55 | a variety of color schemes can be selected via the [style settings plugin](https://github.com/mgmeyers/obsidian-style-settings). 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: 56 | 57 | origami comes with several pre-defined color schemes, as well as the ability to create a custom color scheme. These are the available options: 58 | - **default fine-tuned**: a finely tuned color scheme that offers a balanced blend of colors for a pleasant and comfortable reading experience. 59 | - **sorcery**: a red theme. 60 | - **eidolon**: a green theme. 61 | - **umbra**: a purple theme. 62 | - **shadow**: a blue theme. 63 | - **minimum**: a stripped down minimal theme with fewer backgrounds and borders. 64 | - **soft**: a light and soft color scheme that uses pastel colors for a calming and inviting feel mimicking paper. 65 | - **shark time**: a trans coded color theme inspired by the blahaj sharks. 66 | - **gruvbox**: the classic gruv theme, adapted to origami. 67 | - **solarized**: another classic, carefully adapted to the origami color system. 68 | - **hack**: an amoled brutalist white theme inspired by nano and tmux. 69 | - **dracula**: the classic vampire, brought to obsidian. 70 | - [__linking your thinking__](https://www.linkingyourthinking.com/): a wonderful theme made with and for nick milo. 71 | - **abaddon**: a dark yet warm theme inspired by the ancient shadow worlds of my stories. 72 | 73 | ## ⚙️ nifty things 74 | - custom minimal file explorer with icon compatibility 75 | - font ligatures and tweaks for clarity 76 | - animations, lots of animations 77 | - lightweight/optimized code 78 | - custom callouts 79 | 80 | ![{3AE0F371-40F8-40AF-BD12-F8CC4B4CFDD4}](https://github.com/user-attachments/assets/3f11595e-13e9-4898-a6e7-d6408095f4c9) 81 | 82 | - custom blockqoutes 83 | 84 | ![{988DD445-8ED0-4FD1-B64B-72D61BD95A26}](https://github.com/user-attachments/assets/e1bf3c2c-c220-49a9-b6d3-b3ef7d891293) 85 | 86 | - custom canvas cards 87 | 88 | ![Pasted image 20250318173321](https://github.com/user-attachments/assets/67842810-39b2-45d0-990f-21d40b331549) 89 | 90 | - style settings support and styling 91 | - header bars 92 | - rainbow headers 93 | - header sizes 94 | - rainbow headers 95 | - header underlines 96 | - justify text 97 | - accent colored bold & italic 98 | - plugin support 99 | - kanban: notion styling & vertical wrapping 100 | - tag wrangler 101 | - loomsidian 102 | - iconic 103 | - style settings 104 | 105 | ### 🖤 credits 106 | i couldnt have made the theme without the following people: 107 | 108 | - 🏗️ __kapirklaa__ & __angler fish__ for help with css 109 | - 🟥 __akifyss__ for their menu icons from the border theme 110 | - 🖲️ __fab__ for testing 111 | - 🥰 __holo__ for testing and brainstorming 112 | - ✨ __Carboxyl & Pseudometa__, for the lovely name 💖 113 | - 💎 Obsidian, for the amazing program to theme 114 | - ⌨️ The amazing __plugin__ developers, for their time 115 | - 🎨 The gifted __theme__ community, for their inspiration 116 | - 👯 Countless members of the community, for helping me test things 117 | - 😈 Myself, for writing all of this 118 | - 🎡 John Wheeler, for having a really cool name 119 | - 💖 You, for reading this & trying my theme 120 | 121 | ## 👋 it’s been a while 122 | 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. 123 | 124 | 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. 125 | 126 | if there was something you really liked in the original origami, feel free to open an issue or create a pull request :) 127 | 128 | 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 ૮ ˶ᵔ ᵕ ᵔ˶ ა 129 | 130 | ## 📕 other; about 131 | 132 | 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. 133 | 134 | 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. 135 | 136 | 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. 137 | 138 | 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. 139 | 140 | and you know what? 141 | 142 | 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. 143 | 144 | an interest had turned into an obsession. and i loved it. 145 | 146 | 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*. 147 | 148 | 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*. 149 | 150 | #### some resources: 151 | - [Contrast Standard Resources](https://webaim.org/resources/contrastchecker/) 152 | - [Are humans more adapted to "light mode" or "dark mode"?](https://biology.stackexchange.com/questions/97635/are-humans-more-adapted-to-light-mode-or-dark-mode) 153 | - [Applying Color Theory to Digital Displays](https://www.uxmatters.com/mt/archives/2007/01/applying-color-theory-to-digital-displays.php#:~:text=Black%20text%20on%20a%20white,optimal%20readability%20for%20body%20text.) 154 | - [Contrast Sensitivity](https://www.sciencedirect.com/science/article/pii/B9780123742032002359) 155 | - [Dark Mode vs. Light Mode: Which Is Better?](https://www.nngroup.com/articles/dark-mode/) 156 | - [Typeface features and legibility research](https://www.sciencedirect.com/science/article/pii/S0042698919301087) 157 | - [Font size guidelines for responsive websites](https://www.editorx.com/shaping-design/article/font-size) 158 | - [The ideal line length & line height in web design](https://pimpmytype.com/line-length-line-height/) 159 | - [Is there an optimal font size / line height ratio?](https://ux.stackexchange.com/questions/35270/is-there-an-optimal-font-size-line-height-ratio) 160 | - [The good line-height](https://www.thegoodlineheight.com/) 161 | - [Guide to Only the Best Open-Source Typefaces](https://beautifulwebtype.com/) 162 | - [What’s the right font size in web design?](https://pimpmytype.com/font-size/) 163 | - [Type Scale Calculator](https://type-scale.spencermortensen.com/4/2.5/0/1.125em/Libre%20Franklin%20900/Readex%20Pro%20300) 164 | - [The Typographic Scale](https://spencermortensen.com/articles/typographic-scale/) 165 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Origami", 3 | "version": "2.0.0.1", 4 | "minAppVersion": "1.0.0", 5 | "author": "kneecaps" 6 | } 7 | -------------------------------------------------------------------------------- /preview_thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/7368697661/Origami/b20890d8aecf4e67016710fd6f19f41c2ff3dd87/preview_thumb.png -------------------------------------------------------------------------------- /screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/7368697661/Origami/b20890d8aecf4e67016710fd6f19f41c2ff3dd87/screen.png --------------------------------------------------------------------------------