Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/7368697661/Origami
Origami was crafted with 💖 to mimic the tactility of paper, but introduce digital tools 🦾
https://github.com/7368697661/Origami
css markdown obsidian-md text-editor theme typography writing
Last synced: 2 months ago
JSON representation
Origami was crafted with 💖 to mimic the tactility of paper, but introduce digital tools 🦾
- Host: GitHub
- URL: https://github.com/7368697661/Origami
- Owner: 7368697661
- License: mit
- Created: 2022-11-14T03:45:09.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-30T22:20:02.000Z (about 1 year ago)
- Last Synced: 2023-11-07T15:23:56.419Z (about 1 year ago)
- Topics: css, markdown, obsidian-md, text-editor, theme, typography, writing
- Homepage:
- Size: 8.18 MB
- Stars: 111
- Watchers: 3
- Forks: 4
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Origami
## THEME DEVELOPMENT STATUS: REFACTOR
need to do a big ole rewrite of style settings since half of the defaults wont stick. i want to provide a better 'out of the box' experience so i will have an update for origami when that rewrite does not remove current features. to minimize disruption, i am mostly developing here: https://github.com/7368697661/working-edits
check it out if you want the latest edits!
***
A theme made with 💖 for [Obsidian](https://obsidian.md/) that prioritizes text & design and puts the focus squarely on your words.
Origami is a carefully crafted Obsidian theme that builds upon the stunning 1.0 redesign, featuring many changes to the base UI to create a clean and unobtrusive interface. Drawing inspiration from centuries of human typography and the timelessness of ink and folded paper, Origami offers a unique blend of modernity and tradition that will keep you working in Obsidian for hours on end. With its obsessively designed interface, Origami is the perfect workhorse theme for those who value the power of text.
> 🥳 Winner of Obsidian October (O_O) Best New Theme 2022 🥰
## 🎨 Color Schemes
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.
- Default Low Contrast: A low-contrast variation of the default color scheme for those who prefer a more muted look.
- Accent-Tinted: A color scheme that uses accent colors to add visual interest and create a modern look.
- Accent-Tinted Low Contrast: A low-contrast variation of the accent-tinted color scheme.
- Architect: A monochrome color scheme that uses black, white, and shades of grey to create a minimalist and timeless look.
- Soft: A light and soft color scheme that uses pastel colors for a calming and inviting feel.
- Soft Low Contrast (WIP): A low-contrast variation of the soft color scheme, currently a work in progress.
- Newt: Coming soon; The very first flavor of Origami :)
- Legacy: Coming soon; The white, pink, and blue default theme before v2.0 💖
- Custom: A color scheme that allows you to set your own colors via the style settings. Personalize your Obsidian experience with a custom color scheme that matches your unique style and preferences.
Note: The "WIP" label indicates that the color scheme is a work in progress and may not work/be subject to change in future releases.
_With special dark-mode-only designs to help you stay organized & focued on what matters: writing_
## 📝 Typography
Origami features a carefully selected set of typefaces for titles, body text, UI elements, and monospaced text. The weights, sizes, variable font variation settings, and other type variables have been tuned for maximum readability, and custom typefaces have been added to complement the default set.
Variable fonts are used wherever possible to reduce filesize and increase utility. However, we are still tweaking the body and UI text as Uncut Sans was causing issues on mobile. For now, we have switched to General Sans as the default typeface.
The default title typeface is [Fraunces](https://github.com/undercasetype/Fraunces), while the default body and UI typeface is [General Sans](https://www.fontshare.com/fonts/general-sans). Finally, the monospace typeface is [Evil Martin](https://github.com/evilmartians/mono). In addition, I am constantly making adjustments to links, code blocks, text emphasis, block quotes, canvas, and callouts to ensure a consistent and harmonious typographic experience throughout the theme.
### ✨ Extras
- Custom folder collapse styling, based off of the works of `@anubis` and
- Colorful headings with Style Settings.
- Handpicked accent colors, also with Style Settings.
- Canvas support, including UI and color options.
- Callouts, with complex hover glow
- Special list checkboxes
- Special buttons!
- Settings, prompts, tooltips, tags, links, and much more have been themed to create a unified experience.
- ` ` support, courtesy of [Palatinate](https://github.com/eleanorkonik/-palatinate)
### ⬇️ Plugin Support
- [Style Settings](https://github.com/mgmeyers/obsidian-style-settings)
- [Make.md](https://www.make.md/) (including 90% visual parity with theme file explorer, including file icons)
- [Kanban](http://matthewmeye.rs/obsidian-kanban/)
- [Omnisearch](https://github.com/scambier/obsidian-omnisearch)
- [Better Command Palette](https://github.com/AlexBieg/obsidian-better-command-palette)
- [Influx](https://github.com/jensmtg/influx)
- [Strange New Worlds](https://github.com/TfTHacker/obsidian42-strange-new-worlds)
- [Reminder](https://github.com/uphy/obsidian-reminder)
- [Memo](https://github.com/Quorafind/Obsidian-Memos)
- [Surfing](https://github.com/Quorafind/Obsidian-Surfing)
## 🥰 Credits
- ✨ **Carboxyl & Pseudometa**, for the lovely name 💖
- 🖥️ **Lukemt** for their smooth live headers
- 🐕**Anubis** for their rainbow folders
- 📂 PspStreet51#6517 for their round folders
- 💎 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
## 🏗️ Todo
- [ ] Polish aspects of the theme
- [ ] Refactor to clean up and move more clunk to new variables
- [/] Style Settings
- [x] New color schemes
- [x] Monochrome mode
- [?] Fix font hardcoding for other languages
- [x] Sans serifed font
- [x] Maybe monospace body font?
- [X] Make better graphics to finish showing off the theme
## 📕 **Other, about**
Origami was born out of a challenging period in my life when I was struggling deeply with depression. Wanting to learn to code again, I saw Obsidian October as an opportunity to finally dive back into programming. I had no idea at the time that my theme would go on to win the competition, but the recognition gave me a much-needed boost in confidence and rekindled my passion for coding.
As I delved deeper into the design process, I spent hours researching how different design principles impact legibility, such as contrast, typeface, and type settings. Although there's no one-size-fits-all solution, I wanted to incorporate what I learned to create a theme that was both aesthetically pleasing and functional. I selected a serifed typeface for legibility and a fun, chunky typeface for titles. Additionally, I aimed for a strong, high-contrast light mode and minimized visual distractions like 'rivers' in the text.
Origami has become more than just a theme for me, it's a personal reminder of what I can accomplish even in times of struggle. Winning the Obsidian October challenge with Origami was a deeply meaningful experience for this reason, as it gave me the confidence to continue pursuing my passion for coding despite my struggles with depression. I am grateful for the opportunity to share this theme with others and hope that it brings some joy and comfort to their Obsidian experience as well.
[^1]: [Contrast Standard Resources](https://webaim.org/resources/contrastchecker/)
[^2]: [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)
[^3]: [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.)
[^4]: [Contrast Sensitivity](https://www.sciencedirect.com/science/article/pii/B9780123742032002359)
[^5]: [Dark Mode vs. Light Mode: Which Is Better?](https://www.nngroup.com/articles/dark-mode/)
[^6]: [Typeface features and legibility research](https://www.sciencedirect.com/science/article/pii/S0042698919301087)
[^7]: [Font size guidelines for responsive websites](https://www.editorx.com/shaping-design/article/font-size)
[^8]: [The ideal line length & line height in web design](https://pimpmytype.com/line-length-line-height/)
[^9]: [Is there an optimal font size / line height ratio?](https://ux.stackexchange.com/questions/35270/is-there-an-optimal-font-size-line-height-ratio)
[^10]: [The good line-height](https://www.thegoodlineheight.com/)
[^12]: [Guide to Only the Best Open-Source Typefaces](https://beautifulwebtype.com/)
[^13]: [What’s the right font size in web design?](https://pimpmytype.com/font-size/)
[^14]: [Type Scale Calculator](https://type-scale.spencermortensen.com/4/2.5/0/1.125em/Libre%20Franklin%20900/Readex%20Pro%20300)
[^15]: [The Typographic Scale](https://spencermortensen.com/articles/typographic-scale/)