obsidian-plugin/gra0007_obsidian-css-inlay-colors
1
0
Fork 0
mirror of https://github.com/gra0007/obsidian-css-inlay-colors.git synced 2026-07-22 05:18:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
No description
36 commits 1 branch 11 tags 281 KiB
CSS 85.2%
TypeScript 13.9%
JavaScript 0.9%
Find a file
Benji Grant 47bda8844d
Fix pop-out window support for the color picker
2024-08-21 10:40:03 +10:00
.changes Fix pop-out window support for the color picker 2024-08-21 10:40:03 +10:00
.github/workflows Match all ts files 2024-08-06 14:18:18 +10:00
.vscode Initial version 2024-07-19 12:41:29 +10:00
src Fix pop-out window support for the color picker 2024-08-21 10:40:03 +10:00
.gitignore Initial version 2024-07-19 12:41:29 +10:00
.npmrc Initial commit 2024-07-18 15:51:26 +10:00
.yarnrc.yml Initial version 2024-07-19 12:41:29 +10:00
biome.json Initial version 2024-07-19 12:41:29 +10:00
CHANGELOG.md Publish new version 2024-08-06 04:20:14 +00:00
esbuild.config.mjs Add a license file and src folder 2024-07-19 14:11:23 +10:00
example.jpg Initial version 2024-07-19 12:41:29 +10:00
LICENSE Add a license file and src folder 2024-07-19 14:11:23 +10:00
manifest.json Publish new version 2024-08-06 04:20:14 +00:00
package.json Upgrade yarn version 2024-08-21 10:29:40 +10:00
README.md Include details for customising the styles 2024-08-21 10:30:07 +10:00
styles.css Format hex colours as existing colour syntax 2024-08-06 10:34:03 +10:00
tsconfig.json Initial version 2024-07-19 12:41:29 +10:00
version-bump.mjs Set up workflows 2024-07-19 13:39:46 +10:00
versions.json Publish new version 2024-08-06 04:20:14 +00:00
yarn.lock Set up workflows 2024-07-19 13:39:46 +10:00

README.md

Obsidian CSS Inlay Colors

GitHub Release Checks Obsidian

Show inline color hints for CSS colors in Obsidian.

To use, just put any valid CSS color syntax in a code block like so: `#8A5CF5`.

Example of the extension running for all CSS color formats

Color Picker

Enable the color picker setting to change a color using a color picker in live preview mode. Note that the color picker does not support opacity, and will only let you select from sRGB colors. It will attempt to preserve the existing format you have written, as well as any existing opacity.

Custom CSS

Customize the inlays by targeting the .css-color-inlay class. For example, you can make them circular with the following snippet:

.css-color-inlay {
  border-radius: 100px;
}

Development

This project uses Biome and Yarn for linting/formatting and package management. Run yarn dev to build on changes.