diff --git a/doc/_static/js/dark-mode-toggle-stylesheets-loader.min.js b/doc/_static/js/dark-mode-toggle-stylesheets-loader.min.js new file mode 100644 index 00000000000..4b708b5430d --- /dev/null +++ b/doc/_static/js/dark-mode-toggle-stylesheets-loader.min.js @@ -0,0 +1,2 @@ +// @license © 2024 Google LLC. Licensed under the Apache License, Version 2.0. +(()=>{const e="dark-mode-toggle-stylesheets";const s="dark-mode-toggle";const t="light";const l="dark";let o=document.getElementById(e).textContent;let c=null;try{c=localStorage.getItem(s)}catch(e){}const a=/\(\s*prefers-color-scheme\s*:\s*light\s*\)/gi;const r=/\(\s*prefers-color-scheme\s*:\s*dark\s*\)/gi;switch(c){case t:o=o.replace(a,"$&, all").replace(r,"$& and not all");break;case l:o=o.replace(r,"$&, all").replace(a,"$& and not all");break}document.write(o)})(); \ No newline at end of file diff --git a/doc/_static/js/dark-mode-toggle.min.mjs b/doc/_static/js/dark-mode-toggle.min.mjs index ab41830ae8a..9c78635c443 100644 --- a/doc/_static/js/dark-mode-toggle.min.mjs +++ b/doc/_static/js/dark-mode-toggle.min.mjs @@ -1,2 +1,2 @@ // @license © 2019 Google LLC. Licensed under the Apache License, Version 2.0. -const e=document;const t=localStorage;const i="prefers-color-scheme";const a="media";const s="light";const r="dark";const o=`(${i}:${r})`;const n=`(${i}:${s})`;const l="link[rel=stylesheet]";const h="remember";const c="legend";const d="toggle";const b="switch";const p="appearance";const g="permanent";const m="mode";const u="colorschemechange";const f="permanentcolorscheme";const k="all";const v="not all";const $="dark-mode-toggle";const L="https://googlechromelabs.github.io/dark-mode-toggle/demo/";const y=(e,t,i=t)=>{Object.defineProperty(e,i,{enumerable:true,get(){const e=this.getAttribute(t);return e===null?"":e},set(e){this.setAttribute(t,e)}})};const x=(e,t,i=t)=>{Object.defineProperty(e,i,{enumerable:true,get(){return this.hasAttribute(t)},set(e){if(e){this.setAttribute(t,"")}else{this.removeAttribute(t)}}})};const w=e.createElement("template");w.innerHTML=`
`;export class DarkModeToggle extends HTMLElement{static get observedAttributes(){return[m,p,g,c,s,r,h]}constructor(){super();y(this,m);y(this,p);y(this,c);y(this,s);y(this,r);y(this,h);x(this,g);this.t=null;this.i=null;e.addEventListener(u,(e=>{this.mode=e.detail.colorScheme;this.o();this.l()}));e.addEventListener(f,(e=>{this.permanent=e.detail.permanent;this.h.checked=this.permanent}));this.p()}p(){const h=this.attachShadow({mode:"open"});h.appendChild(w.content.cloneNode(true));this.t=e.querySelectorAll(`${l}[${a}*=${i}][${a}*="${r}"]`);this.i=e.querySelectorAll(`${l}[${a}*=${i}][${a}*="${s}"]`);this.g=h.querySelector("[part=lightRadio]");this.m=h.querySelector("[part=lightLabel]");this.u=h.querySelector("[part=darkRadio]");this.k=h.querySelector("[part=darkLabel]");this.v=h.querySelector("[part=toggleCheckbox]");this.$=h.querySelector("[part=toggleLabel]");this.L=h.querySelector("legend");this.M=h.querySelector("aside");this.h=h.querySelector("[part=permanentCheckbox]");this.C=h.querySelector("[part=permanentLabel]");const c=matchMedia(o).media!==v;if(c){matchMedia(o).addListener((({matches:e})=>{this.mode=e?r:s;this.R(u,{colorScheme:this.mode})}))}const b=t.getItem($);if(b&&[r,s].includes(b)){this.mode=b;this.h.checked=true;this.permanent=true}else if(c){this.mode=matchMedia(n).matches?s:r}if(!this.mode){this.mode=s}if(this.permanent&&!b){t.setItem($,this.mode)}if(!this.appearance){this.appearance=d}this._();this.o();this.l();[this.g,this.u].forEach((e=>{e.addEventListener("change",(()=>{this.mode=this.g.checked?s:r;this.l();this.R(u,{colorScheme:this.mode})}))}));this.v.addEventListener("change",(()=>{this.mode=this.v.checked?r:s;this.o();this.R(u,{colorScheme:this.mode})}));this.h.addEventListener("change",(()=>{this.permanent=this.h.checked;this.R(f,{permanent:this.permanent})}));this.A();this.R(u,{colorScheme:this.mode});this.R(f,{permanent:this.permanent})}attributeChangedCallback(e,i,a){if(e===m){if(![s,r].includes(a)){throw new RangeError(`Allowed values: "${s}" and "${r}".`)}if(matchMedia("(hover:none)").matches&&this.remember){this.S()}if(this.permanent){t.setItem($,this.mode)}this.o();this.l();this.A()}else if(e===p){if(![d,b].includes(a)){throw new RangeError(`Allowed values: "${d}" and "${b}".`)}this._()}else if(e===g){if(this.permanent){t.setItem($,this.mode)}else{t.removeItem($)}this.h.checked=this.permanent}else if(e===c){this.L.textContent=a}else if(e===h){this.C.textContent=a}else if(e===s){this.m.textContent=a;if(this.mode===s){this.$.textContent=a}}else if(e===r){this.k.textContent=a;if(this.mode===r){this.$.textContent=a}}}R(e,t){this.dispatchEvent(new CustomEvent(e,{bubbles:true,composed:true,detail:t}))}_(){const e=this.appearance===d;this.g.hidden=e;this.m.hidden=e;this.u.hidden=e;this.k.hidden=e;this.v.hidden=!e;this.$.hidden=!e}o(){if(this.mode===s){this.g.checked=true}else{this.u.checked=true}}l(){if(this.mode===s){this.$.style.setProperty(`--${$}-checkbox-icon`,`var(--${$}-light-icon,url("${L}moon.png"))`);this.$.textContent=this.light;this.v.checked=false}else{this.$.style.setProperty(`--${$}-checkbox-icon`,`var(--${$}-dark-icon,url("${L}sun.png"))`);this.$.textContent=this.dark;this.v.checked=true}}A(){if(this.mode===s){this.i.forEach((e=>{e.media=k;e.disabled=false}));this.t.forEach((e=>{e.media=v;e.disabled=true}))}else{this.t.forEach((e=>{e.media=k;e.disabled=false}));this.i.forEach((e=>{e.media=v;e.disabled=true}))}}S(){this.M.style.visibility="visible";setTimeout((()=>{this.M.style.visibility="hidden"}),3e3)}}customElements.define($,DarkModeToggle); \ No newline at end of file +const e=document;let t={};try{t=localStorage}catch(e){}const i="prefers-color-scheme";const a="media";const s="light";const r="dark";const h="system";const o=`(${i}:${r})`;const l=`(${i}:${s})`;const n="link[rel=stylesheet]";const c="remember";const d="legend";const p="toggle";const b="switch";const g="three-way";const m="appearance";const u="permanent";const f="mode";const k="colorschemechange";const y="permanentcolorscheme";const v="all";const $="not all";const L="dark-mode-toggle";const T="https://googlechromelabs.github.io/dark-mode-toggle/demo/";const W=(e,t,i=t)=>{Object.defineProperty(e,i,{enumerable:true,get(){const e=this.getAttribute(t);return e===null?"":e},set(e){this.setAttribute(t,e)}})};const w=(e,t,i=t)=>{Object.defineProperty(e,i,{enumerable:true,get(){return this.hasAttribute(t)},set(e){if(e){this.setAttribute(t,"")}else{this.removeAttribute(t)}}})};const x=e.createElement("template");x.innerHTML=`
`;export class DarkModeToggle extends HTMLElement{static get observedAttributes(){return[f,m,u,d,s,r,c]}constructor(){super();W(this,f);W(this,m);W(this,d);W(this,s);W(this,r);W(this,h);W(this,c);w(this,u);this.t=null;this.i=null;e.addEventListener(k,(e=>{this.mode=e.detail.colorScheme;this.h();this.o();this.l()}));e.addEventListener(y,(e=>{this.permanent=e.detail.permanent;this.p.checked=this.permanent;this.l()}));this.m()}m(){const t=this.attachShadow({mode:"open"});t.append(x.content.cloneNode(true));this.t=e.querySelectorAll(`${n}[${a}*=${i}][${a}*="${r}"]`);this.i=e.querySelectorAll(`${n}[${a}*=${i}][${a}*="${s}"]`);this.u=t.querySelector("[part=lightRadio]");this.k=t.querySelector("[part=lightLabel]");this.v=t.querySelector("[part=darkRadio]");this.$=t.querySelector("[part=darkLabel]");this.L=t.querySelector("[part=toggleCheckbox]");this.T=t.querySelector("[part=toggleLabel]");this.W=t.querySelector("[part=lightThreeWayRadio]");this.R=t.querySelector("[part=lightThreeWayLabel]");this.C=t.querySelector("[part=systemThreeWayRadio]");this.M=t.querySelector("[part=systemThreeWayLabel]");this.S=t.querySelector("[part=darkThreeWayRadio]");this._=t.querySelector("[part=darkThreeWayLabel]");this.A=t.querySelector("legend");this.D=t.querySelector("aside");this.p=t.querySelector("[part=permanentCheckbox]");this.O=t.querySelector("[part=permanentLabel]")}connectedCallback(){const e=matchMedia(o).media!==$;if(e){matchMedia(o).addListener((({matches:e})=>{if(this.permanent){return}this.mode=e?r:s;this.j(k,{colorScheme:this.mode})}))}let i=false;try{i=t.getItem(L)}catch(e){}if(i&&[r,s].includes(i)){this.mode=i;this.p.checked=true;this.permanent=true}else if(e){this.mode=matchMedia(l).matches?s:r}if(!this.mode){this.mode=s}if(this.permanent&&!i){try{t.setItem(L,this.mode)}catch(e){}}if(!this.appearance){this.appearance=p}this.P();this.h();this.o();this.l();[this.u,this.v].forEach((e=>{e.addEventListener("change",(()=>{this.mode=this.u.checked?s:r;this.o();this.l();this.j(k,{colorScheme:this.mode})}))}));this.L.addEventListener("change",(()=>{this.mode=this.L.checked?r:s;this.h();this.l();this.j(k,{colorScheme:this.mode})}));this.W.addEventListener("change",(()=>{this.mode=s;this.permanent=true;this.o();this.h();this.l();this.j(k,{colorScheme:this.mode});this.j(y,{permanent:this.permanent})}));this.S.addEventListener("change",(()=>{this.mode=r;this.permanent=true;this.o();this.h();this.l();this.j(k,{colorScheme:this.mode});this.j(y,{permanent:this.permanent})}));this.C.addEventListener("change",(()=>{this.mode=this.H();this.permanent=false;this.o();this.h();this.l();this.j(k,{colorScheme:this.mode});this.j(y,{permanent:this.permanent})}));this.p.addEventListener("change",(()=>{this.permanent=this.p.checked;this.l();this.j(y,{permanent:this.permanent})}));this.q();this.j(k,{colorScheme:this.mode});this.j(y,{permanent:this.permanent})}attributeChangedCallback(e,i,a){if(e===f){const e=[s,h,r];if(!e.includes(a)){throw new RangeError(`Allowed values are: "${e.join(`", "`)}".`)}if(matchMedia("(hover:none)").matches&&this.remember){this.B()}if(this.permanent){try{t.setItem(L,this.mode)}catch(e){}}this.h();this.o();this.l();this.q()}else if(e===m){const e=[p,b,g];if(!e.includes(a)){throw new RangeError(`Allowed values are: "${e.join(`", "`)}".`)}this.P()}else if(e===u){if(this.permanent){if(this.mode){try{t.setItem(L,this.mode)}catch(e){}}}else{try{t.removeItem(L)}catch(e){}}this.p.checked=this.permanent}else if(e===d){this.A.textContent=a}else if(e===c){this.O.textContent=a}else if(e===s){this.k.textContent=a;if(this.mode===s){this.T.textContent=a}}else if(e===r){this.$.textContent=a;if(this.mode===r){this.T.textContent=a}}}H(){return matchMedia(l).matches?s:r}j(e,t){this.dispatchEvent(new CustomEvent(e,{bubbles:true,composed:true,detail:t}))}P(){this.u.hidden=this.k.hidden=this.v.hidden=this.$.hidden=this.L.hidden=this.T.hidden=this.W.hidden=this.R.hidden=this.C.hidden=this.M.hidden=this.S.hidden=this._.hidden=true;switch(this.appearance){case b:this.u.hidden=this.k.hidden=this.v.hidden=this.$.hidden=false;break;case g:this.W.hidden=this.R.hidden=this.C.hidden=this.M.hidden=this.S.hidden=this._.hidden=false;break;case p:default:this.L.hidden=this.T.hidden=false;break}}h(){if(this.mode===s){this.u.checked=true}else{this.v.checked=true}}o(){if(this.mode===s){this.T.style.setProperty(`--${L}-checkbox-icon`,`var(--${L}-light-icon,url("${T}moon.png"))`);this.T.textContent=this.light;if(!this.light){this.T.ariaLabel=r}this.L.checked=false}else{this.T.style.setProperty(`--${L}-checkbox-icon`,`var(--${L}-dark-icon,url("${T}sun.png"))`);this.T.textContent=this.dark;if(!this.dark){this.T.ariaLabel=s}this.L.checked=true}}l(){this.R.ariaLabel=s;this.M.ariaLabel=h;this.R.ariaLabel=r;this.R.textContent=this.light;this.M.textContent=this.system;this._.textContent=this.dark;if(this.permanent){if(this.mode===s){this.W.checked=true}else{this.S.checked=true}}else{this.C.checked=true}}q(){if(this.mode===s){this.i.forEach((e=>{e.media=v;e.disabled=false}));this.t.forEach((e=>{e.media=$;e.disabled=true}))}else{this.t.forEach((e=>{e.media=v;e.disabled=false}));this.i.forEach((e=>{e.media=$;e.disabled=true}))}}B(){this.D.style.visibility="visible";setTimeout((()=>{this.D.style.visibility="hidden"}),3e3)}}customElements.define(L,DarkModeToggle); \ No newline at end of file