Site improvements (#3967)

- Rejigger how callouts are rendered such that wide embedded text blocks don't cause
things to go haywire.

- Add a thin faint border around callouts, which provides some needed visual definition
without adding weight to the page.

- Fix long-standing bugs where the 'callout wiggle' affected not only the callout's icon,
but also the print/download/copy buttons of nested text blocks.

- Fix dark theme functionality which broke when I converted to TypeScript.

content/test/callouts/index.md

@@ -15,7 +15,7 @@ with two paragraphs
 {{< /warning >}}
 
 {{< warning >}}
-This is a warning
+This is a warning with a reasonably long sentence.
 
 with two paragraphs
 
@@ -25,6 +25,20 @@ A nested text block
 
 {{< /warning >}}
 
+{{< warning >}}
+This is a warning with some very long text to see how the wrapping behavior will be like since we've had problems in this area previously where wrapping would
+actually not take place
+{{< /warning >}}
+
+{{< warning >}}
+Very wide text block in a call out
+
+{{< text plain >}}
+Reeeeeaaaaaalllllllllly lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllong
+{{< /text >}}
+
+{{< /warning >}}
+
 {{< tip >}}
 This is a tip
 {{< /tip >}}

content_zh/docs/setup/kubernetes/install/helm/index.md

@@ -53,6 +53,7 @@ icon: helm
     {{< /text >}}
 
 1. 使用如下命令以确保全部 53 个 Istio CRD 被提交到 Kubernetes api-server：
+
     {{< warning >}}
     如果你启用了 cert-manager,那么 CRD 的数目为58个。
     {{< /warning >}}
@@ -140,6 +141,7 @@ $ helm template install/kubernetes/helm/istio --name istio --namespace istio-sys
     {{< /text >}}
 
 1. 使用如下命令以确保全部 53 个 Istio CRD 被提交到 Kubernetes api-server：
+
     {{< warning >}}
     如果你启用了 cert-manager,那么 CRD 的数目为58个。
     {{< /warning >}}

generated/js/themes_init.min.js

@@ -1,3 +1,3 @@
-"use strict";const darkThemeClass="dark-theme",darkTheme="Dark Theme",darkThemeItem="dark-theme-item",lightTheme="Light Theme",lightThemeItem="light-theme-item",styleCookie="style";function applyStyleSheet(a){a="dark"===a?darkTheme:lightTheme,a===darkTheme?document.body.classList.add(darkThemeClass):document.body.classList.remove(darkThemeClass);let b=document.getElementById(lightThemeItem);b&&(a===darkTheme?b.classList.remove(active):b.classList.add(active)),b=document.getElementById(darkThemeItem),b&&(a===darkTheme?b.classList.add(active):b.classList.remove(active))}function readCookie(a){const b=a+"=",d=document.cookie.split(";");for(let e of d){for(;" "===e.charAt(0);)e=e.substring(1,e.length);if(0===e.indexOf(b))return e.substring(b.length,e.length)}return null}let cookieValue=readCookie(styleCookie);applyStyleSheet(cookieValue);
+"use strict";const darkThemeClass="dark-theme",darkTheme="Dark Theme",darkThemeItem="dark-theme-item",lightTheme="Light Theme",lightThemeItem="light-theme-item",styleCookie="style";function applyStyleSheet(a){"dark"===a?a=darkTheme:"light"===a&&(a=lightTheme),a===darkTheme?document.body.classList.add(darkThemeClass):document.body.classList.remove(darkThemeClass);let b=document.getElementById(lightThemeItem);b&&(a===darkTheme?b.classList.remove(active):b.classList.add(active)),b=document.getElementById(darkThemeItem),b&&(a===darkTheme?b.classList.add(active):b.classList.remove(active))}function readCookie(a){const b=a+"=",d=document.cookie.split(";");for(let e of d){for(;" "===e.charAt(0);)e=e.substring(1,e.length);if(0===e.indexOf(b))return e.substring(b.length,e.length)}return null}let cookieValue=readCookie(styleCookie);applyStyleSheet(cookieValue);
 
 //# sourceMappingURL=themes_init.min.js.map

generated/js/themes_init.min.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ts/themes_init.ts"],"names":[],"mappings":"kBAcM,CAAA,cAAc,CAAG,Y,CACjB,SAAS,CAAG,Y,CACZ,aAAa,CAAG,iB,CAChB,UAAU,CAAG,a,CACb,cAAc,CAAG,kB,CACjB,WAAW,CAAG,O,CAEpB,QAAS,CAAA,eAAT,CAAyB,CAAzB,CAA6C,CAGrC,CAHqC,CAE3B,MAAV,GAAA,CAFqC,CAG7B,SAH6B,CAK7B,UAL6B,CAQrC,CAAK,GAAK,SAR2B,CASrC,QAAQ,CAAC,IAAT,CAAc,SAAd,CAAwB,GAAxB,CAA4B,cAA5B,CATqC,CAWrC,QAAQ,CAAC,IAAT,CAAc,SAAd,CAAwB,MAAxB,CAA+B,cAA/B,CAXqC,CAgBzC,GAAI,CAAA,CAAI,CAAG,QAAQ,CAAC,cAAT,CAAwB,cAAxB,CAAX,CACI,CAjBqC,GAkBjC,CAAK,GAAK,SAlBuB,CAmBjC,CAAI,CAAC,SAAL,CAAe,MAAf,CAAsB,MAAtB,CAnBiC,CAqBjC,CAAI,CAAC,SAAL,CAAe,GAAf,CAAmB,MAAnB,CArBiC,EAyBzC,CAAI,CAAG,QAAQ,CAAC,cAAT,CAAwB,aAAxB,CAzBkC,CA0BrC,CA1BqC,GA2BjC,CAAK,GAAK,SA3BuB,CA4BjC,CAAI,CAAC,SAAL,CAAe,GAAf,CAAmB,MAAnB,CA5BiC,CA8BjC,CAAI,CAAC,SAAL,CAAe,MAAf,CAAsB,MAAtB,CA9BiC,CAiC5C,CAED,QAAS,CAAA,UAAT,CAAoB,CAApB,CAAgC,MACtB,CAAA,CAAM,CAAG,CAAI,CAAG,GADM,CAEtB,CAAE,CAAG,QAAQ,CAAC,MAAT,CAAgB,KAAhB,CAAsB,GAAtB,CAFiB,CAG5B,IAAK,GAAI,CAAA,CAAT,GAAc,CAAA,CAAd,CAAkB,MACS,GAAhB,GAAA,CAAC,CAAC,MAAF,CAAS,CAAT,CADO,EAEV,CAAC,CAAG,CAAC,CAAC,SAAF,CAAY,CAAZ,CAAe,CAAC,CAAC,MAAjB,CAAJ,CAGJ,GAA0B,CAAtB,GAAA,CAAC,CAAC,OAAF,CAAU,CAAV,CAAJ,CACI,MAAO,CAAA,CAAC,CAAC,SAAF,CAAY,CAAM,CAAC,MAAnB,CAA2B,CAAC,CAAC,MAA7B,CAEd,CACD,MAAO,KACV,CAED,GAAI,CAAA,WAAW,CAAG,UAAU,CAAC,WAAD,CAA5B,CACA,eAAe,CAAC,WAAD,C","file":"themes_init.min.js","sourcesContent":["// Copyright 2019 Istio Authors\r//\r// Licensed under the Apache License, Version 2.0 (the \"License\");\r// you may not use this file except in compliance with the License.\r// You may obtain a copy of the License at\r//\r//     http://www.apache.org/licenses/LICENSE-2.0\r//\r// Unless required by applicable law or agreed to in writing, software\r// distributed under the License is distributed on an \"AS IS\" BASIS,\r// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r// See the License for the specific language governing permissions and\r// limitations under the License.\r\rconst darkThemeClass = \"dark-theme\";\rconst darkTheme = \"Dark Theme\";\rconst darkThemeItem = \"dark-theme-item\";\rconst lightTheme = \"Light Theme\";\rconst lightThemeItem = \"light-theme-item\";\rconst styleCookie = \"style\";\r\rfunction applyStyleSheet(theme: string | null): void {\r    // convert legacy cookie values\r    if (theme === \"dark\") {\r        theme = darkTheme;\r    } else {\r        theme = lightTheme;\r    }\r\r    if (theme === darkTheme) {\r        document.body.classList.add(darkThemeClass);\r    } else {\r        document.body.classList.remove(darkThemeClass);\r    }\r\r    // set the active theme menu item\r\r    let item = document.getElementById(lightThemeItem);\r    if (item) {\r        if (theme === darkTheme) {\r            item.classList.remove(active);\r        } else {\r            item.classList.add(active);\r        }\r    }\r\r    item = document.getElementById(darkThemeItem);\r    if (item) {\r        if (theme === darkTheme) {\r            item.classList.add(active);\r        } else {\r            item.classList.remove(active);\r        }\r    }\r}\r\rfunction readCookie(name: string): string | null {\r    const nameEQ = name + \"=\";\r    const ca = document.cookie.split(\";\");\r    for (let c of ca) {\r        while (c.charAt(0) === \" \") {\r            c = c.substring(1, c.length);\r        }\r\r        if (c.indexOf(nameEQ) === 0) {\r            return c.substring(nameEQ.length, c.length);\r        }\r    }\r    return null;\r}\r\rlet cookieValue = readCookie(styleCookie);\rapplyStyleSheet(cookieValue);\r"]}
+{"version":3,"sources":["../../src/ts/themes_init.ts"],"names":[],"mappings":"kBAcM,CAAA,cAAc,CAAG,Y,CACjB,SAAS,CAAG,Y,CACZ,aAAa,CAAG,iB,CAChB,UAAU,CAAG,a,CACb,cAAc,CAAG,kB,CACjB,WAAW,CAAG,O,CAEpB,QAAS,CAAA,eAAT,CAAyB,CAAzB,CAA6C,CAE3B,MAAV,GAAA,CAFqC,CAGrC,CAAK,CAAG,SAH6B,CAIpB,OAAV,GAAA,CAJ8B,GAKrC,CAAK,CAAG,UAL6B,EAQrC,CAAK,GAAK,SAR2B,CASrC,QAAQ,CAAC,IAAT,CAAc,SAAd,CAAwB,GAAxB,CAA4B,cAA5B,CATqC,CAWrC,QAAQ,CAAC,IAAT,CAAc,SAAd,CAAwB,MAAxB,CAA+B,cAA/B,CAXqC,CAgBzC,GAAI,CAAA,CAAI,CAAG,QAAQ,CAAC,cAAT,CAAwB,cAAxB,CAAX,CACI,CAjBqC,GAkBjC,CAAK,GAAK,SAlBuB,CAmBjC,CAAI,CAAC,SAAL,CAAe,MAAf,CAAsB,MAAtB,CAnBiC,CAqBjC,CAAI,CAAC,SAAL,CAAe,GAAf,CAAmB,MAAnB,CArBiC,EAyBzC,CAAI,CAAG,QAAQ,CAAC,cAAT,CAAwB,aAAxB,CAzBkC,CA0BrC,CA1BqC,GA2BjC,CAAK,GAAK,SA3BuB,CA4BjC,CAAI,CAAC,SAAL,CAAe,GAAf,CAAmB,MAAnB,CA5BiC,CA8BjC,CAAI,CAAC,SAAL,CAAe,MAAf,CAAsB,MAAtB,CA9BiC,CAiC5C,CAED,QAAS,CAAA,UAAT,CAAoB,CAApB,CAAgC,MACtB,CAAA,CAAM,CAAG,CAAI,CAAG,GADM,CAEtB,CAAE,CAAG,QAAQ,CAAC,MAAT,CAAgB,KAAhB,CAAsB,GAAtB,CAFiB,CAG5B,IAAK,GAAI,CAAA,CAAT,GAAc,CAAA,CAAd,CAAkB,MACS,GAAhB,GAAA,CAAC,CAAC,MAAF,CAAS,CAAT,CADO,EAEV,CAAC,CAAG,CAAC,CAAC,SAAF,CAAY,CAAZ,CAAe,CAAC,CAAC,MAAjB,CAAJ,CAGJ,GAA0B,CAAtB,GAAA,CAAC,CAAC,OAAF,CAAU,CAAV,CAAJ,CACI,MAAO,CAAA,CAAC,CAAC,SAAF,CAAY,CAAM,CAAC,MAAnB,CAA2B,CAAC,CAAC,MAA7B,CAEd,CACD,MAAO,KACV,CAED,GAAI,CAAA,WAAW,CAAG,UAAU,CAAC,WAAD,CAA5B,CACA,eAAe,CAAC,WAAD,C","file":"themes_init.min.js","sourcesContent":["// Copyright 2019 Istio Authors\r//\r// Licensed under the Apache License, Version 2.0 (the \"License\");\r// you may not use this file except in compliance with the License.\r// You may obtain a copy of the License at\r//\r//     http://www.apache.org/licenses/LICENSE-2.0\r//\r// Unless required by applicable law or agreed to in writing, software\r// distributed under the License is distributed on an \"AS IS\" BASIS,\r// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r// See the License for the specific language governing permissions and\r// limitations under the License.\r\rconst darkThemeClass = \"dark-theme\";\rconst darkTheme = \"Dark Theme\";\rconst darkThemeItem = \"dark-theme-item\";\rconst lightTheme = \"Light Theme\";\rconst lightThemeItem = \"light-theme-item\";\rconst styleCookie = \"style\";\r\rfunction applyStyleSheet(theme: string | null): void {\r    // convert legacy cookie values\r    if (theme === \"dark\") {\r        theme = darkTheme;\r    } else if (theme === \"light\") {\r        theme = lightTheme;\r    }\r\r    if (theme === darkTheme) {\r        document.body.classList.add(darkThemeClass);\r    } else {\r        document.body.classList.remove(darkThemeClass);\r    }\r\r    // set the active theme menu item\r\r    let item = document.getElementById(lightThemeItem);\r    if (item) {\r        if (theme === darkTheme) {\r            item.classList.remove(active);\r        } else {\r            item.classList.add(active);\r        }\r    }\r\r    item = document.getElementById(darkThemeItem);\r    if (item) {\r        if (theme === darkTheme) {\r            item.classList.add(active);\r        } else {\r            item.classList.remove(active);\r        }\r    }\r}\r\rfunction readCookie(name: string): string | null {\r    const nameEQ = name + \"=\";\r    const ca = document.cookie.split(\";\");\r    for (let c of ca) {\r        while (c.charAt(0) === \" \") {\r            c = c.substring(1, c.length);\r        }\r\r        if (c.indexOf(nameEQ) === 0) {\r            return c.substring(nameEQ.length, c.length);\r        }\r    }\r    return null;\r}\r\rlet cookieValue = readCookie(styleCookie);\rapplyStyleSheet(cookieValue);\r"]}

layouts/shortcodes/idea.html

@@ -1,9 +1,11 @@
-<aside class="callout idea">
-    <div class="type">
-        {{ partial "large_icon.html" "callout-idea" }}
-    </div>
-    <div class="content">
-        {{- $text := partial "strip_indent.html"  (dict "content" .Inner "pos" .Position) -}}
-        {{- $text | markdownify -}}
-    </div>
-</aside>
+<div>
+    <aside class="callout idea">
+        <div class="type">
+            {{ partial "large_icon.html" "callout-idea" }}
+        </div>
+        <div class="content">
+            {{- $text := partial "strip_indent.html"  (dict "content" .Inner "pos" .Position) -}}
+            {{- $text | markdownify -}}
+        </div>
+    </aside>
+</div>

layouts/shortcodes/quote.html

@@ -1,9 +1,11 @@
-<aside class="callout quote">
-    <div class="type">
-        {{ partial "large_icon.html" "callout-quote" }}
-    </div>
-    <div class="content">
-        {{- $text := partial "strip_indent.html" (dict "content" .Inner "pos" .Position) -}}
-        {{- $text | markdownify -}}
-    </div>
-</aside>
+<div>
+    <aside class="callout quote">
+        <div class="type">
+            {{ partial "large_icon.html" "callout-quote" }}
+        </div>
+        <div class="content">
+            {{- $text := partial "strip_indent.html" (dict "content" .Inner "pos" .Position) -}}
+            {{- $text | markdownify -}}
+        </div>
+    </aside>
+</div>

layouts/shortcodes/tip.html

@@ -1,9 +1,11 @@
-<aside class="callout tip">
-    <div class="type">
-        {{- partial "large_icon.html" "callout-tip" -}}
-    </div>
-    <div class="content">
-        {{- $text := partial "strip_indent.html" (dict "content" .Inner "pos" .Position) -}}
-        {{- $text | markdownify -}}
-    </div>
-</aside>
+<div>
+    <aside class="callout tip">
+        <div class="type">
+            {{- partial "large_icon.html" "callout-tip" -}}
+        </div>
+        <div class="content">
+            {{- $text := partial "strip_indent.html" (dict "content" .Inner "pos" .Position) -}}
+            {{- $text | markdownify -}}
+        </div>
+    </aside>
+</div>

layouts/shortcodes/warning.html

@@ -1,9 +1,11 @@
-<aside class="callout warning">
-    <div class="type">
-        {{ partial "large_icon.html" "callout-warning" }}
-    </div>
-    <div class="content">
-        {{- $text := partial "strip_indent.html" (dict "content" .Inner "pos" .Position) -}}
-        {{- $text | markdownify -}}
-    </div>
-</aside>
+<div>
+    <aside class="callout warning">
+        <div class="type">
+            {{ partial "large_icon.html" "callout-warning" }}
+        </div>
+        <div class="content">
+            {{- $text := partial "strip_indent.html" (dict "content" .Inner "pos" .Position) -}}
+            {{- $text | markdownify -}}
+        </div>
+    </aside>
+</div>

src/sass/base/_base.scss

@@ -298,7 +298,7 @@ blockquote {
 
     padding-left: 1em;
     padding-right: 1em;
-    background-color: $blockQuoteBackgroundColor;
+    background-color: $quoteCalloutBackgroundColor;
     border-radius: $border-radius;
 }
 

src/sass/misc/_callout.scss

@@ -1,20 +1,23 @@
 .callout {
-    display: table;
-    padding: .5em .5em .5em 0;
+    padding: .5em;
     border-radius: $border-radius;
+    border-width: 1px;
+    border-style: solid;
+    display: inline-block;
+    position: relative;
 
     margin: 1em 0 1em 1em;
+    max-width: calc(100% - .5em - .5em - 1em);        // .5em for left and right padding each, 1em for left margin
     @media (min-width: $bp-md) {
         margin: 1.25em;
+        max-width: calc(100% - .5em - .5em - 1.25em - 1.25em);  // .5em for left and right padding each, 1.25em for left and right margin each
     }
 
     .type {
-        position: relative;
-        display: table-cell;
         left: -.75em;
-        min-height: 100%;
-        text-align: center;
-        vertical-align: middle;
+        top: 50%;
+        transform: translateY(-50%);
+        position: absolute;
 
         svg {
             fill: $boxBorderColor;
@@ -22,7 +25,7 @@
     }
 
     .content {
-        display: table-cell;
+        margin-left: 1em;
         min-height: 100%;
 
         p:first-of-type {
@@ -36,27 +39,33 @@
 
     &.tip {
         background-color: $tipCalloutBackgroundColor;
+        border-color: $tipCalloutBorderColor;
     }
 
     &.idea {
         background-color: $ideaCalloutBackgroundColor;
+        border-color: $ideaCalloutBorderColor;
     }
 
     &.warning {
         background-color: $warningCalloutBackgroundColor;
+        border-color: $warningCalloutBorderColor;
     }
 
     &.quote {
-        background-color: $blockQuoteBackgroundColor;
+        background-color: $quoteCalloutBackgroundColor;
+        border-color: $quoteCalloutBorderColor;
         font-style: italic;
     }
 
     &:hover {
-        svg {
-            animation: shake 2.82s cubic-bezier(.36, .07, .19, .97) both;
-            transform: translate3d(0, 0, 0);
-            backface-visibility: hidden;
-            perspective: 1000px;
+        .type {
+            svg {
+                animation: shake 2.82s cubic-bezier(.36, .07, .19, .97) both;
+                transform: translate3d(0, 0, 0);
+                backface-visibility: hidden;
+                perspective: 1000px;
+            }
         }
 
         @keyframes shake {

src/sass/misc/_partner-component.scss

@@ -8,7 +8,7 @@
 
     padding-left: 1em;
     padding-right: 1em;
-    background-color: $blockQuoteBackgroundColor;
+    background-color: $quoteCalloutBackgroundColor;
     border-radius: $border-radius;
 
     table td:first-of-type {

src/sass/themes/_dark-theme.scss

@@ -22,13 +22,18 @@
     --buttonActiveColor: #e07484;
     --dividerBarColor: rgba(255, 255, 255, .1);
     --glossaryHeaderColor: #{$medium-gray};
-    --blockQuoteBackgroundColor: #{$dark-gray};
-    --tipCalloutBackgroundColor: #{$dark-gray};
-    --ideaCalloutBackgroundColor: #{$dark-gray};
-    --warningCalloutBackgroundColor: #{$dark-gray};
     --deprecatedBackgroundColor: silver;
     --boxBorderColor: var(--textColor);
 
+    --quoteCalloutBackgroundColor: #{$dark-gray};
+    --quoteCalloutBorderColor: #{$dark-gray};
+    --tipCalloutBackgroundColor: #{$dark-gray};
+    --tipCalloutBorderColor: #{$dark-gray};
+    --ideaCalloutBackgroundColor: #{$dark-gray};
+    --ideaCalloutBorderColor: #{$dark-gray};
+    --warningCalloutBackgroundColor: #{$dark-gray};
+    --warningCalloutBorderColor: #{$dark-gray};
+
     --preBlockShadowColor: #777777;
     --preBlockBorderColor: #777777;
     --preBlockBackgroundColor: #2d2d2d;

src/sass/themes/_light-theme.scss

@@ -21,13 +21,18 @@ body {
     --buttonActiveColor: #b05464;
     --dividerBarColor: rgba(0, 0, 0, .1);
     --glossaryHeaderColor: #{$medium-gray};
-    --blockQuoteBackgroundColor: #{$light-gray};
-    --tipCalloutBackgroundColor: #f2fff2;
-    --ideaCalloutBackgroundColor: lightyellow;
-    --warningCalloutBackgroundColor: #fff2f2;
     --deprecatedBackgroundColor: silver;
     --boxBorderColor: var(--secondBrandColor);
 
+    --quoteCalloutBackgroundColor: #f3f3f3;
+    --quoteCalloutBorderColor: #ebebeb;
+    --tipCalloutBackgroundColor: #f2fff2;
+    --tipCalloutBorderColor: #eaf7ea;
+    --ideaCalloutBackgroundColor: #ffffe0;
+    --ideaCalloutBorderColor: #f7f7d8;
+    --warningCalloutBackgroundColor: #fff2f2;
+    --warningCalloutBorderColor: #f7eaea;
+
     --preBlockShadowColor: #a7a7a7;
     --preBlockBorderColor: #f2f2f2;
     --preBlockBackgroundColor: var(--backgroundColor);

src/sass/themes/_vars.scss

@@ -21,13 +21,18 @@ $h2UnderlineColor: var(--h2UnderlineColor);
 $buttonActiveColor: var(--buttonActiveColor);
 $dividerBarColor: var(--dividerBarColor);
 $glossaryHeaderColor: var(--glossaryHeaderColor);
-$blockQuoteBackgroundColor: var(--blockQuoteBackgroundColor);
-$tipCalloutBackgroundColor: var(--tipCalloutBackgroundColor);
-$ideaCalloutBackgroundColor: var(--ideaCalloutBackgroundColor);
-$warningCalloutBackgroundColor: var(--warningCalloutBackgroundColor);
 $deprecatedBackgroundColor: var(--deprecateBackgroundColor);
 $boxBorderColor: var(--boxBorderColor);
 
+$quoteCalloutBackgroundColor: var(--quoteCalloutBackgroundColor);
+$quoteCalloutBorderColor: var(--quoteCalloutBorderColor);
+$tipCalloutBackgroundColor: var(--tipCalloutBackgroundColor);
+$tipCalloutBorderColor: var(--tipCalloutBorderColor);
+$ideaCalloutBackgroundColor: var(--ideaCalloutBackgroundColor);
+$ideaCalloutBorderColor: var(--ideaCalloutBorderColor);
+$warningCalloutBackgroundColor: var(--warningCalloutBackgroundColor);
+$warningCalloutBorderColor: var(--warningCalloutBorderColor);
+
 $preBlockShadowColor: var(--preBlockShadowColor);
 $preBlockBorderColor: var(--preBlockBorderColor);
 $preBlockBackgroundColor: var(--preBlockBackgroundColor);

src/ts/themes_init.ts

@@ -1 +1 @@
-// Copyright 2019 Istio Authors
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

const darkThemeClass = "dark-theme";
const darkTheme = "Dark Theme";
const darkThemeItem = "dark-theme-item";
const lightTheme = "Light Theme";
const lightThemeItem = "light-theme-item";
const styleCookie = "style";

function applyStyleSheet(theme: string | null): void {
    // convert legacy cookie values
    if (theme === "dark") {
        theme = darkTheme;
    } else {
        theme = lightTheme;
    }

    if (theme === darkTheme) {
        document.body.classList.add(darkThemeClass);
    } else {
        document.body.classList.remove(darkThemeClass);
    }

    // set the active theme menu item

    let item = document.getElementById(lightThemeItem);
    if (item) {
        if (theme === darkTheme) {
            item.classList.remove(active);
        } else {
            item.classList.add(active);
        }
    }

    item = document.getElementById(darkThemeItem);
    if (item) {
        if (theme === darkTheme) {
            item.classList.add(active);
        } else {
            item.classList.remove(active);
        }
    }
}

function readCookie(name: string): string | null {
    const nameEQ = name + "=";
    const ca = document.cookie.split(";");
    for (let c of ca) {
        while (c.charAt(0) === " ") {
            c = c.substring(1, c.length);
        }

        if (c.indexOf(nameEQ) === 0) {
            return c.substring(nameEQ.length, c.length);
        }
    }
    return null;
}

let cookieValue = readCookie(styleCookie);
applyStyleSheet(cookieValue);
+// Copyright 2019 Istio Authors
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

const darkThemeClass = "dark-theme";
const darkTheme = "Dark Theme";
const darkThemeItem = "dark-theme-item";
const lightTheme = "Light Theme";
const lightThemeItem = "light-theme-item";
const styleCookie = "style";

function applyStyleSheet(theme: string | null): void {
    // convert legacy cookie values
    if (theme === "dark") {
        theme = darkTheme;
    } else if (theme === "light") {
        theme = lightTheme;
    }

    if (theme === darkTheme) {
        document.body.classList.add(darkThemeClass);
    } else {
        document.body.classList.remove(darkThemeClass);
    }

    // set the active theme menu item

    let item = document.getElementById(lightThemeItem);
    if (item) {
        if (theme === darkTheme) {
            item.classList.remove(active);
        } else {
            item.classList.add(active);
        }
    }

    item = document.getElementById(darkThemeItem);
    if (item) {
        if (theme === darkTheme) {
            item.classList.add(active);
        } else {
            item.classList.remove(active);
        }
    }
}

function readCookie(name: string): string | null {
    const nameEQ = name + "=";
    const ca = document.cookie.split(";");
    for (let c of ca) {
        while (c.charAt(0) === " ") {
            c = c.substring(1, c.length);
        }

        if (c.indexOf(nameEQ) === 0) {
            return c.substring(nameEQ.length, c.length);
        }
    }
    return null;
}

let cookieValue = readCookie(styleCookie);
applyStyleSheet(cookieValue);