Building an Obsidian Mobile theme in public
For Obsidian October I will build an Obsidian theme from scratch for the first time.
🎯 Goal: Reflecting the Material Design Guidelines to feel native on Android, and beautiful anywhere else.- ✍️ During the duration of development, I will document my achievements, frustrations and learnings here.
- 🧰 My raw workbench note: Obsidian You Theme.
- 🪢 Git repo: selfire1/material-obsidian: A Material theme for Obsidian.!
Sep 22, 0.0.1: Building the skeleton
This version marks new beginnings. From the ground up, I applied Material Design Guidelines in three areas: Colour, Typography and Layout.
👍 What I like
I spend hours on a simple animation when opening a text field. I think it turned out alright and showed me that details are worth focussing on.
I use the theme as a daily driver on my phone to keep thinking about ways to improve.
🤔 To improve
I want to improve the use of colour. To keep it simple, I stuck with Obsidian’s default shade of purple. I used the Color Tool - Material Design to generate a lighter and darker shade that I used throughout the design. I want to add some more accents, so far the scheme feels quite plain.
I am also not sure about the typography. I stuck with roboto and the specified weights, but they seem boring and corporate to me. Both sidebars also need significant improvement.
Then there are all the details: tag pills, settings, links.
Conclusion
0.0.1 is a workable start to feel out the theme. I want to add more playfulness to it and need to improve the core styling of different elements. In this stage, gathering inspiration is key. Then I can steal from my favourites and create something unique.
Main questions going forward
- Is
robotothe right choice of font? - Which weight should the headers have?
- How do I incorporate a feeling of layer and surfaces?
- How can I redesign the icons to make them feel more ‘material’?
- Which tool can I use to gather all the design inspiration?
Main action items
- Share my progress with others
- Find a tool to gather design inspiration (Recommendations anyone?)
- Create a git repo
- Design the different elements of the body