title: Rmarkdown color headers of floating TOC using external custom css file
body: <p>I am using a .rmd file to generate a .html file. I have a floating TOC inside that html and I would like to color the headers inside that TOC using an external custom.css</p>
  
  <p>I can color the headers using only latex for now, which I would like to avoid this workaround.</p>
  
  <p>This would be my rmarkdown .rmd file where I'm referencing an external css file named 'style.css'.
  I have left a latex syntax that colors the last header.</p>
  
  <pre><code>---
  title: "Notebook title"
  output:
    html_document:
      css: style.css
      number_sections: false
      toc: true
      toc_depth: 4
      toc_float: true
  ---
  
  # H1
  ## H2
  ### H3
  # $\color{#B6854D}{\text{H1 colored with Latex}}$ {-}
  </code></pre>
  
  <p>The below is my customer 'style.css' file that I would like to color the TOC header contents. You can see that I have tweaked the TOC width referencing the #TOC id.</p>
  
  <pre><code>#TOC {
    position: fixed;
    left: 30px;
    width: 440px;
    max-width:100%;
    overflow:auto;
  }
  
  h1.title {
    color: #66b2b2;
  }
  
  h1 {
    color: #B6854D;
  }
  
  h2 {
    color: #F4B5BD;
  }
  </code></pre>
  
  <p>The output will be as follows:
  <img src="https://imgur.com/6wHp6p4" alt="TOCt"></p>
  
  <p>Inspecting the colored H1 element using latex in .html file I have found the following:</p>
  
  <pre><code>&lt;li class="tocify-item list-group-item active" data-unique="(color{b6854d}{text{h1_colored_with_latex}})" style="cursor: pointer;"&gt;&lt;span class="math inline"&gt;&lt;span class="MathJax_Preview" style="color: inherit; display: none;"&gt;&lt;/span&gt;&lt;span class="MathJax" id="MathJax-Element-1-Frame" tabindex="0" data-mathml="&lt;math xmlns=&amp;quot;http://www.w3.org/1998/Math/MathML&amp;quot;&gt;&lt;mstyle mathcolor=&amp;quot;#B6854D&amp;quot;&gt;&lt;mtext&gt;H1 colored with Latex&lt;/mtext&gt;&lt;/mstyle&gt;&lt;/math&gt;" role="presentation" style="position: relative;"&gt;&lt;nobr aria-hidden="true"&gt;&lt;span class="math" id="MathJax-Span-1" style="width: 11.432em; display: inline-block;"&gt;&lt;span style="display: inline-block; position: relative; width: 9.527em; height: 0px; font-size: 120%;"&gt;&lt;span style="position: absolute; clip: rect(1.313em, 1009.53em, 2.384em, -999.997em); top: -2.199em; left: 0em;"&gt;&lt;span class="mrow" id="MathJax-Span-2"&gt;&lt;span class="mstyle" id="MathJax-Span-3" style="color: rgb(182, 133, 77);"&gt;&lt;span class="mrow" id="MathJax-Span-4" style="color: rgb(182, 133, 77);"&gt;&lt;span class="mtext" id="MathJax-Span-5" style="font-family: MathJax_Main; color: rgb(182, 133, 77);"&gt;H1 colored with Latex&lt;/span&gt;&lt;/span&gt;
      &lt;/span&gt;
      &lt;/span&gt;&lt;span style="display: inline-block; width: 0px; height: 2.205em;"&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;/span&gt;&lt;span style="display: inline-block; overflow: hidden; vertical-align: -0.068em; border-left: 0px solid; width: 0px; height: 1.004em;"&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;/nobr&gt;&lt;span class="MJX_Assistive_MathML" role="presentation"&gt;&lt;math xmlns="http://www.w3.org/1998/Math/MathML"&gt;&lt;mstyle mathcolor="#B6854D"&gt;&lt;mtext&gt;H1 colored with Latex&lt;/mtext&gt;&lt;/mstyle&gt;&lt;/math&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;script type="math/tex" id="MathJax-Element-1"&gt;\color{#B6854D}{\text{H1 colored with Latex}}&lt;/script&gt;
      &lt;/span&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>You can see how the hexa-color 'b6854d' I wrote using latex.</p>