mirror of https://github.com/istio/istio.io.git
Theme improvements (#4097)
- If no color theme has been selected, the site now follows the user's system's color scheme. This only works in Safari right now, but support in Chrome and Firefox is on its way. - Fix occasional white flash that would happen when loading pages while using the dark theme.
This commit is contained in:
Martin Taillefer
GitHub
parent
652e05159a
commit
0423e9188a
File diff suppressed because one or more lines are too long
|
|
@ -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){"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);
|
||||
"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.documentElement.classList.add(darkThemeClass):document.documentElement.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}function readSystemDefault(){if(window.matchMedia("(prefers-color-scheme: dark)").matches)return darkTheme;return window.matchMedia("(prefers-color-scheme: light)").matches?lightTheme:null}let cookieValue=readCookie(styleCookie);null===cookieValue&&(cookieValue=readSystemDefault()),applyStyleSheet(cookieValue);
|
||||
|
||||
//# sourceMappingURL=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,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"]}
|
||||
{"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,eAAT,CAAyB,SAAzB,CAAmC,GAAnC,CAAuC,cAAvC,CATqC,CAWrC,QAAQ,CAAC,eAAT,CAAyB,SAAzB,CAAmC,MAAnC,CAA0C,cAA1C,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,QAAS,CAAA,iBAAT,EAA0B,CACtB,GAAI,MAAM,CAAC,UAAP,CAAkB,8BAAlB,EAAkD,OAAtD,CACI,MAAO,CAAA,SAAP,CAFkB,MAGX,CAAA,MAAM,CAAC,UAAP,CAAkB,+BAAlB,EAAmD,OAHxC,CAIX,UAJW,CAMf,IACV,CAGD,GAAI,CAAA,WAAW,CAAG,UAAU,CAAC,WAAD,CAA5B,CACoB,IAAhB,GAAA,W,GACA,WAAW,CAAG,iBAAiB,E,EAEnC,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.documentElement.classList.add(darkThemeClass);\r } else {\r document.documentElement.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\rfunction readSystemDefault(): string | null {\r if (window.matchMedia(\"(prefers-color-scheme: dark)\").matches) {\r return darkTheme;\r } else if (window.matchMedia(\"(prefers-color-scheme: light)\").matches) {\r return lightTheme;\r }\r return null;\r}\r\r\rlet cookieValue = readCookie(styleCookie);\rif (cookieValue === null) {\r cookieValue = readSystemDefault();\r}\rapplyStyleSheet(cookieValue);\r"]}
|
||||
|
|
@ -105,6 +105,9 @@
|
|||
<!-- style sheets -->
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work+Sans:400|Chivo:400|Work+Sans:500,300,600,300italic,400italic,500italic,600italic|Chivo:500,300,600,300italic,400italic,500italic,600italic">
|
||||
<link rel="stylesheet" href="/css/all.css">
|
||||
|
||||
<!-- set the color theme -->
|
||||
<script src="/js/themes_init.min.js"></script>
|
||||
</head>
|
||||
|
||||
{{ $site_mode := ""}}
|
||||
|
|
@ -115,9 +118,6 @@
|
|||
{{ end }}
|
||||
|
||||
<body class="language-unknown {{ $site_mode}}">
|
||||
<!-- set the color theme as soon as possible -->
|
||||
<script src="/js/themes_init.min.js"></script>
|
||||
|
||||
<!-- inject some build-time constants into JavaScript-land -->
|
||||
<script>
|
||||
const branchName = "{{ .Site.Data.args.source_branch_name }}";
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
{{ else if .Site.Data.args.preliminary }}
|
||||
<span class="name">Istio Prelim {{ .Site.Data.args.version }}</span>
|
||||
{{ else }}
|
||||
<span class="name">Istio {{ .Site.Data.args.version }}</span>
|
||||
<span class="name">Istio</span>
|
||||
{{ end }}
|
||||
</a>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
body {
|
||||
html {
|
||||
--backgroundColor: #ffffff;
|
||||
|
||||
--textColor: #535f61;
|
||||
|
|
|
|||
|
|
@ -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 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);
|
||||
// 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.documentElement.classList.add(darkThemeClass);
} else {
document.documentElement.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;
}
function readSystemDefault(): string | null {
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
return darkTheme;
} else if (window.matchMedia("(prefers-color-scheme: light)").matches) {
return lightTheme;
}
return null;
}
let cookieValue = readCookie(styleCookie);
if (cookieValue === null) {
cookieValue = readSystemDefault();
}
applyStyleSheet(cookieValue);
|
||||
Loading…
Reference in New Issue