Style adjustments in prep for dark mode support (#1908)

assets/js/click-to-copy.js

@@ -19,7 +19,6 @@ for (let index = 0; index < codeListings.length; index++) {
     'fas',
     'fa-copy',
     'btn',
-    'btn-dark',
     'btn-sm',
     'td-click-to-copy'
   );

assets/scss/_alerts.scss

@@ -2,7 +2,6 @@
 
 .alert {
   font-weight: $font-weight-medium;
-  background: $white;
   color: inherit;
   border-radius: 0;
 

assets/scss/_code.scss

@@ -1,10 +1,12 @@
 // Code formatting.
 
+@include color-mode(dark, true) {
+  --td-pre-bg: #{adjust-color($gray-900, $lightness: -2.5%)};
+}
+
 .td-content {
   // Highlighted code.
   .highlight {
-    @extend .card;
-
     margin: 2rem 0;
     padding: 0;
     position: relative;
@@ -24,10 +26,11 @@
       button.td-click-to-copy {
         position: absolute;
         color: $gray-400;
-        border-radius: 3px;
         border-width: 0;
-        background-color: inherit;
-        box-shadow: 1px 1px $gray-400;
+        background-color: transparent;
+        background-image: none;
+        --bs-btn-box-shadow: 0;
+        padding: var(--bs-btn-padding-y) calc(var(--bs-btn-padding-x) / 2);
         right: 4px;
         top: 2px;
 
@@ -53,7 +56,7 @@
     margin: 0;
     font-size: 85%;
     word-break: normal;
-    background-color: rgba($black, 0.05);
+    background-color: var(--td-pre-bg);
     border-radius: $border-radius;
 
     br {
@@ -64,7 +67,9 @@
   // Code blocks
   pre {
     word-wrap: normal;
-    background-color: $gray-100;
+    background-color: var(--td-pre-bg);
+    border: solid var(--bs-border-color);
+    border-width: 1px;
     padding: $spacer;
 
     > code {

assets/scss/_sidebar-toc.scss

@@ -46,7 +46,7 @@
     }
 
     a {
-      color: $gray-600;
+      color: var(--bs-secondary-color);
 
       &:focus,
       &:hover {

assets/scss/_sidebar-tree.scss

@@ -62,7 +62,7 @@
     }
 
     a {
-      color: $gray-900;
+      color: var(--bs-emphasis-color);
     }
   }
 
@@ -71,7 +71,7 @@
     padding-bottom: 0.375rem;
 
     &__page {
-      color: $gray-700;
+      color: var(--bs-body-color);
       font-weight: $font-weight-light;
     }
   }
@@ -133,7 +133,7 @@
 
   &__toggle {
     line-height: 1;
-    color: $gray-900;
+    color: var(--bs-emphasis-color);
     margin: 1rem;
   }
 

assets/scss/_variables.scss

@@ -19,6 +19,11 @@ $dark: #403f4c !default;  // TODO: consider using BS value
 
 $code-color: shade-color($secondary, 40%) !default;
 
+:root,
+[data-bs-theme="light"] {
+  --td-pre-bg: var(--bs-tertiary-bg);
+}
+
 // UI element colors
 
 $border-color: $gray-300 !default;

userguide/content/en/docs/get-started/other-options.md

@@ -51,7 +51,7 @@ and may not be up-to-date with the most recent Hugo version.
 
 If you've already installed Hugo, check your version:
 
-```
+```sh
 hugo version
 ```
 
@@ -66,18 +66,21 @@ The following shows you how to install Hugo from the release page:
 3.  Download the latest extended version
     (`hugo_extended_0.9X_Linux-64bit.tar.gz`).
 4.  Create a new directory:
-
-        mkdir hugo
+    ```sh
+    mkdir hugo
+    ```
 
 5.  Extract the files you downloaded to `hugo`.
 
 6.  Switch to your new directory:
-
-        cd hugo
+    ```sh
+    cd hugo
+    ```
 
 7.  Install Hugo:
-
-        sudo install hugo /usr/bin
+    ```sh
+    sudo install hugo /usr/bin
+    ```
 
 #### On macOS
 
@@ -90,7 +93,7 @@ You can install Hugo as an NPM module using
 [hugo-extended](https://www.npmjs.com/package/hugo-extended). To install the
 extended version of Hugo:
 
-```
+```sh
 npm install hugo-extended --save-dev
 ```
 
@@ -130,7 +133,7 @@ release][latest-lts].
 
 From your project root, run this command:
 
-```
+```sh
 npm install --save-dev autoprefixer postcss-cli
 ```
 

userguide/hugo.yaml

@@ -43,6 +43,7 @@ markup:
     renderer:
       unsafe: true
   highlight:
+    noClasses: false
     style: tango
 
 params: