How to dynamically make the selected color darker












4














I have a table display on HTML for my selected data and the table colors is can be dynamically change through my settings module. Now I want to make the table header darker color than the table row.



e.g: If I select the color red the table row will be red and the table header will be dark red.



How can I do that? Is this possible? or I need to set a fix condition for each color?










share|improve this question






















  • what version of angular are you using?
    – Microsmsm
    Nov 21 at 2:56










  • @Microsmsm I'm using AngularJS v1.6.9
    – Richard Calumpang
    Nov 21 at 2:59


















4














I have a table display on HTML for my selected data and the table colors is can be dynamically change through my settings module. Now I want to make the table header darker color than the table row.



e.g: If I select the color red the table row will be red and the table header will be dark red.



How can I do that? Is this possible? or I need to set a fix condition for each color?










share|improve this question






















  • what version of angular are you using?
    – Microsmsm
    Nov 21 at 2:56










  • @Microsmsm I'm using AngularJS v1.6.9
    – Richard Calumpang
    Nov 21 at 2:59
















4












4








4







I have a table display on HTML for my selected data and the table colors is can be dynamically change through my settings module. Now I want to make the table header darker color than the table row.



e.g: If I select the color red the table row will be red and the table header will be dark red.



How can I do that? Is this possible? or I need to set a fix condition for each color?










share|improve this question













I have a table display on HTML for my selected data and the table colors is can be dynamically change through my settings module. Now I want to make the table header darker color than the table row.



e.g: If I select the color red the table row will be red and the table header will be dark red.



How can I do that? Is this possible? or I need to set a fix condition for each color?







html angularjs






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 21 at 2:45









Richard Calumpang

778




778












  • what version of angular are you using?
    – Microsmsm
    Nov 21 at 2:56










  • @Microsmsm I'm using AngularJS v1.6.9
    – Richard Calumpang
    Nov 21 at 2:59




















  • what version of angular are you using?
    – Microsmsm
    Nov 21 at 2:56










  • @Microsmsm I'm using AngularJS v1.6.9
    – Richard Calumpang
    Nov 21 at 2:59


















what version of angular are you using?
– Microsmsm
Nov 21 at 2:56




what version of angular are you using?
– Microsmsm
Nov 21 at 2:56












@Microsmsm I'm using AngularJS v1.6.9
– Richard Calumpang
Nov 21 at 2:59






@Microsmsm I'm using AngularJS v1.6.9
– Richard Calumpang
Nov 21 at 2:59














2 Answers
2






active

oldest

votes


















3














You could try using transparency






table {
background-color: red;
border-collapse: collapse;
}

th {
background-color: rgba(0, 0, 0, 0.2);
padding: 8px;
}

<table>
<tr>
<th>1 H</th>
<th>2 H</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>








share|improve this answer





























    2














    You can use the SASS darken function.



    Here is an example.



    $linkcolour: red;

    table {
    background-color: $linkcolour;
    }
    thead{
    background-color: darken($linkcolour, 30%);
    }





    share|improve this answer























      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53404599%2fhow-to-dynamically-make-the-selected-color-darker%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      3














      You could try using transparency






      table {
      background-color: red;
      border-collapse: collapse;
      }

      th {
      background-color: rgba(0, 0, 0, 0.2);
      padding: 8px;
      }

      <table>
      <tr>
      <th>1 H</th>
      <th>2 H</th>
      </tr>
      <tr>
      <td>1</td>
      <td>2</td>
      </tr>
      <tr>
      <td>3</td>
      <td>4</td>
      </tr>
      </table>








      share|improve this answer


























        3














        You could try using transparency






        table {
        background-color: red;
        border-collapse: collapse;
        }

        th {
        background-color: rgba(0, 0, 0, 0.2);
        padding: 8px;
        }

        <table>
        <tr>
        <th>1 H</th>
        <th>2 H</th>
        </tr>
        <tr>
        <td>1</td>
        <td>2</td>
        </tr>
        <tr>
        <td>3</td>
        <td>4</td>
        </tr>
        </table>








        share|improve this answer
























          3












          3








          3






          You could try using transparency






          table {
          background-color: red;
          border-collapse: collapse;
          }

          th {
          background-color: rgba(0, 0, 0, 0.2);
          padding: 8px;
          }

          <table>
          <tr>
          <th>1 H</th>
          <th>2 H</th>
          </tr>
          <tr>
          <td>1</td>
          <td>2</td>
          </tr>
          <tr>
          <td>3</td>
          <td>4</td>
          </tr>
          </table>








          share|improve this answer












          You could try using transparency






          table {
          background-color: red;
          border-collapse: collapse;
          }

          th {
          background-color: rgba(0, 0, 0, 0.2);
          padding: 8px;
          }

          <table>
          <tr>
          <th>1 H</th>
          <th>2 H</th>
          </tr>
          <tr>
          <td>1</td>
          <td>2</td>
          </tr>
          <tr>
          <td>3</td>
          <td>4</td>
          </tr>
          </table>








          table {
          background-color: red;
          border-collapse: collapse;
          }

          th {
          background-color: rgba(0, 0, 0, 0.2);
          padding: 8px;
          }

          <table>
          <tr>
          <th>1 H</th>
          <th>2 H</th>
          </tr>
          <tr>
          <td>1</td>
          <td>2</td>
          </tr>
          <tr>
          <td>3</td>
          <td>4</td>
          </tr>
          </table>





          table {
          background-color: red;
          border-collapse: collapse;
          }

          th {
          background-color: rgba(0, 0, 0, 0.2);
          padding: 8px;
          }

          <table>
          <tr>
          <th>1 H</th>
          <th>2 H</th>
          </tr>
          <tr>
          <td>1</td>
          <td>2</td>
          </tr>
          <tr>
          <td>3</td>
          <td>4</td>
          </tr>
          </table>






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 21 at 3:04









          Jack Stoller

          468110




          468110

























              2














              You can use the SASS darken function.



              Here is an example.



              $linkcolour: red;

              table {
              background-color: $linkcolour;
              }
              thead{
              background-color: darken($linkcolour, 30%);
              }





              share|improve this answer




























                2














                You can use the SASS darken function.



                Here is an example.



                $linkcolour: red;

                table {
                background-color: $linkcolour;
                }
                thead{
                background-color: darken($linkcolour, 30%);
                }





                share|improve this answer


























                  2












                  2








                  2






                  You can use the SASS darken function.



                  Here is an example.



                  $linkcolour: red;

                  table {
                  background-color: $linkcolour;
                  }
                  thead{
                  background-color: darken($linkcolour, 30%);
                  }





                  share|improve this answer














                  You can use the SASS darken function.



                  Here is an example.



                  $linkcolour: red;

                  table {
                  background-color: $linkcolour;
                  }
                  thead{
                  background-color: darken($linkcolour, 30%);
                  }






                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited Nov 21 at 3:08

























                  answered Nov 21 at 3:02









                  Maarti

                  1,4702822




                  1,4702822






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.





                      Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                      Please pay close attention to the following guidance:


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53404599%2fhow-to-dynamically-make-the-selected-color-darker%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      404 Error Contact Form 7 ajax form submitting

                      How to know if a Active Directory user can login interactively

                      TypeError: fit_transform() missing 1 required positional argument: 'X'