Isaac Freeman

Tagged “ux”

  1. Kakano theme for Obsidian

    Minimal theme with a smooth gradient background based on your accent color. Image shows six screenshots with differently-colored backgrounds.

    Obsidian is a note-taking app I use a lot. It's extremely versatile, and great for storing all sorts of information that you want to get out of your head. You can link notes together into a kind of personal wiki, and there's a busy community building plugins for it. Notes are stored in standard Markdown, and grouped in "vaults".

    I use Obsidian for work, where I keep a daily logbook of what I'm working on, agenda items for upcoming meetings, and snippets of code to remind myself how to do various things. But I also keep a separate Obsidian vault for personal stuff: projects, shopping lists, draft submissions for for legislation, ideas for stories and non-fiction articles, and whatever else.

    Colour #

    I switch between these two vaults a lot, so I wanted to be able to tell them apart at a glance by having a strong colour difference. There are lots of themes available, but most seem to be designed with the (very reasonable) assumption that people typically use one vault at a time. But Obsidian is built with web technologies, and I am a web developer, so I made a new theme for the job.

    Obsidian provides a setting for an accent color, which by default is used for links, controls and text selection. That accent colour is available to themes, so I set out to use it more extensively. Kakano generates a set of lighter and darker shades from that base colour and uses them to provide a subtle smooth gradient background, and matching modal windows and controls.

    Two screenshots comparing the default gray theme for Obsidian with the Kakano theme in a colour I'm informed is named 'Dogwood Rose'.
    Default Obsidian theme on the left, Kakano on right.

    I use purple for work, green for my personal vault. The bright colours make it easy to locate my vaults against the mostly-monochrome windows of other apps.

    Kakano is the Māori word for "colour".

    Additional features #

    Light/dark themes #

    The same Kakano-themed window, split diagonally to show light and dark versions.

    Obsidian supports light and dark modes, so Kakano does too.

    Close buttons where they belong #

    Obsidian is available for Windows, macOS, Linux, iOS and Android. On most of these platforms the control to close a window is positioned on the right, so that's where it appears in most Obsidian themes. On macOS, though, close buttons have always been on the left of windows. I guess most people aren't bothered by the inconsistency, but I am not one of those people: when a macOS app has close buttons on the right it stands out like a sore thumb. Kakano detects which platform it's running on, and moves close buttons to the left if it's running on macOS.

    Consistent controls #

    Obsidian provides a lot of controls throughout its UI, and they're often provided by different plugins with slightly different appearances. I've aimed to improve consistency with Kakano.

    Examples of a text input field, dropdown, button, switch and several icons.
    Various Obsidian controls, styled with Kakano

    Getting Kakano #

    Kakano is available to install from within Obsidian. Go to Settings > Appearance, then click on Manage in the Themes section. You'll find it listed there alongisde other community themes that have been approved by the Obsidian team.

    Source code is available on Github.

    Future #

    There's a lot more to do! In particular, I want to polish how Kakano appears on mobile screens, and how it renders notes that use popular Obsidian plugins.

See all tags.