Looking to CSS color code the new properties

zettelstraum · August 24, 2023, 2:52pm

I am trying to replicate what the abandoned pluin

did, only with CSS.

The problem is that the plugin does not pick up the new properties.

With the help of @Roam, I got so far:

/* comment here */ With help by Roam, 

.metadata-property[data-property-key="tags"] .multi-select-pill{
  background: maroon;
  color: white;
}

As you can see, it colors the tags. But only the tags. And it colors them all the same.

I am using a limited set of base tags with nesting and would like to have the different base tags set to individual colors.

Can someone help me achieving this?

Is there a way to color code individual tags?
Is there a way to target other properties apart from tags?

Any help is greatly appreciated

Bluemoondragon07 · August 24, 2023, 4:11pm

Is this what you’re trying to achieve like the plugin?

So, this is optional, but the first thing I did was hide the # symbol:

CSS to hide Hashtags (Paste into Snippet; Optional)

@font-face {
  font-family: 'Formular';
  src: url('data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAXMAA4AAAAACOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAAFZAAAABYAAAAWABMABkdQT1MAAAV8AAAAIAAAACBEdkx1R1NVQgAABZwAAAAvAAAAMCN+JIxPUy8yAAACDAAAAEcAAABgII84HWNtYXAAAAJUAAAAMQAAADwAOwB9Z2FzcAAABVwAAAAIAAAACP//AANnbHlmAAABRAAAACgAAAAoKX11F2hlYWQAAAGcAAAANgAAADYW4dEnaGhlYQAAAewAAAAgAAAAJA/2Cc9obXR4AAAB1AAAABgAAAAYDeYAd2xvY2EAAAGMAAAADQAAAA4APAA8bWF4cAAAAWwAAAAeAAAAIABLAEVuYW1lAAACiAAAAq4AAAXocAf8uHBvc3QAAAU4AAAAJAAAADNVXVC5AAIAdwAAA8MFtgADAAcAADMRIRElIREhdwNM/T8CNf3LBbb6SoEEtHjaY2BkYGBgY3BiYGYAASYgZmQAiTmA+QwACZIAkQAAeNpjYGAQQUAAAt4AeQAAAAABAAAAAgCDDlp/b18PPPUACwgAAAAAAM8sf4QAAAAA4KMGkP+m/lgITAc7AAAACAACAAAAAAAABDkAdwAAAAACqgAAAAAAAAI5AAAEygAAeNpjYGRgYLP8Z8l4krv//zIGBg4fBqAICmADAH24BNx42mNgZrnJOIGBlYGB1ZjlLAMDwywIzXSWIY0pC0gzIAFGBnTgwKDAoMxm+c+S8ST7XcY3CgwM08EKfzCdAlIKDEwAU4UM+QB42mNgYGBiYGBgBmIRIMkIplkYNIA0G5BmBMoqMCj//w/kg+n/T/4/AqsCAgCI4wiyAAAAeNqtUrtu1EAUvfZu3g/RISGERqJJpMReVkFityKJlBSRUEgRiXJsjx+s12ONZ9dxw5/QUFJS8QF8AZ9CS8Px7CRrIJEosOWZc1/nnrkeInrmFOTQ4nmHb4EdWoe1wC6tEbe4Ry8ptbjfyVmhHfpo8WrHv0Zv6bPF67RHPy3e6ODNTt8teuw8t3i7g3dozxlbvEtPnQBKnP4GrC/OB4sdeuQOLHZp131tcY/eu28s7ndyVuiJ+9Xi1Y5/jT653y1ep8uetnijgzc7fbfI632zeLuDd5D/w+JdetU/OZVlo7Ik1Wwv3GfDwYujQywjFjTsnDe8EOyEJxGvuIJxwK4bHqaiyvmcXWQqy0UxkR47znNmSCqmRCXUXETemVTTWc7VlUjabUHW5VpS3TGN2W3VuJUyuhaqymTBht5gMLzMBa8EGsRCMS2ZTgVbqq9EqNvUWCoTiWWhmVY8ElOuJoxrrbJgZlIKqbNQVN6/ni/Vuhz7fl3XXqBkXcTyxpMqOS4aNoOgOtOpnGlWCjXNKqM3q1ipZJoFmRaRLe+W+jkEFKHw6ZQkldSQoowS3GJNDLcwpH3sQxrQCzqiQ4tG8AXIZXSOu9/gK0jAOgFKKMJa4VM2coDItcEheAViOfAc3gv0avvl8BY0gQIP3mPYOfalkspYbaXAPscaIfMM+YqmNDN8iq7gT+6srrKHdN2n6m9NY3T/s9f4biojsLSqKtRIVLR+D5EB9kvDwo3uxQlik8twJmnW1ETum31bEwLdssZGwbImNn5tPAo9IninRtsEPg6vNnwBNC9ZCuytFZoTe//9/6Wmb4n5+Hhr83rQoBCrkdOqvoGnPUuCP12YWzSzE6rB1Z5PGs0MPMJMPUN8Od/M3IfScKbmhG1Veyd+7/5QVx96FxMozOr/AnWqLjEAAHjaY2BiAIP/DAxpDNgAGxAzMjAxMjEwM7Cx+IX6+AAAP3gCvAAAAAH//wACAAEAAAAMAAAAAAAAAAIAAQADAAUAAQAAAAEAAAAKABwAHgABREZMVAAIAAQAAAAA//8AAAAAAAB42mNgZGBg4GLQYdBjYHZx8wlhEEmuLMphkMtJLMljkGNgAcoy/P/PAAcArlkHTgA=') format('woff');
}

