https://github.com/gra0007/obsidian-css-inlay-colors

Show inline color hints for CSS colors in Obsidian
https://github.com/gra0007/obsidian-css-inlay-colors

colors css inlay-hints obsidian obsidian-plugin

Last synced: 12 months ago
JSON representation

Show inline color hints for CSS colors in Obsidian

• Host: GitHub
• URL: https://github.com/gra0007/obsidian-css-inlay-colors
• Owner: GRA0007
• License: mit
• Created: 2024-07-18T05:51:24.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-12-12T02:40:02.000Z (over 1 year ago)
• Last Synced: 2025-04-12T11:49:12.213Z (over 1 year ago)
• Topics: colors, css, inlay-hints, obsidian, obsidian-plugin
• Language: TypeScript
• Homepage:
• Size: 112 KB
• Stars: 14
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Obsidian CSS Inlay Colors

[![GitHub Release](https://img.shields.io/github/v/release/GRA0007/obsidian-css-inlay-colors?label=version)](https://github.com/GRA0007/obsidian-css-inlay-colors/releases)

[![Checks](https://img.shields.io/github/check-runs/GRA0007/obsidian-css-inlay-colors/main)](https://github.com/GRA0007/obsidian-css-inlay-colors/actions/workflows/checks.yml)

[![Obsidian](https://img.shields.io/badge/obsidian-plugin-8A5CF5?logo=obsidian)](https://obsidian.md)

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\`.



### 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

.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.