Lighter Button Color on Hover

[odveci]

Hi guys,

I’m trying to adjust a theme to my liking and I’m having issues with finding the css variable for changing the button background color to a lighter shade when on hover.
I want it to be able to generate a lighter shade of the button color with any color that I choose for the button.

I’ve looked and looked and tried things, and couldn’t find the answer.

Thanks!

[ariehen]

I think if you share the theme you are working with and a screenshot or two of the button(s) you’d like to change, it will be easier for others to offer some assistance.

[odveci]

Thanks for the input!

The theme is Obsidianotion.
The mentioned buttons are the cyan-colored ones on the screenshot.

[ariehen]

Those particular buttons look like they are taken care of with this CSS:

@media (hover: hover) {
  button.mod-cta:hover {
    background-color: salmon;
  }
}

---

If you haven’t yet, I’d have a read though this topic:

Obsidian CSS Quick Guide

Obsidian CSS Quick Guide Hi friends! CSS in Obsidian can be confusing to get into, so this is a guide to get you started with information on the tools, methods, and some background knowledge! Let’s get started by looking at how you can look behind the curtain of Obsidian’s visuals. The Developer Console Obsidian is technically like a website. As such, you can view the source like any other browser. While you are inside the Obsidian window, you can press ctrl+shift+i to bring up the develope…

[odveci]

Thanks ariehen, but I know how to change the color on hover to a different one. What I’m after is for it to be automatically lighter (on hover) than its original color, without having to write exactly what color I want it change it to.
So let’s say that the button’s color is salmon to begin with, and then on hover it’s salmon but 50% lighter/lower opacity.
I want to be able to choose from any color for the buttons in the Style Settings and have the button always be automatically the same color but lighter on hover.
Hope that makes sense…

[ariehen]

Got it.

I thought maybe background-color: rgba(var(--interactive-accent-hover), 0.6); could be easy, but that doesn’t work with it not being rgb to begin with.

So, there’s probably a better way to do this (there always is), but following the trail from the original →

@media (hover: hover) {
  button.mod-cta:hover {
    background-color: var(--interactive-accent-hover);
  }
}

interactive-accent-hover → var(--color-accent-2); → there are two defined; one for the light theme and one for the dark theme:

.theme-light {
      --color-accent-2: hsl(calc(var(--accent-h) - 3), calc(var(--accent-s) * 1.02), calc(var(--accent-l) * 1.15));
}
.theme-dark {
      --color-accent-2: hsl(calc(var(--accent-h) - 5), calc(var(--accent-s) * 1.05), calc(var(--accent-l) * 1.29));
}

You could make a new one, let’s say --color-accent-3, for both theme modes and play around with the values until you get something you like. It’s worth a shot.

.theme-light {
      --color-accent-3: hsl(calc(var(--accent-h) - 2), calc(var(--accent-s) * 1.02), calc(var(--accent-l) * 1.30));
}
.theme-dark {
      --color-accent-3: hsl(calc(var(--accent-h) - 7), calc(var(--accent-s) * 0.55), calc(var(--accent-l) * 1.0));
}

@media (hover: hover) {
  button.mod-cta:hover {
    background-color: var(--color-accent-3);
  }
}