New plugin to automatically color property lists in Bases

Share & showcase
1

Hello, I would like to share a new plugin I wrote that automatically detects and colors property list values in both Bases files and the file properties pane, making it easier to visually distinguish between different values.

You can find more information, including screenshots, on GitHub - rafjaf/obsidian-colored-property-lists: Obsidian plugin to color property lists in Bases

The plugin has been submitted for review. In the meanwhile, you can install it with BRAT.

Any comments/contributions most welcome.

Rafaël

3 Likes
2

Now also added logic to color formula properties (i.e. rendered results of formulas).

3

@raf.jaf I’m really interested in giving this plugin a try, but can’t seem to get it working. Under “Property Colors” I see the error message “No property values detected yet. Open a Bases file with properties to automatically detect values.” I have a Bases file open with various properties toggled to be visible.

4

@Bnu92 Ah, strange! Have you tried to close and reopen the Base file?

5

@raf.jaf Yup! I’ve even deleted the Base file and recreated it, toggled the plugin on and off, closed and reopened my vault, etc. No luck.

6

@Bnu92 It’s hard for me to debug at a distance. If you open the sandbox vault and install BRAT and this plugin, do you have the same problem? I’m thinking that perhaps there is a misunderstanding about the functioning of the plugin: it only colors list properties, not other properties like text, number or date properties. Might it be the cause of the problem? If it still does not work, the only way I see to debug it is if you create a new simple vault which does not work for you and you send it to me so that I can try whether it works for me or whether I can identify the cause of the problem.

8

@raf.jaf I see what the problem is: I was using text properties. After switching to list properties (using YAML, not the Obsidian properties UI), the colors now appear! Out of curiosity, is there any way to add a bit more padding around the pills? Thanks for creating this :slightly_smiling_face:

9

@Bnu92 Ah, good to hear! The generic styling of the pills is in obsidian-colored-property-lists/styles.css at master · rafjaf/obsidian-colored-property-lists · GitHub, you can easily adapt the padding around the pills with a custom CSS snippet in Obisidian itself

10

@raf.jaf Thanks for pointing me in the right direction!

In case it helps anyone who comes across this thread, here’s a CSS snippet (generated with ChatGPT) that does the trick:

/* Generic: adjust padding for all property-list pills */
.multi-select-pill {
  padding: 2px 8px !important;      /* ↑ vertical, → horizontal */
  border-radius: 999px;              /* keep pill look */
}

/* Optional: increase spacing between pills */
.multi-select-container { gap: 6px !important; }
1 Like
11

Thats what I am looking for, a way to color property lists in Bases and files. I tried to make a plugin like that with vibe coding. I inspired from Colored Tags Wrangler plugin. Its menu and usage great.

My try was not successful. But I wanna add my results. Color selection area :

obsidian_colored_properties_1
obsidian_colored_properties_11642Ă—1282 145 KB

Font black or white, its normally automatic. But you can select any other color if you want. That kind of selection area better i think. Also check Colored Tags Wrangler plugin.

Result is not what I want. But it’s a start. Like that:

obsidian_colored_properties_2
obsidian_colored_properties_21412Ă—686 92.7 KB

I will definitely use that. Great start.

12

This is exactly what i was looking for, thanks! A feature that would also be great is to add a custom text color for each tag. Using light colors is pretty difficult with white text :slight_smile:

I also had trouble understanding that it only works with list type properties. But from your answer here in the forum i got it eventually.

13

Hi, raf.jaf. Thank you for the plugin, very useful.
For future updates, would you consider “Properties” like “Number”? But for this to be useful (for my use case) there would have to be a way to setup different colors per property.

I mean, I’m doing project/task management via bases. I have property like “Priority” that goes from 0 to 5. “Progress” goes from 0 to 100 by 25(%) increments. So I guess there would need to be way to setup different colors for different properties and I don’t know if you are willing to go that complicated. Anyway, thank you.

But I guess I could modify my workflow even when only “Number” property would be generally supported (eg I would change priority to 0-100 by 25 increments as with progress).

14

Thank you @doc3. Since this requires substantial additional developments, I am not sure if/when I will be able to implement this, but do not hesitate to contribute with a pull request to the repository.