/* Hide hashtag (reading mode) */
a.tag {
  --font-family-tag: 'Formular', var(--font-interface), var(--font-default);
  font-family: 'Formular', var(--font-text);
  padding: 2px 0.55em 2px 0 !important; /* even top and bottom padding */
   transition: 0.1s; 

}

/* Hide hashtag (live preview mode) */
.cm-line:not(.cm-active) .cm-hashtag-begin {
  display: none;
}
.cm-line:not(.cm-active) .cm-hashtag-end {
  border-radius: var(--tag-radius) !important;
  padding-left: var(--tag-padding-x);
  border-left: var(--tag-border-width) solid var(--tag-border-color);
}

/* prevent overlapping tags on separate lines */
.markdown-preview-sizer div:has(.tag ~ br ~ .tag) {
  line-height: 2;
}

.cm-line:has(.cm-meta):has(+.cm-line .cm-meta) {
  padding-bottom: 6px;
}
ul:has(a.tag) [data-line],
ol:has(a.tag) [data-line]{
margin-bottom: 10px;
  margin-bottom: 10px;
}

And this takes care of the tag styling:

/* ---- default tag appearance ---- */
a.tag::before
{
  content: var(--tag-icon);
  margin-left: 4px;  
  font-family: var(--font-default) !important;
}
a.tag[href] {
  background-color: rgba(var(--tb), 0.15) !important;
  color: var(--text-normal) !important;
  border: 1px solid rgba(var(--tb), 0.4);
}
a.tag[href]:hover {
  border: 1.5px solid rgba(var(--tb), 0.3) !important;
  background-color: rgba(var(--tb), 0.2) !important;
}

/* ____ _ _ __ _ _ _ _ _ ____ */

/* THIS IS THE DEFAULT TAG! */
/* ____ _ _ __ _ _ _ _ _ ____ */
[href] {
  --tb: var(--color-yellow-rgb); /* The color variable is necessary. Any color you want. */
  --tag-icon: '🏷️'; /* <-- Default icon. You can remove this line if you want! */
}

Style the default tag however you like.

Then, you can create a bunch of custom tags, like this:

