Improved README

This commit is contained in:
Isaac Freeman 2023-12-26 20:29:19 +13:00
parent 1b7656563f
commit 35b28e6191
12 changed files with 97 additions and 8 deletions

105
README.md
View file

@ -2,16 +2,75 @@
![Minimal theme with a smooth gradient background based on your accent color. Image shows six screenshots with differently-colored backgrounds.](/hero.png)
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
![Use accent color to set a base color for the whole theme.](base_color_from_accent.png)
![Use Style Settings plugin for separate base and accent colors.](base_color_from_style_settings.png)
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
![Base color applies to Obsidian controls. Your content stands out on a white background (black in dark mode).](primary_secondary_colors.png)
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
![
Appearance of controls standardised across plugins for a consistent user interface.](consistent_controls.png)
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 fromt he same base color](light_and_dark.png)
Light and dark versions are generated from the same base color.
### Properties below content
![With Style Settings plugin, optionally position properties below notes
(Live Preview only)](properties_below_content.png)
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
![Close buttons on the left for macOS](close_buttons.png)
- 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
![Supports core plugins](plugin_support.png)
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

Binary file not shown.

After

Width:  |  Height:  |  Size: 202 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 KiB

BIN
close_buttons.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 KiB

BIN
consistent_controls.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 239 KiB

BIN
controls.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
hero.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 470 KiB

After

Width:  |  Height:  |  Size: 571 KiB

BIN
light_and_dark.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 347 KiB

BIN
plugin_support.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 283 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 307 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 239 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 64 KiB