A theme for the css playground Obsidian
This project began as a way for me to learn CSS, more or less. Because as my best friend said:
Believe it or not (or look at my code and believe it) I knew next to no CSS before beginning this! It's been a great chance to learn and practice, and I've already been able to take some of the skills I've learned over the last few weeks of work and apply them to web projects! I've been having an absolute blast putting this theme together, and I hope you enjoy it 🥰
Ultra Lobster is my own take on 'buffing up the corners' of Obsidian without straying too far from default colors. The project started as an attempt to reduce visual clutter, while not simply removing information. I also wanted to take a chance to create an intuitive environment that built upon a 'tactile' canvas... I wanted cards, ok. With rounded corners, especially.
Colors were carefully chosen using a mixture of https://coolors.co and a background in visual design. I attempted to keep the default color schema, but adapt the colors slightly for contrast, tone, and other small edits to give the interface a softer feeling. Links have also been carefully minimized in both live edit and preview, with color accent, selective underline, and font weights to help differentiate without overwhelming.
Or, if you wanna boogie you can hop to the (currently technically 'experimental' Lobster Time) for a coppery crustacean POP offering night friendly red-based hues to help with eye strain:
I am a font addict. I'll admit it. I probably download at least 25 fonts a day and I'll never stop. The fonts for Ultra Lobster were handpicked over the course of longer than I care to admit to finally arrive at a combination of values that both enhances vanilla Obsidian, and helps you focus on what matters: the words. I opted for Google Fonts when I could, to try and lean on lightweight modern fonts to not bog down the editor too badly (unfortunately, Zoho Puvi had to be embedded). I also tried to only import as many weights as needed, to keep file-size low. As such, I finally landed on Rubik by Hubert and Fischer, Meir Sadan, Cyreal for the interface.
I love a good rounded, thicc font –and this one is just light enough to not make my eye glaze over on long paragraphs (so far).
The header font is Zoho Puvi by the Zoho team, because I love fonts with stories or interesting facts to them. Did you know that they designed the angle of the letters to match the Earth's axial tilt (23.5°)? Maybe that's why I was hooked on it at the first sight of how the S lines up ❤️🔥
Finally, the monospaced font is Space Mono by Colophon, because as far as I can tell its basically IBM plex but I like it more 🤷♀️
A special Amoled mode can be toggled with Style Setting, and card blockquotes.
Various components have been tweaked and modified to bring in line with this design spec. The entire workspace has been given a design pass, bringing card-like design to your notes. I find it helps me to see my notes in such a more visual manner (like cards on a desk), though it comes at a cost; necessary margins for shading means that the theme contains heavy amounts of whitespace.
While I use replacements for the stock prompts, careful consideration has been taken to ensure a standard experience.
👩💻 Command obsessed like me? Better Command Palette...
...and Omnisearch have also been themed to match the base prompts, and truncated of extra information like prompt titles.
Finally, many other changes have been made, including but not limited to:
- Blockquotes
- Callouts
- Code blocks
- Inline titles
- Fonts, fonts, fonts
- Interface: Rubik by Hubert and Fischer, Meir Sadan, Cyreal
- Title: Zoho Puvi by the Zoho team
- Monospace Space Mono by Colophon
- Lists
- Ordered lists by Typomagical and Concourse Index by Matthew Butterick
- Links
- Headers (Smooth live headers by
@Luke242#8485) - Folder theming by
GabeVilela@PspStreet51#6517 - Plugin support
- And much, much more
- Kanban
- Influx
- Memo
- Better Command Palette
- Omnisearch
- Reminder
- Style Settings (🚧HEAVY WIP🚧)
Open a ticket! I can't promise I will always be the fastest, but I'll try to add support and push fixes as quickly as I can.
- make theme less bad on the code side
- figure out font fallback for other languages
- make better graphics
- upload new photos
- rewrite copy to match new design spec
- write up thoughts on changes over base
- wrestle with the nihilistic realization that writing any published thoughts is just adding senseless noise into the great internet ether
- figure out style settings
- update/create 'roadmap'
- upload content
- v0.5 stable for public testing
- greater plugin support
- fix kanbans
- finish color schemes
- set up style settings...
- Icons are handled by Icon Folder