[href*='#lore'],
[href*='#history']{
  --tag-icon: '📜';
  --tb: var(--color-yellow-rgb);
}
[href*='#scrapped'] {
  --tag-icon: '🗑️';
  --tb: var(--callout-quote);
}
[href*='#draft'] {
  --tag-icon: '📑';
  --tb: var(--color-cyan-rgb);
}
[href*='#warm'] {
  --tag-icon: '🔆';
  --tb: var(--color-orange-rgb);
}
[href*='#cool'] {
  --tag-icon: '🧊';
  --tb: var(--color-blue-rgb);
}

tb stands for “tag background”. It can be any color (make sure it’s just the raw rgb values, like “120, 120, 120”).

Put this all into one snippet and BAM. Kind of close to the plugin, I think.

zettelstraum · August 24, 2023, 4:40pm

OH WOW!

This is fantastic.

Is there a way to also set the font color?

EDIT:
Also, what about dark/light theme?
Is there a smart way to deal with it?

PS
what theme are you using?

zettelstraum · August 24, 2023, 5:12pm

Huh!

For some reason, it does not work at all for me.

I guess the screen you posted above was from yours. Is there anything that keeps the snippet from acting on my side?

I deactivated all snippets that target properties, there are notmuch anyway.

Just to clarify:

}
[href*='#draft'] {
  --tag-icon: '📑';
  --tb: var(--color-cyan-rgb);

This is for my custom tag, and for #draft, I would replace #my-custom-tag?
Or do I need to leave out the hash? I tried both anyway…

zettelstraum · August 24, 2023, 5:21pm

I found out what is the reason:
The snippet appartently only targets inline code containing a ‘#’

Is there a way to make these work with

frontmatter tags
custom frontmatter properties

?

Thank you so much again. This is getting very close!!!

EDIT:

/* comment here */ With help by Roam, 

.metadata-property[data-property-key="tags"] .multi-select-pill{
  background: maroon;
  color: white;
}
.metadata-property[data-property-key="theme"] .multi-select-pill{
  background: blue;
  color: white;
}

This snippet here picked up both tags and the custom tag (theme). Maybe it is possible to merge the two

Bluemoondragon07 · September 6, 2023, 12:45am

Sorry for the late reply. You can deal with light and dark mode like by adding .theme-dark or .theme-light to the beginning of each element. Like:

.theme-light [href*='#cool'] {
  --tag-icon: '🧊';
  --tb: var(--color-blue-rgb);
}
.theme-dark [href*='#cool'] {
  --tag-icon: '❄️';
  --tb: var(--color-blue-rgb);
}

Now the icon will be in dark mode and in light mode.

Bluemoondragon07 · September 6, 2023, 12:45am

Also, the Serenity theme with Solarized color scheme set in settings.

Bluemoondragon07 · September 6, 2023, 12:51am

You might be interested in the Property Enhancer plugin, which you can install now with the BRAT plugin.

To use it, CTRL + Click the property icon. Then you can choose an emoji or lucide icon for the property. Here’s what it looks like:

zettelstraum · September 6, 2023, 2:26pm

Ahh, the property enhancer is GREAT, thanks a lot for the tip!

Also: THANK YOU for the theme settings addition!

As for the color codes for properties:
It seems this is only possible as a color code per property type.

Do you see any way to differentiate individual tags?
I mean in a way that would give these two tags an individual color:

#projects
#books

Just to clarify: This DOES work with inline tags but not with the ones in frontmatter

mstuebner · December 2, 2023, 11:54pm

Do I get this right that a tag #cool should get this color and this icon? I can set attributes of a default tag, but not a specific one. Also, what ever I set for --tag-icon, it doesn’t show up. Any more hints?

Bluemoondragon07 · December 3, 2023, 4:05pm

That should be correct. I am unsure as to why it wouldn’t work. You could try these things:

Try putting it at the very bottom of the CSS file
Try adding !important to the values.
Make sure there’s not a duplicate [href*='cool'] that could be interfering.

Also, make sure you have the whole snippet, not just the [href] variables.

system · March 2, 2024, 4:05pm

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.