(docs) Fix bug with missing 'Show/Hide TOC' background styling in dar…

…k mode (#176)

Followup to #175, this implements some of the remaining parts of #174.

.vscode/settings.json

@@ -5,7 +5,9 @@
         "MSIL",
         "Per's",
         "Waka",
+        "darkfx",
         "hljs",
-        "sidetoc"
+        "sidetoc",
+        "steffen"
     ]
 }

Makefile

@@ -25,9 +25,12 @@ clean:
 docs-clean:
 	rm -rf _site
 
-docs: docfx/docfx.exe
+docs: docfx/docfx.exe docs/templates/darkerfx/styles/main.css
 	./docfx/docfx.exe docs/docfx.json
 
+docs/templates/darkerfx/styles/main.css: docs/templates/darkerfx/styles/main.scss
+	sass $< $(@)
+
 docs-autobuild:
 	while true; do find docs Makefile src -type f | entr -d bash -c 'scripts/time_it make docs' ; done
 

docs/templates/darkerfx/partials/toc.tmpl.partial

@@ -0,0 +1,10 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+<div class="sidenav hide-when-search">
+  <div class="toc-toggle">
+    <a class="btn toc-toggle collapse" data-toggle="collapse" href="#sidetoggle" aria-expanded="false" aria-controls="sidetoggle">Show / Hide Table of Contents</a>
+  </div>
+  <div class="sidetoggle collapse" id="sidetoggle">
+    <div id="sidetoc"></div>
+  </div>
+</div>

docs/templates/darkerfx/styles/main.scss

@@ -27,6 +27,8 @@ body.theme-dark {
     --theme-sidenav-border: #404040;
     --theme-sidenav-background: #2d2d30;
     --theme-sidenav-filter-background: #1d1d1d;
+    --theme-sidenav-toc-toggle-background: #1d1d1d;
+    --theme-sidenav-toc-toggle-hover: #fff;
     --theme-toc-hover: #fff;
     --theme-background: #2d2d30;
     --theme-body-background: #171717;
@@ -54,6 +56,8 @@ body.theme-light {
     --theme-sidenav-border: #e7e7e7;
     --theme-sidenav-background: #f1f1f1;
     --theme-sidenav-filter-background: #ffffff;
+    --theme-sidenav-toc-toggle-background: #f1f1f1;
+    --theme-sidenav-toc-toggle-hover: #337ab7;
     --theme-toc-hover: #4c4c4c;
     --theme-background: #ffffff;
     --theme-body-background: #ffffff;
@@ -138,8 +142,34 @@ article h4 {
     background-color: var(--theme-sidenav-background);
 }
 
+.sidenav {
+    background-color: var(--theme-sidenav-background);
+    padding-top: 0;
+}
+
+.sidenav>div.toc-toggle {
+    background-color: var(--theme-sidenav-toc-toggle-background);
+    margin: 0;
+    padding-top: 0px;
+}
+
+.sidenav a.toc-toggle {
+    color: var(--theme-navbar);
+}
+
+.sidenav a.toc-toggle:focus,
+.sidenav a.toc-toggle:hover {
+    color: var(--theme-sidenav-toc-toggle-hover);
+}
+
+.sidenav>.sidetoggle {
+    background-color: var(--theme-sidenav-background);
+}
+
 body.theme-dark {
-    button, a {
+
+    button,
+    a {
         color: #5999d8;
     }