CSS Variables: Colorify Links Based on Surrounding Color

#1

Why TW does not use of CSS variables?

in a tiddler put the below snippet:

\rules except dash
<style>
a {
  color: var(--bs-link-color);
  text-decoration: underline;
}
.myred {
--bs-link-color: red;
 color:var(--bs-link-color);
}
.mygreen {
--bs-link-color: green;
color:var(--bs-link-color);
}
</style>

<div class=myred>
This is a test <a>Carla</a>
</div>

<div class=mygreen>
This is a test <a>Carla</a>
</div>

image

This example shows how use inheritance for link color

2 Likes
#2

Variation that yields color-matched background effect as style for links:

image

\rules except dash
<style>
a {
  color:rgba(var(--red-val),var(--green-val),var(--blue-val),1)!important;
  background-color: rgba(var(--red-val),var(--green-val),var(--blue-val),.2);
  padding: 1px 2px 0px 2px;
  text-decoration: none;
}

.myred {
--red-val: 255;
--green-val: 50;
--blue-val: 50;
 color:rgba(var(--red-val),var(--green-val),var(--blue-val),1);
}
.mygreen {
--red-val: 20;
--green-val: 180;
--blue-val: 20;
color:rgba(var(--red-val),var(--green-val),var(--blue-val),1);
}
.mybluebeige {
background-color:beige; padding: .5em;
--red-val: 80;
--green-val: 80;
--blue-val: 250;
color:rgba(var(--red-val),var(--green-val),var(--blue-val),1);
}

</style>

@@.myred
Red text with link to [[$:/core/ui/SideBar/Open]]
@@

@@.mygreen Green text and [[link|$:/core/ui/SideBar/Open]]@@  — 
 @@.mybluebeige Blue-on-beige with [[link|$:/core/ui/SideBar/Open]] @@

Thanks, @Mohammad!

2 Likes
#3

This is great, thanks ! Until now I had to use this:

\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline html

which is much more limiting.

1 Like