package Ġsite . v ie 1 0 . visit . component Ċ Ċ import Ġcs stype . Color Ċ import Ġcs stype . None Ċ import Ġcs stype . pct Ċ import Ġcs stype . px Ċ import Ġkotlinx . browser . document Ċ import Ġkotlinx . dom . append Element Ċ import Ġm ui . icons . material . Brightness 4 Ċ import Ġm ui . icons . material . Brightness 7 Ċ import Ġm ui . material . Css Baseline Ċ import Ġm ui . material . ToggleButton Ċ import Ġm ui . material . ToggleButton Group Ċ import Ġm ui . material . Typography Ċ import Ġm ui . material . styles . Theme Ċ import Ġm ui . material . styles . Theme Provider Ċ import Ġm ui . material . styles . Typography Variant . caption Ċ import Ġm ui . system . sx Ċ import Ġorg . w 3 c . dom . HTML Meta Element Ċ import Ġreact .* Ċ import Ġreact . dom . aria . aria Label Ċ import Ġsite . v ie 1 0 . visit . common . Themes Ċ import Ġsite . v ie 1 0 . visit . cookie . Cookie Ċ import Ġsite . v ie 1 0 . visit . util . word From Context Ċ Ċ /** Ċ Ġ* Ġ@ author Ġv ie 1 0 Ċ Ġ**/ Ċ val ĠTheme Cookie Ġ= ĠCookie (" theme ") Ċ Ċ type alias ĠTheme State Ġ= ĠState Instance < Theme > Ċ Ċ val ĠTheme Context Ġ= Ġcreate Context < Theme State >() Ċ Ċ val ĠTheme Module Ġ= ĠFC < Props With Children > Ġ{ Ġprops Ġ-> ĊĠĠĠ Ġval Ġstate Ġ= ĠuseState ( ĊĠĠĠĠĠĠĠ Ġif Ġ( Theme Cookie . value Ġ== Ġ" dark ") ĠThe mes . Dark Ġelse ĠThe mes . Light ĊĠĠĠ Ġ) ĊĠĠĠ Ġval Ġ( theme ) Ġ= Ġstate ĊĠĠĠ Ġset Theme Color Meta ( theme . palette . primary . main . toString ()) ĊĊĠĠĠ ĠTheme Context . Provider ( state ) Ġ{ ĊĠĠĠĠĠĠĠ ĠTheme Provider Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġthis . theme Ġ= Ġtheme ĊĊĠĠĠĠĠĠĠĠĠĠĠ ĠCss Baseline () ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ+ props . children ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ Ċ val ĠMode Toggle Ġ= ĠFC < Props > Ġ{ ĊĠĠĠ Ġvar Ġtheme Ġby ĠuseContext ( Theme Context ) ĊĠĠĠ ĠTheme Cookie . value Ġ= Ġif Ġ( theme Ġ=== ĠThe mes . Dark ) Ġ" dark " Ġelse Ġ" light " ĊĊĠĠĠ ĠTypography Ġ{ ĊĠĠĠĠĠĠĠ Ġsx Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġcolor Ġ= ĠColor (" text . secondary ") ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġvariant Ġ= Ġcaption ĊĠĠĠĠĠĠĠ Ġg utter Bottom Ġ= Ġtrue ĊĊĠĠĠĠĠĠĠ Ġ+ word From Context . mode . uppercase () ĊĠĠĠ Ġ} ĊĠĠĠ ĠToggle Button Group Ġ{ ĊĠĠĠĠĠĠĠ Ġsx Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġwidth Ġ= Ġ 1 0 0 . pct ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġvalue Ġ= Ġtheme ĊĠĠĠĠĠĠĠ Ġexclusive Ġ= Ġtrue ĊĠĠĠĠĠĠĠ ĠonChange Ġ= Ġ{ Ġ_, ĠnewValue Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠ Ġif Ġ( newValue Ġ!= Ġnull ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtheme Ġ= ĠnewValue . unsafe Cast < Theme >() ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġaria Label Ġ= Ġword From Context . mode ĊĊĠĠĠĠĠĠĠ ĠToggle Button Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġsx Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġwidth Ġ= Ġ 1 0 0 . pct ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtext Transform Ġ= ĠNone . none ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġvalue Ġ= ĠThe mes . Light ĊĠĠĠĠĠĠĠĠĠĠĠ Ġaria Label Ġ= Ġword From Context . light ĊĊĠĠĠĠĠĠĠĠĠĠĠ ĠB rightness 7 Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġsx Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠmarginRight Ġ= Ġ 5 . px ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ+ word From Context . light ĊĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠ ĠToggle Button Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġsx Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġwidth Ġ= Ġ 1 0 0 . pct ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtext Transform Ġ= ĠNone . none ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġvalue Ġ= ĠThe mes . Dark ĊĠĠĠĠĠĠĠĠĠĠĠ Ġaria Label Ġ= Ġword From Context . dark ĊĊĠĠĠĠĠĠĠĠĠĠĠ ĠB rightness 4 Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġsx Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠmarginRight Ġ= Ġ 5 . px ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ+ word From Context . dark ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ Ċ private Ġfun Ġset Theme Color Meta ( color : ĠString ) Ġ{ ĊĠĠĠ Ġval Ġhead Ġ= Ġdocument . head !! ĊĠĠĠ Ġval Ġelement Ġ= Ġhead . children . named Item (" theme - color ") ĊĠĠĠ Ġif Ġ( element Ġ!= Ġnull ) Ġ{ ĊĠĠĠĠĠĠĠ Ġ( element Ġas ĠHTML Meta Element ). setAttribute (" content ", Ġcolor ) ĊĠĠĠ Ġ} Ġelse Ġ{ ĊĠĠĠĠĠĠĠ Ġhead . append Element (" meta ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġset Attribute (" name ", Ġ" theme - color ") ĊĠĠĠĠĠĠĠĠĠĠĠ Ġset Attribute (" content ", Ġcolor ) ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