Links
The default hyperlink style is a dotted underline that turns into a solid underline on :hover.
<a href="https://gomakethings.com">Learn more at Go Make Things.</a>You can create a link without the underline using the .link-subtle class. A solid underline appears on :hover.
You can adjust the color and style in the kelp.theme cascade layer.
@layer kelp.theme {
/* Default Light Theme */
:where(:root),
.kelp-theme-light {
--color-text-link: var(--color-blue-50);
--color-text-link-hover: var(--color-blue-40);
--decoration-text-link: underline dotted;
--decoration-text-link-hover: underline;
}
/* Dark Theme */
.kelp-theme-dark {
--color-text-link: var(--color-blue-70);
--color-text-link-hover: var(--color-blue-80);
}
}The theme builder will automatically set the link color variables to your chosen primary color.