-1

I work for a company that provides software for management, in the back end, you can configure the colour schemes to make the pages it creates suit the branding and images better.

Buttons have a gradient applied to them, consisting of a lighter and darker colour, the button CSS is below.

.btn-default {
   linear-gradient(to bottom,#9c8400 0%,#5f5000 100%)
}

What I would like to do is take the above gradient and keep the lighter colour the same but change the darker color to white, the lighter color is always the first color in the gradient, and then apply the resulting gradient to the body.

   linear-gradient(to bottom,#ffffff 0%,#9c8400 100%);

A previous response provided an answer that almost works but I need to flip the colors (light and dark colours need to be in each other's positions) and change the darker color to white.

const buttonStyle = window.getComputedStyle(button);
console.log(buttonStyle.backgroundImage);

document.body.style.backgroundImage = buttonStyle.backgroundImage;
Liam Nugent
  • 43
  • 1
  • 6
  • 1
    Check this answer out. It may be useful: https://stackoverflow.com/questions/15071062/using-javascript-to-edit-css-gradient – justDan Aug 01 '19 at 13:27
  • 1
    Possible duplicate of [Using JavaScript to edit CSS gradient](https://stackoverflow.com/questions/15071062/using-javascript-to-edit-css-gradient) – inputforcolor Aug 01 '19 at 13:32
  • 3
    Hey Liam. Unfortunately *" I don't want you guys to write a direct answer I would just like some pointers"* is not what StackOverflow is for. That question is much too broad and as such, it can't be adequately answered; how can we determine if a collection of pointers is "correct" or "incorrect"? Please edit your post to ask a direct, *specific* question, and include your attempts to solve the issue. – Tyler Roper Aug 01 '19 at 13:37

2 Answers2

2

You can fetch the style of your button and re-apply it like that:

const button = document.querySelector('.btn-default');
const buttonStyle = window.getComputedStyle(button);
console.log(buttonStyle.backgroundImage);

document.body.style.backgroundImage = buttonStyle.backgroundImage;
.btn-default {
   background: linear-gradient(to bottom,#9c8400 0%,#5f5000 100%)
}
<button class="btn-default">Hello</button>

If you need, you can parse buttonStyle.backgroundImage to extract the first color, then apply it wherever you want!

sjahan
  • 5,720
  • 3
  • 19
  • 42
0

I think the way you should handle this is to have your css property from JS, with the value #9c8400 coming from a variable, and then you'd apply it on your DOM. Every time you want to update the style, you'd just have to change the content of your variable and re-apply the custom CSS to your DOM element

Hope this helps you, I tried to not write direct answer like you asked :p

Ilphrin
  • 42
  • 5