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.

β†’ Material Design Guidelines

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.


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 roboto the 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