I’ve been working for a few months on the Kakano theme. I keep two separate vaults open through my day: one for work notes and one for personal notes. I switch between them frequently, so my initial motivation was to be able to tell them apart at a glance, and have them stand out from other windows when I’m using macOS Expose.
I also wanted to explore modern CSS, and exercise my user interface design skills. I expect Kakano to be an ongoing project, picking up new ideas as I go.
Strong color Users should be able to easily select a color for each vault and have the theme generate shades and gradients automatically.
Help new users Obsidian can be intimidating for new users. I think a good way to help with this is to clarify which parts of the window are user content (white background, strong contrast) and which are navigation and other controls (colored background, lower contrast).
Standardise controls Obsidian’s exuberant plugin scene is fantastic, but it also means that there’s a lot of inconsistency in the design of controls and modals – even between core plugins. I’ve tried to find ways to make similar controls have similar appearance. Likewise, I’ve aimed to follow conventions from the underlying OS, such as having close controls on the left on macOS.
Be opinionated enough I’d like Kakano to provide a great user experience by default without the user having to make any choices beyond their base color. It has settings, but I want each one to be there because different users genuinely have different needs, not just because I failed to make a decision.
By default, Kakano use the accent color. If Style Settings is installed, the user can select a base color separate from the accent color.
Supports light mode, dark mode, and mobile.
On macOS, close buttons are positioned at the left of tabs and modals, matching the OS windows.
Provides a setting to put properties at the bottom of a note. I like to think of properties as metadata that comes after my notes, and shouldn’t get between the title and body text. Currently this only works in Live Preview
Alternate checkboxes for common tasks. I expect to add more of these over time, but I’ve focused first on the ones I find most useful in practice.
Goals
Support all core plugins. This is nearly done!
Support popular community plugins. I’ve styled parts of the plugins I use most often, but once there’s solid support of all the core plugins I’d like to work fairly systematically through the most popular plugins.
Borrow from other themes. I see so many clever ideas in other themes that are worth adopting. In each case I’ll try to balance compatibility with usability, and credit the originators.
Learn from users. I’ve had some great feedback in Github issues, and I’ll continue to incorporate ideas from users.
I actively enjoy Kakano. It is not my primary theme because I’m waiting on some more granular Style Settings integration (I don’t know how to CSS), but I always enjoy switching to this theme every now and then.
One thing I really love about Kakano is the simplicity of selecting an accent colour which automatically recolours every other aspect of the interface. I also really like that the sidebars are colour-matched. It helps me to remain focused on the editor.
I’m waiting on some more granular Style Settings integration
Anything in particular you have in mind? I’d like to maintain the out-of-the-box simplicity of the theme, but give it some more depth in supporting how different people use Obsidian.
One thing on my to-do list is to provide a curated set of colors people can choose from to get started. I personally like to tune the exact base colour I want (and it can change day to day!) but there’s no reason why everybody should be required to do that. If people just want to say “Give me an orange”, that should be possible.
I also really like that the sidebars are colour-matched. It helps me to remain focused on the editor.
That’s great to hear! I’ve really been aiming to encourage that kind of focus on content.
Ability to pin the “Backlinks in document” area so that you don’t have to scroll to the bottom of a note to see it (I have a snippet for this but when I enable it, the colour set by Kakano for this area is removed and it just becomes white)
Ability to manually adjust file explorer buttons and text colours/contrast/transparency (the choice of some accent colours makes the text and icons hard to see sometimes)
Certain modifications to embeds
I’m sure there’s a couple other things. I’m not incredibly picky but these are a few nice-to-haves.
I do really want to emphasize how great this theme is. I really love how you’ve designed it overall! It’s definitely my most-used theme after Minimal.
@ryadaj
Thanks for those. I’ve put them on my to-do list to address one way or another. As a general principle, I’d like to try for good solutions first and provide only a small number of really useful settings. Not that I’m against super configurable themes, it’s just not the direction I want to go with Kakano.
I certainly agree that text and control contrast in the sidebars is one of the challenges in the Kakano design. I’ve been gradually tweaking details, but there’s more to do.
Embeds are something I haven’t spent much time on yet, and are high on my list. I’d love to know what problems you see.
I’m also interested in the pinned-backlinks-in-document idea. My immediate reaction is that you could get a similar result by keeping backlinks open in the sidebar. However, maybe I’ve missed your point.
Totally understandable—you are the creator after all! I am totally onside with creators having oversight of their own work.
My preferences are not complex here. In Minimal you can hide the file names of embedded/transcluded files which I think makes files look a lot cleaner by ensuring embeds appear seamlessly in the text with only the vertical line on the left to indicate it is an embedded/transcluded file. I like this.
Personally I find having backlinks pinned at the bottom to be more useful. I can appreciate how viewing them in the sidebar can enable one to focus on content, but for quick discoverability of connections I find looking at the bottom of the screen to be preferable than looking to the left or right. It’s a small detail but one that has made a significant difference to my own enjoyment of Obsidian.
Here is the snippet for sticking backlinks to the bottom. It was @sailKite who wrote it for me I believe.
Hi! I love using Kakano, I’ve shifted between different themes a lot and this one is great, especially how bold it is with the base colour you pick and how everything is colour matched - very satisfying. I also love the way the properties are displayed - it’s the feature that convinced me to use this as my base theme.
Was wondering about the potential other style settings - for example, a little bit more personalization, maybe in style settings, on how tables are displayed. I have some trouble reading tables because of the lack of row lines and table outline. I found a snippit that lets me change that on my own but thought I would put the idea out there
I frequently change themes, and your Kakano has recently entered the rotation. However, I don’t know it well enough but, I particularly appreciate the fact that there aren’t too many options (if I want more, I might choose, Minimal, a long way to set up as your way and it’s great). Kakano, quick to implement and enjoy!
I really like your snippet for backlinks. Do you have something similar to fix properties at the bottom of the page?
In Minimal you can hide the file names of embedded/transcluded files which I think makes files look a lot cleaner by ensuring embeds appear seamlessly in the text with only the vertical line on the left to indicate it is an embedded/transcluded file.
I’ve just deployed an update with my take on embeds for Kakano. I’ve implemented your suggestion for a setting to hide embed titles, with an additional option to show titles only on hover, which I’m using as a default.
I’ve gone with a full background color rather than Minimal’s line on the left. My thinking here is that embedded notes aren’t an obvious feature for beginners, so the extra visual weight indicates that there’s something special going on, and it’s not just a piece of quoted text.
I’d be interested to know whether this works for you, as I’m a fairly light user of embedded notes. I embed a list of journalling questions in my daily note template, but don’t (currently!) use them for other purposes.
I’ll look into it! It may be a bit tricky, as the properties and links sections are quite separate: they’re only styled to look like they’re grouped together. But I’ll see what i can do.
For sure! for some reason my tables look totally different - no idea why. This is on my laptop (not mobile, if that makes a difference). All of my tables are pulled using dataview. Maybe there’s a setting I’m missing
Thanks for that. Perhaps it’s something specific to Dataview. I haven’t spent any time on that yet, as I wanted to work through the core plugins first. I’ll put Dataview higher on my to-do list.
One is: how can I increase the visibility of text in my file explorer in Light Mode? No matter what accent colour I choose, the text is essentially impossible to read.
Thanks for those screenshots. There’s definitely something going wrong there. You should be seeing something more like this, with more contrast and the same colors for tabs in both sidebars.
I can’t immediately reproduce this, so I’m guessing it’s some interaction with community plugins or snippets you have active. Would you have time to temporarily disable these and see if you can find any particular one that might be involved? You could also use the Show debug info command and send me the result, which would include a list of your active plugins.
It looks like something is trying to apply parts of the dark mode styling to just the left sidebar, which may be a clue.
While checking this out, I see another bug in my screenshot: the button to toggle the left sidebar is positioned strangely when using the Hidden window frame style in Appearance settings. I normally use Native frame, but I should support the default appearance.
SYSTEM INFO:
Obsidian version: v1.5.3
Installer version: v1.4.13
Operating system: Darwin Kernel Version 23.2.0: Wed Nov 15 21:53:18 PST 2023; root:xnu-10002.61.3~2/RELEASE_ARM64_T6000 23.2.0
Login status: logged in
Catalyst license: supporter
Insider build toggle: on
Live preview: on
Base theme: light
Community theme: Kakano v2.8.0
Snippets enabled: 7
Restricted mode: off
Plugins installed: 20
Plugins enabled: 16
1: Kanban v1.5.3
2: Natural Language Dates v0.6.2
3: Pandoc Plugin v0.4.1
4: List Callouts v1.2.0
5: Excalidraw v2.0.18
6: Change Case v2.0.1
7: Tag Wrangler v0.6.1
8: Dataview v0.5.64
9: Pending notes v0.8.1
10: Interlinear Glossing v1.4.0
11: Easy Bake v1.0.5
12: Sort & Permute lines v0.7.0
13: Bulk Rename v0.5.2
14: Hider v1.3.1
15: Minimal Theme Settings v7.3.1
16: Style Settings v1.0.7
RECOMMENDATIONS:
Custom theme and snippets: for cosmetic issues, please first try updating your theme and disabling your snippets. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community theme and snippets.
Community plugins: for bugs, please first try updating all your plugins to latest. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community plugins.
I think I see it. In Minimal Theme Settings there’s a setting Light mode background contrast. If you have that set to High Contrast while Kakano is active, it reproduces the effect in your screenshot.
If I’ve diagnosed that correctly for your machine, you should be able to fix it in the short term by changing that setting to Default when Kakano is active.
Longer term, I’ll add to my list to see if I can get Kakano to override that setting. Strictly speaking I think it’s a bug in Minimal Theme Settings that it can affect other themes, but in practice many people who use Kakano will also have Minimal Theme Settings enabled, so I might as well deal with it in Kakano.
As so often happens, finding the cause was the hard part, fixing it relatively easy. If you update to Kakano version 2.8.2 you should see this problem fixed, with Kakano ignoring the Minimal Theme Settings option even if it’s active.
I’ll also report it as an issue with the Minimal Theme Settings plugin, as it will affect lots of other themes.
