feat: add dark theme

dotnet · Mar 11, 2023 · bbaa538 · bbaa538
1 parent 09393f9
commit bbaa538
Show file tree

Hide file tree

Showing 11 changed files with 77 additions and 95 deletions.
diff --git a/templates/modern/layout/_master.tmpl b/templates/modern/layout/_master.tmpl
@@ -29,7 +29,7 @@
 
   {{^redirect_url}}
   <body data-layout="{{layout}}">
-    <header class="border-bottom">
+    <header class="border-bottom bg-body">
       <nav id="autocollapse" class="navbar navbar-expand-md" role="navigation">
         <div class="container-xxl flex-nowrap">
           <a class="navbar-brand" href="{{_rel}}index.html">
@@ -78,14 +78,9 @@
 
         {{^_disableContribution}}
         <div class="contribution d-print-none">
-          <ul>
-            {{#docurl}}
-            <li><a href="{{docurl}}" class="contribution-link">{{__global.improveThisDoc}}</a></li>
-            {{/docurl}}
-            {{#sourceurl}}
-            <li><a href="{{sourceurl}}" class="contribution-link">{{__global.viewSource}}</a></li>
-            {{/sourceurl}}
-          </ul>
+          {{#docurl}}
+          <a href="{{docurl}}" class="edit-link">Edit this page</a>
+          {{/docurl}}
         </div>
         {{/_disableContribution}}
       </div>
@@ -99,7 +94,7 @@
     <div class="container-xxl search-results" id="search-results"></div>
     {{/_enableSearch}}
 
-    <footer>
+    <footer class="border-top">
       <div class="container-xxl">
         {{>partials/footer}}
       </div>

diff --git a/templates/modern/src/docfx.scss b/templates/modern/src/docfx.scss
@@ -11,6 +11,14 @@ $container-max-widths: (
 
 @import "bootstrap/scss/bootstrap.scss";
 
+@import "highlight.js/scss/github.scss";
+
+@include color-mode(dark) {
+  @import "highlight.js/scss/github-dark.scss";
+}
+
+@import "highlight.scss";
+
 h1,
 h2,
 h3,
@@ -38,6 +46,7 @@ article {
 
   img {
     max-width: 100%;
+    height: auto;
   }
 }
 
@@ -68,15 +77,18 @@ article {
   }
 }
 
-/* For code snippet line highlight */
-pre > code .line-highlight {
-  background-color: yellow;
+@mixin adjust-icon {
+  font-family: bootstrap-icons, sans-serif;
+  position: relative;
+  margin-right: 0.5em;
+  top: 0.2em;
+  font-size: 1.25em;
+  font-weight: normal;
 }
 
 @import "layout.scss";
 @import "nav.scss";
 @import "toc.scss";
 @import "markdown.scss";
 @import "search.scss";
-@import "highlight.scss";
 @import "dotnet.scss";
diff --git a/templates/modern/src/docfx.ts b/templates/modern/src/docfx.ts
@@ -9,7 +9,6 @@ import { enableSearch } from './search'
 import { renderToc } from './toc'
 import { renderBreadcrumb, renderInThisArticle, renderNavbar } from './nav'
 
-import 'highlight.js/scss/github.scss'
 import 'bootstrap-icons/font/bootstrap-icons.scss'
 import './docfx.scss'
 
@@ -24,7 +23,6 @@ declare global {
 }
 
 window.docfx = {}
-
 document.addEventListener('DOMContentLoaded', function() {
   highlight()
   enableSearch()

diff --git a/templates/modern/src/highlight.scss b/templates/modern/src/highlight.scss
@@ -2,3 +2,18 @@
  * Copyright (c) Microsoft Corporation. All Rights Reserved.
  * Licensed under the MIT License. See License.txt in the project root for license information.
 */
+
+.hljs {
+  background-color: #f5f5f5;
+}
+
+/* For code snippet line highlight */
+pre > code .line-highlight {
+  background-color: yellow;
+}
+
+@include color-mode(dark) {
+  pre > code .line-highlight {
+    background-color: #4a4a00;
+  }
+}
diff --git a/templates/modern/src/layout.scss b/templates/modern/src/layout.scss
@@ -12,7 +12,6 @@ $main-padding-bottom: 4rem;
 @mixin sticky-top($top: 0) {
   position: sticky;
   top: $top;
-  background-color: $body-bg;
 
   @if $top == 0 {
     z-index: 1030;
@@ -52,7 +51,6 @@ body[data-layout="landing"] {
     display: flex;
     padding: 1rem 0;
     height: $footer-height;
-    border-top: 1px solid $border-color;
   }
 
   >main {
@@ -136,7 +134,6 @@ body[data-layout="landing"] {
 
         >.content {
           min-width: 0;
-          margin: 0 0 4rem;
           padding-bottom: $main-padding-bottom;
 
           >.actionbar {

diff --git a/templates/modern/src/markdown.scss b/templates/modern/src/markdown.scss
@@ -7,14 +7,11 @@
 .alert h5 {
   text-transform: uppercase;
   font-weight: bold;
-}
+  font-size: 1rem;
 
-.alert h5::before {
-  font-family: bootstrap-icons, sans-serif;
-  position: relative;
-  top: 3px;
-  margin-right: .5em;
-  font-weight: normal;
+  &::before {
+    @include adjust-icon;
+  }
 }
 
 .alert-info h5::before {

diff --git a/templates/modern/src/nav.scss b/templates/modern/src/nav.scss
@@ -13,64 +13,40 @@
   flex-wrap: nowrap;
 }
 
-div.contribution {
-  margin-bottom: 20px;
-}
-
-div.contribution > ul > li > a.contribution-link {
-  padding: 6px 10px;
-  font-weight: bold;
-  font-size: 14px;
-}
-
-div.contribution > ul > li > a.contribution-link:hover {
-  background-color: #fff;
+@include color-mode(dark) {
+  .form-control {
+    background-color: $body-secondary-bg-dark;
+  }
 }
 
 .affix {
-  font-size: 12px;
+  font-size: 14px;
 
   h5 {
-    font-weight: bold;
+    display: inline-block;
+    font-weight: 600;
     text-transform: uppercase;
-    padding-left: 10px;
-    font-size: 12px;
+    padding: 1em 0;
+    font-size: 1rem;
   }
 
-  > ul {
-    padding-bottom: 10px;
+  ul {
     flex-direction: column;
+    list-style-type: none;
+    padding-left: 0;
+    margin-left: 0;
   }
+}
 
-  li > a {
-    display: block;
-    padding: 0 .5em;
-    margin: .5em 0;
-    color: #666;
-    border-left: transparent solid 4px;
-
-    &:focus {
-      background: none;
-    }
-
-    &:hover {
-      background: none;
-      color: #666;
-    }
-
-    &.active {
-      color: #337ab7;
-      border-left: #337ab7 solid 4px;
-    }
+.contribution {
+  margin-top: 2rem;
 
-    li.active:last-child {
-      margin-bottom: 50px;
-    }
+  a.edit-link {
+    text-decoration: none;
 
-    &.active::before,
-    &:hover::before {
-      display: block;
-      white-space: nowrap;
+    &::before {
+      content: "\F4CA";
+      @include adjust-icon;
     }
   }
 }
diff --git a/templates/modern/src/nav.ts b/templates/modern/src/nav.ts
@@ -63,8 +63,8 @@ export function renderInThisArticle() {
   }
 
   const dom = html`
-    <h5>In this article</h5>
-    <ul>${Array.from(h2s).map(h2 => html`<li><a href="#${h2.id}">${h2.innerText}</a></li>`)}</ul>`
+    <h5 class="border-bottom">In this article</h5>
+    <ul>${Array.from(h2s).map(h2 => html`<li><a class="link-secondary" href="#${h2.id}">${h2.innerText}</a></li>`)}</ul>`
 
   render(dom, document.getElementById('affix'))
 }

diff --git a/templates/modern/src/toc.scss b/templates/modern/src/toc.scss
@@ -23,25 +23,15 @@ $expand-stub-width: 1.2rem;
   }
 
   li > a {
-    color: #666;
     display: inline;
     text-decoration: none;
 
     &:hover, &:focus {
-      color: #000;
       background: none;
       text-decoration: underline;
     }
   }
 
-  li.active > a {
-    color: #337ab7;
-
-    &:hover, &:focus {
-      color: #23527c;
-    }
-  }
-
   li > ul {
     display: none;
   }

diff --git a/templates/modern/src/toc.ts b/templates/modern/src/toc.ts
@@ -70,19 +70,20 @@ export async function renderToc(): Promise<TocNode[]> {
 
   function renderTocNodes(nodes: TocNode[]) {
     return html`<ul>${nodes.map(node => {
-      const { href, name, items } = node
+      const { href, name, items, expanded } = node
       const isLeaf = !items || items.length <= 0
-      const active = activeNodes.includes(node) ? 'active' : null
-      const expanded = node.expanded ? 'expanded' : null
 
       return html`
-        <li class=${classMap({ active, expanded })}>
+        <li class=${classMap({ expanded })}>
           ${isLeaf ? null : html`<span class='expand-stub' @click=${toggleExpand}></span>`}
-          ${href ? html`<a href=${href}>${name}</a>` : html`<a @click=${toggleExpand}>${name}</a>`}
+          ${href
+            ? html`<a class='${classMap({ 'nav-link': !activeNodes.includes(node) })}' href=${href}>${name}</a>`
+            : html`<a class='${classMap({ 'nav-link': !activeNodes.includes(node) })}' href='#' @click=${toggleExpand}>${name}</a>`}
           ${isLeaf ? null : html`<ul>${renderTocNodes(items)}</ul>`}
         </li>`
 
-      function toggleExpand() {
+      function toggleExpand(e) {
+        e.preventDefault()
         node.expanded = !node.expanded
         renderToc()
       }

diff --git a/test/docfx.Snapshot.Tests/SamplesTest.cs b/test/docfx.Snapshot.Tests/SamplesTest.cs
@@ -38,12 +38,12 @@ public class SamplesTest
             "restapi/petstore.html",
         };
 
-        private static readonly (int width, int height, bool fullPage)[] s_viewports = new[]
+        private static readonly (int width, int height, string theme, bool fullPage)[] s_viewports = new[]
         {
-            (1920, 1080, true),
-            (1152, 648, false),
-            (768, 600, false),
-            (375, 812, true),
+            (1920, 1080, "light", true),
+            (1152, 648, "light", false),
+            (768, 600, "dark", false),
+            (375, 812, "dark", true),
         };
 
         static SamplesTest()
@@ -94,7 +94,7 @@ public async Task SeedHtml()
 
             await s_viewports.ForEachInParallelAsync(async viewport =>
             {
-                var (width, height, fullPage) = viewport;
+                var (width, height, theme, fullPage) = viewport;
                 var isMobile = width < 500;
                 var page = await browser.NewPageAsync(new()
                 {
@@ -107,6 +107,7 @@ await s_viewports.ForEachInParallelAsync(async viewport =>
                 foreach (var url in s_screenshotUrls)
                 {
                     await page.GotoAsync($"http://localhost:{port}/{url}");
+                    await page.EvaluateAsync($"() => document.body.setAttribute('data-bs-theme', '{theme}')");
                     await page.WaitForFunctionAsync("window.docfx.ready");
                     await page.WaitForFunctionAsync("window.docfx.searchReady");