ThemeScript

Skrypt wbudowany w head, który stosuje zapisany motyw i ustawienia czytelnika przed pierwszym wyrenderowaniem, aby ciemna strona nigdy nie błysnęła jasnym tłem. themeScript() daje to samo źródło jako tekst dla sekcji head, której React nie renderuje.

ThemeScript

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: ThemeScript

Rendered on the server as <ThemeScript />, it writes this into the head:

(function(){var r=document.documentElement;try{var t=localStorage.getItem("skribly-theme");if(t==="light"||t==="dark"||t==="contrast")r.setAttribute("data-theme",t)}catch(e){}try{var a=JSON.parse(localStorage.getItem("skribly-a11y")||"null")||{},c=r.classList;if(a.reduceMotion===true)c.add("a11y-reduce-motion");if(a.strongFocus===true)c.add("a11y-strong-focus");if(a.underlineLinks===true){c.add("a11y-underline-links");c.add("[&_a]:underline")}if([110,120,130,140].indexOf(a.textScale)>-1)r.style.fontSize=a.textScale+"%"}catch(e){}})();

Noc, podgląd: ThemeScript

Rendered on the server as <ThemeScript />, it writes this into the head:

(function(){var r=document.documentElement;try{var t=localStorage.getItem("skribly-theme");if(t==="light"||t==="dark"||t==="contrast")r.setAttribute("data-theme",t)}catch(e){}try{var a=JSON.parse(localStorage.getItem("skribly-a11y")||"null")||{},c=r.classList;if(a.reduceMotion===true)c.add("a11y-reduce-motion");if(a.strongFocus===true)c.add("a11y-strong-focus");if(a.underlineLinks===true){c.add("a11y-underline-links");c.add("[&_a]:underline")}if([110,120,130,140].indexOf(a.textScale)>-1)r.style.fontSize=a.textScale+"%"}catch(e){}})();

Wysoki kontrast, podgląd: ThemeScript

Rendered on the server as <ThemeScript />, it writes this into the head:

(function(){var r=document.documentElement;try{var t=localStorage.getItem("skribly-theme");if(t==="light"||t==="dark"||t==="contrast")r.setAttribute("data-theme",t)}catch(e){}try{var a=JSON.parse(localStorage.getItem("skribly-a11y")||"null")||{},c=r.classList;if(a.reduceMotion===true)c.add("a11y-reduce-motion");if(a.strongFocus===true)c.add("a11y-strong-focus");if(a.underlineLinks===true){c.add("a11y-underline-links");c.add("[&_a]:underline")}if([110,120,130,140].indexOf(a.textScale)>-1)r.style.fontSize=a.textScale+"%"}catch(e){}})();

UżycieLink do sekcji Użycie

tsx

import { ThemeScript } from '@skribly/ui/theme'

tsx

<head>
  <ThemeScript nonce={nonce} />
</head>

<script is:inline set:html={themeScript()} />

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Zapobiega błyskowi niewłaściwego motywu i skokowi rozmiaru tekstu, które przeszkadzają osobom wrażliwym na światło lub słabowidzącym.
Przyjmuje nonce dla ścisłej polityki Content Security Policy.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.