Utilize SCSS and JavaScript to implement dynamic color variations and opacity adjustments

Question

Utilize SCSS and JavaScript to implement dynamic color variations and opacity adjustments

I am working on a feature where users can personalize the theme by selecting their own colors from a dropdown menu. My task as a developer is to apply different shades based on the chosen color.

For example, if the user chooses Green, I would use solid Green for the primary header, Green with 60% opacity for table headers, and Green with 50% opacity for active/selected table rows.

I have attempted the following approach, but passing a variable to RGBA does not seem to impact the background color:

CSS

:root {
    --color: #008000;
    --alpha: 0.5;
}

#primary-header{
    background-color: rgba(var(--color));
}

#table-header{
    background-color: rgba(var(--color), var(--alpha));
}

javascript html css

Answer 1

Answer №1

It seems like you are looking to dynamically manipulate CSS using JavaScript.
Check out this live example that demonstrates how you can change the color and opacity of CSS variables.

<!DOCTYPE html>
<html>
  <head>
    <style>
    :root {
    --currentColor: orange;
    --op: 0.9;
}
a {
  color: var(--currentColor)
  opacity: var(--op);
}
div {
  width: 100px;
  height: 100px;
  background-color: var(--currentColor);
  opacity: var(--op);
}
    </style>
  </head>
  <body>
    <select id="combo" onchange="changeColor()">
      <option>orange
      </option>
      <option>green
      </option>
      <option>red
      </option>
      <option>blue
      </option>
    </select>
    <div>
    </div>
    <select select id="combo2" onchange="changeColor()">
      <option>0.9</option>
      <option>0.8</option>
      <option>0.1</option>
      <option>0.5</option>
    </select>
    <script>
      function changeColor()
      {
        // get the color value from the select control
        var color = document.getElementById("combo").value;
        // apply css change
        document.documentElement.style.setProperty('--currentColor', color);
        // get the opacity value from the select control
        var color = document.getElementById("combo2").value;
        // apply css change
        document.documentElement.style.setProperty('--op', color);
      }
    </script>
  </body>
</html>

Answer 2

It seems like you are looking to dynamically manipulate CSS using JavaScript.
Check out this live example that demonstrates how you can change the color and opacity of CSS variables.

<!DOCTYPE html>
<html>
  <head>
    <style>
    :root {
    --currentColor: orange;
    --op: 0.9;
}
a {
  color: var(--currentColor)
  opacity: var(--op);
}
div {
  width: 100px;
  height: 100px;
  background-color: var(--currentColor);
  opacity: var(--op);
}
    </style>
  </head>
  <body>
    <select id="combo" onchange="changeColor()">
      <option>orange
      </option>
      <option>green
      </option>
      <option>red
      </option>
      <option>blue
      </option>
    </select>
    <div>
    </div>
    <select select id="combo2" onchange="changeColor()">
      <option>0.9</option>
      <option>0.8</option>
      <option>0.1</option>
      <option>0.5</option>
    </select>
    <script>
      function changeColor()
      {
        // get the color value from the select control
        var color = document.getElementById("combo").value;
        // apply css change
        document.documentElement.style.setProperty('--currentColor', color);
        // get the opacity value from the select control
        var color = document.getElementById("combo2").value;
        // apply css change
        document.documentElement.style.setProperty('--op', color);
      }
    </script>
  </body>
</html>

Utilize SCSS and JavaScript to implement dynamic color variations and opacity adjustments

Answer №1

Similar questions

Execute jQuery code only when a child element within the parent container is clicked

I am struggling to access the input file data in my controller while attempting to send it over AJAX

Utilizing ASCX to trigger JavaScript functions within an ASPX page

Unable to assign a value to the HTMLInputElement's property: The input field can only be set to a filename or an empty string programmatically

You have encountered an error: [ERR_HTTP_HEADERS_SENT]. This means that you cannot set headers after they have already been sent to the client, even if a return

What is the reason for Nightwatch running each .js file as a Child process? Could it be due to alterations in the configuration settings

ways to change the font color style of a header element using css

Looking to loop through the JSON objects saved in an array of JSON data in local storage

Define the term "Parse Error" as it pertains to CSS

What is the best way to show a specific range of months in the primeng calendar (p-calendar)?

Retaining the initial div container and removing all others that match the specified search criteria

Tips for creating case-insensitive query string values in angularjs?

Which is better for creating a partial panoramic view: iPhone panorama, three.js, or Pannellum

Is there a way to incorporate electron methods within Svelte files, specifically in Svelte 3, or is there an alternative approach to achieve this integration?

problem when using directive $compile with encapsulating HTML

utilizing PhoneGap for transforming a website into a mobile application

Tips for getting rid of NavLink styling when Routes are not selected

Lazy loading images using the lazysizes plugin allows the browser to calculate the total page size without waiting for the images to

Step-by-step guide on uploading a template in unlayer-react-email-editor

Combine all div elements to create a unified image and then proceed to save it as a jpg file before uploading to the server