(How) can I reference a theme color in my inline CSS?

Question

I'm planning to use the "Preview Pane" list view style to create a much easier-to-maintain version of a carousel that's currently built in code. I've created a list with just a Title column and a Content column (enhanced rich text).

In the first list item, I've inserted the following as HTML:

<style type="text/css">
 tr.carousel-firstrow {
   background-color: orange;
   color: white;
 }
 tr.carousel-secondrow {
   background-color: green;
   color: white;
 }
 tr.carousel-thirdrow {
   background-color: blue;
   color: white;
 }
</style>
<table>
 <tbody>
  <tr class="carousel-firstrow">
   <td>
    <h2 class="ms-rteElement-H2" style="color: blue">​Title</h2>
    <p>Some descriptive text</p>
   </td>
  </tr>
  <tr class="carousel-secondrow">
   <td>second row of table text</td>
  </tr>
  <tr class="carousel-thirdrow">
   <td>third row of table text</td>
  </tr>
 </tbody>
</table>

But instead of defining the background colors statically, with orange/green/blue, I want to use the site's theme colors. Something like this:

/* Note: This syntax does not work, but illustrates my desired effect. */
tr.carousel-firstrow {
  background-color: Dark1;
  color: Accent3;
}

I found Inherit background color from SharePoint 2013 theme and How do I use ReplaceColor in Themes in SharePoint 2010 CSS, but from both of those it looks like that approach would only update my colors when I (re)apply the site theme. I would much rather be able to just edit my inline styling in real-time, so that if I want to change carousel-firstrow from using the Accent 3 color to using Accent 5 instead, I can just alter the HTML source and save to immediately see the change, instead of editing the HTML, then going to Site Settings to reapply the theme, then going back to the page to see the result (besides, I suspect that applying the theme wouldn't make a color replacement inside of a list item's RTE field anyway).

Is this possible?

Answer 1

From the way I interpret those posts, the syntax you want is

tr.carousel-firstrow {
    /* [ReplaceColor(themeColor:"Dark1")] */ background-color: #ABABAB; /* or any color, as it will be replaced */
    /* [ReplaceColor(themeColor:"Accent3")] */ color: #FFFFFF;
}

Those articles do seem to imply that the replacements occur when you actually apply a theme, so I don't know if it would get dynamically updated if you just changed the themeColor value in the "replacement" comment of your CSS.

Could be worth playing around with, though, maybe it would. (I have not actually tried any of that myself, yet, so I'm just speculating.)