Improved README
105
README.md
|
|
@ -2,16 +2,75 @@
|
|||
|
||||

|
||||
|
||||
Kakano is an [Obsidian](https://obsidian.md/) theme with a smooth gradient background based on your accent color.
|
||||
Kakano is an [Obsidian](https://obsidian.md/) theme with a smooth gradient background derived from a user-selected base color.
|
||||
|
||||
- [Kakano](#kakano)
|
||||
- [Getting started](#getting-started)
|
||||
- [Features](#features)
|
||||
- [Choose a base color](#choose-a-base-color)
|
||||
- [Distinguish your content from Obsidian controls](#distinguish-your-content-from-obsidian-controls)
|
||||
- [Standardised controls](#standardised-controls)
|
||||
- [Light/dark modes](#lightdark-modes)
|
||||
- [Properties below content](#properties-below-content)
|
||||
- [Follow OS standards by default](#follow-os-standards-by-default)
|
||||
- [Supports core plugins](#supports-core-plugins)
|
||||
- [Settings](#settings)
|
||||
- [Roadmap](#roadmap)
|
||||
- [Plugin support](#plugin-support)
|
||||
- [Core Plugins supported](#core-plugins-supported)
|
||||
- [About](#about)
|
||||
|
||||
## Getting started
|
||||
|
||||
1. Install the Kakano theme
|
||||
[Open directly in Obsidian](obsidian://show-theme?name=Kakano) or open Obsidian settings and navigate to `Appearance`, then `Manage` and type "Kakano" into the `FIlter...` field. Click on `Install and use`.
|
||||
2. (Optional) Install the [Style Settings plugin](https://github.com/mgmeyers/obsidian-style-settings)
|
||||
This will give you access to some additional theme settings.
|
||||
3. Set your vault's base color
|
||||
- If you're not using Style Settings, navigate to `Appearance` in the Obsidian settings, and use the `Accent color` control.
|
||||
- If you're using Style Settings, navigate to `Style Settings` in the Obsidian settings and open the `Kakano` section. Use the `Base color` control.
|
||||
|
||||
## Features
|
||||
- Uses the accent colour extensively as a base for workspace backgrounds and controls. If you reguarly use multiple vaults, setting a different accent colour for each makes them easy to tell apart at a glance.
|
||||
- Creates a visual distinction between Obsidian controls (colored background) and your content (white background in light mode, black background in dark mode).
|
||||
- If the [Style Settings](https://github.com/mgmeyers/obsidian-style-settings) plugin is installed, it can be used to set a base color independent of the accent color.
|
||||
- Light/dark modes.
|
||||
- On macOS, close buttons appear at the left of tabs and modals, where they belong.
|
||||
- Minimal design with consistent appearance for controls.
|
||||
- Uses system fonts by default to be consistent with other apps. User settings are of course respected if you want something different.
|
||||
### Choose a base color
|
||||

|
||||

|
||||
|
||||
Kakano starts with a user-selected base color, and generates lighter and darker versions for a cohesive overall user interface with smooth gradient backgrounds. If you reguarly use multiple vaults, set a different accent color for each to make them easy to tell apart at a glance.
|
||||
|
||||
> [!info]
|
||||
> I use a work vault with a company brand color, and a separate green vault for my own personal notes.
|
||||
|
||||
- With core plugins, the base color will be your accent color.
|
||||
- If the [Style Settings](https://github.com/mgmeyers/obsidian-style-settings) plugin is installed, it provides a separate Kakano base color setting, so you can have one color for your overall theme, and keep the accent color for links and tags.
|
||||
|
||||
### Distinguish your content from Obsidian controls
|
||||

|
||||
With Obsidian controls placed on a colored background, there's a clear visual distinction between your content and the tool you use to manage it.
|
||||
|
||||
### Standardised controls
|
||||

|
||||
The appearance of buttons, switches, form fields and other controls is standardised across different modules, so the user interface looks and behaves consistently.
|
||||
|
||||
### Light/dark modes
|
||||

|
||||
Light and dark versions are generated from the same base color.
|
||||
|
||||
### Properties below content
|
||||

|
||||
Some people pay a lot of attention to propertioes on their notes, others use them occasionally. If you want them around but not in the way, Kakano let syou place them below your main note content. Currently this only works for Live Preview mode.
|
||||
|
||||
### Follow OS standards by default
|
||||

|
||||
- On macOS, close buttons appear at the left of tabs and modals, as standard.
|
||||
- Kakano uses system fonts by default to be consistent with other apps. It respects user font choices if you prefer something else.
|
||||
|
||||
### Supports core plugins
|
||||

|
||||
Kakano styles all the core Obsidian plugins.[^1]
|
||||
|
||||
[^1]: OK, almost all of them. I have a couple left to finish.
|
||||
|
||||
### Settings
|
||||
If the [Style Settings](https://github.com/mgmeyers/obsidian-style-settings) plugin is installed, Kakano offers the following settings.
|
||||
|
|
@ -21,6 +80,17 @@ If the [Style Settings](https://github.com/mgmeyers/obsidian-style-settings) plu
|
|||
In Live Preview mode, properties can be positioned before (default) or after the main note content. If you rarely use properties, you may prefer to make them less prominent.
|
||||
_This setting only works for Live Preview mode. Reading mode doesn't provide suitable HTML structure to support it, and Source Mode makes properties editable within the main content area.
|
||||
|
||||
## Roadmap
|
||||
|
||||
Kakano is a one-person hobby. I'm having a great time exploring what Obsidian can do, and how far CSS has come in recent years. I want to sweat the details and apply good usability practices, but it's also something I'm doing for fun. Sometimes I'll change things on a whim, or focus on obscure areas of the UI because they present interesting challenges.
|
||||
|
||||
There are, however, some key areas I want to improve:
|
||||
|
||||
1. Support for all the core plugins. I haven't yet worked on Publish or Sync.
|
||||
1. Dark mode. At the moment it's mostly just an inverse of light mode, but I'd like to give it specific attention.
|
||||
1. Mobile.
|
||||
1. Support for the most popular community themes.
|
||||
|
||||
## Plugin support
|
||||
Kakano has specific styling for the following plugins:
|
||||
|
||||
|
|
@ -49,3 +119,22 @@ Kakano has specific styling for the following plugins:
|
|||
- Unique note creator
|
||||
- Word count
|
||||
- Workspaces
|
||||
|
||||
## About
|
||||
I'm a software developer in Aotearoa/New Zealand, and I love to explore usability and design.
|
||||
|
||||
> [!tip]
|
||||
> I'm currently looking for work, so let me know if you're looking for a developer in Ruby on Rails or similar web technologies.
|
||||
> I can be contacted at isaac@freeman.org.nz or on Mastodon as @isaacfreeman@cloudisland.nz
|
||||
|
||||
_Kakano_ means "colour" in the Te Reo Māori – the Māori language of New Zealand. Some words for specific colours are:
|
||||
|
||||
- _Whero_ – Red
|
||||
- _Karaka_ – Orange
|
||||
- _Kōwhai_ – Yellow
|
||||
- _Kākāriki_ – Green
|
||||
- _Kahurangi_ – Blue
|
||||
- _Waiporoporo_ – Purple
|
||||
- _Mangu_ – Black
|
||||
- _Mā_ – White
|
||||
- _Kiwikiwi_ – Grey
|
||||
|
|
|
|||
BIN
base_color_from_accent.png
Normal file
|
After Width: | Height: | Size: 202 KiB |
BIN
base_color_from_style_settings.png
Normal file
|
After Width: | Height: | Size: 220 KiB |
BIN
close_buttons.png
Normal file
|
After Width: | Height: | Size: 141 KiB |
BIN
consistent_controls.png
Normal file
|
After Width: | Height: | Size: 239 KiB |
BIN
controls.png
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
hero.png
|
Before Width: | Height: | Size: 470 KiB After Width: | Height: | Size: 571 KiB |
BIN
light_and_dark.png
Normal file
|
After Width: | Height: | Size: 347 KiB |
BIN
plugin_support.png
Normal file
|
After Width: | Height: | Size: 283 KiB |
BIN
primary_secondary_colors.png
Normal file
|
After Width: | Height: | Size: 307 KiB |
BIN
properties_below_content.png
Normal file
|
After Width: | Height: | Size: 239 KiB |
BIN
screenshot.png
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 64 KiB |