https://ember-primitives.pages.dev/assets/color-scheme.gjs-BwO3xyTm.js

1import{n as i}from"./chunk-BKSzLlU4.js";import{n as h}from"./template-Dc_cBOoX-jQZdGCuZ.js";import{t as l}from"./on-f0X2_LsK.js";import{c as r}from"./index-kwuZeaNz-DkfSDYND.js";import{t as k}from"./template-only-BEa_ZSRq.js";import{s as E}from"./helper-2gFvzdp7.js";import"./shadowed-C8d8IJ3c.js";import"./dist-BwTUYrE9.js";import{i as o,n as t,r as s,s as e,t as a}from"./color-scheme-BdKYGtD1.js";import{s as d,t as g}from"./api-docs-DjNHeHUN.js";import"./viewport-DKHUQxuF.js";function c(){return{prefers:{dark:o.dark(),light:o.light(),synthWave:o.custom("synthwave")},activeTheme:a.current,otherSources:{documentElement:t(),localStorage:s.read()}}}e();var n=h(r({id:null,block:'[[[11,"button"],[4,[32,0],["click",[28,[32,1],[[32,2,["update"]],"dark"],null]],null],[12],[1,"Dark mode"],[13],[1,"\\n"],[11,"button"],[4,[32,0],["click",[28,[32,1],[[32,2,["update"]],"light"],null]],null],[12],[1,"Light mode"],[13],[1,"\\n\\n"],[10,"pre"],[12],[1,[28,[32,3,["stringify"]],[[28,[32,4],null,null],null,4],null]],[13]],[],[]]',moduleName:"(unknown template module)",scope:()=>({on:l,fn:E,colorScheme:a,JSON:JSON,gatherSchemePreferences:c}),isStrictMode:!0}),k()),F=h(r({id:null,block:'[[[8,[32,0],null,[["@src","@since"],["color-scheme.ts","0.0.1"]],null]],[],[]]',moduleName:"(unknown template module)",scope:()=>({SetupInstructions:d}),isStrictMode:!0}),k()),m=h(r({id:null,block:'[[[8,[32,0],null,[["@declaration","@name"],["color-scheme","colorScheme"]],null],[1,"\\n"],[8,[32,0],null,[["@declaration","@name"],["color-scheme","sync"]],null],[1,"\\n"],[8,[32,0],null,[["@declaration","@name"],["color-scheme","prefers"]],null],[1,"\\n"],[8,[32,0],null,[["@declaration","@name"],["color-scheme","localPreference"]],null],[1,"\\n"],[8,[32,0],null,[["@declaration","@name"],["color-scheme","getColorScheme"]],null],[1,"\\n"],[8,[32,0],null,[["@declaration","@name"],["color-scheme","setColorScheme"]],null],[1,"\\n"],[8,[32,0],null,[["@declaration","@name"],["color-scheme","removeColorScheme"]],null]],[],[]]',moduleName:"(unknown template module)",scope:()=>({APIDocs:g}),isStrictMode:!0}),k()),D=i({default:()=>u}),u=h(r({id:null,block:'[[[10,"h1"],[14,1,"sync-color-scheme"],[12],[1,"Sync Color Scheme"],[13],[1,"\\n"],[10,2],[12],[1,"With the introduction of "],[10,3],[14,6,"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme"],[12],[10,"code"],[12],[1,"prefers-color-scheme"],[13],[13],[1,", we can better serve our users preferences and help them feel comfortable in our applications."],[13],[1,"\\n"],[10,2],[12],[1,"However, when using prefers-color-scheme, there are some rough edges around the whole feature of color schemes in browsers:"],[13],[1,"\\n"],[10,"ul"],[12],[1,"\\n"],[10,"li"],[12],[1,"the scrollbars do not change unless the "],[10,3],[14,6,"https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme"],[12],[10,"code"],[12],[1,"color-scheme"],[13],[13],[1," variable is set on the root element"],[13],[1,"\\n"],[10,"li"],[12],[1,"default browsers styles do not change based on "],[10,"code"],[12],[1,"prefers-color-scheme"],[13],[1,", and instead are only reactive to "],[10,"code"],[12],[1,"color-scheme"],[13],[13],[1,"\\n"],[10,"li"],[12],[1,"a user\'s "],[10,"code"],[12],[1,"prefers-color-scheme"],[13],[1," preference does not set "],[10,"code"],[12],[1,"color-scheme"],[13],[1," on the root element"],[13],[1,"\\n"],[10,"li"],[12],[1,"it\'s not possible to, from CSS, query the value of "],[10,"code"],[12],[1,"color-scheme"],[13],[13],[1,"\\n"],[13],[1,"\\n"],[10,2],[12],[1,"So, we need to run some JavaScript to synchronize all this."],[13],[1,"\\n"],[10,"h2"],[14,1,"app-based-theme-preference"],[12],[1,"App-based theme preference?"],[13],[1,"\\n"],[10,2],[12],[1,"The "],[10,"code"],[12],[1,"color-scheme"],[13],[1," property can be used at any nesting level in the DOM, so if the user wishes to set their preferred color scheme to \\"dark mode\\" in your app, even though their browser reports that their "],[10,"code"],[12],[1,"prefers-color-scheme"],[13],[1," value is \\"light mode\\", dark mode is what we want to render. This is persisted across refreshes and synced between open tabs."],[13],[1,"\\n"],[10,0],[14,1,"repl_155"],[14,0,"repl-sdk__demo"],[12],[8,[32,0],null,null,[["default"],[[[],[]]]]],[13],[1,"\\n"],[10,0],[14,0,"repl-sdk__snippet"],[14,"data-repl-output",""],[12],[10,"pre"],[14,0,"shiki shiki-themes g

1ithub-light github-dark"],[14,5,"background-color:light-dark(#fff, #24292e);--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;color:light-dark(#24292e, #e1e4e8);--shiki-light:#24292e;--shiki-dark:#e1e4e8"],[14,"tabindex","0"],[12],[10,"code"],[12],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"import"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," { "],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  sync, colorScheme, prefers, getColorScheme, localPreference"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"} "],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"from"],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1," \'ember-primitives/color-scheme\'"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"import"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," { on } "],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"from"],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1," \'@ember/modifier\'"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"import"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," { fn } "],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"from"],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1," \'@ember/helper\'"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#6A737D, #6A737D);--shiki-light:#6A737D;--shiki-dark:#6A737D"],[12],[1,"// reads the user\'s browser preferences"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"sync"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"();"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"function"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1," gatherSchemePreferences"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"() {"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"  return"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," {"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    prefers: {"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"      dark: prefers."],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"dark"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"(),"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"      light: prefers."],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"light"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"(),"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"      synthWave: prefers."],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"custom"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"("],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\'synthwave\'"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"),"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    },"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#6A737D, #6A737D);--shiki-light:#6A737D;--shiki-dark:#6A737D"],[12],[1,"    // colorScheme is a reactive value"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    activeTheme: colorScheme.current,"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    otherSources: {"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"      \'documentElement\'"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,": "],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"getColorScheme"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"(), "],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"      localStorage: localPreference."],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"read"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"(),"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    }"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  };"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"}"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"<"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"template"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"button"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1," "],[1,"{{on "],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\'click\'"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1," (fn"],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1," colorScheme.update"],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;

1--shiki-dark:#9ECBFF"],[12],[1," \'dark\'"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,")}}"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">Dark mode</"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"button"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"button"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1," "],[1,"{{on "],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\'click\'"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1," (fn"],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1," colorScheme.update"],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1," \'light\'"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,")}}"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">Light mode</"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"button"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"pre"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"{{"],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"JSON.stringify "],[13],[10,1],[14,5,"color:light-dark(#032F62, #DBEDFF);--shiki-light:#032F62;--shiki-dark:#DBEDFF"],[12],[1,"("],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"gatherSchemePreferences"],[13],[10,1],[14,5,"color:light-dark(#032F62, #DBEDFF);--shiki-light:#032F62;--shiki-dark:#DBEDFF"],[12],[1,")"],[13],[10,1],[14,5,"color:light-dark(#032F62, #DBEDFF);--shiki-light:#032F62;--shiki-dark:#DBEDFF"],[12],[1," null"],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1," 4"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"}}"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"</"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"pre"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"</"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"template"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[13],[13],[13],[1,"\\n"],[10,2],[12],[1,"Linking to external stylesheets can be made reactive by  reading from the "],[10,"code"],[12],[1,"colorScheme"],[13],[1," object:"],[13],[1,"\\n"],[10,2],[12],[1,"Here is how this docs site swaps out the CSS theme for highlight.js, used for syntax highlighting:"],[13],[1,"\\n"],[10,0],[14,0,"repl-sdk__snippet"],[14,"data-repl-output",""],[12],[10,"pre"],[14,0,"shiki shiki-themes g

1ithub-light github-dark"],[14,5,"background-color:light-dark(#fff, #24292e);--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;color:light-dark(#24292e, #e1e4e8);--shiki-light:#24292e;--shiki-dark:#e1e4e8"],[14,"tabindex","0"],[12],[10,"code"],[12],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"import"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," { colorScheme } "],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"from"],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1," \'ember-primitives/color-scheme\'"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"function"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1," isDark"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"() {"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"  return"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," colorScheme.current "],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"==="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1," \'dark\'"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"}"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"<"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"template"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"  "],[1,"{{#"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"if"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1," (isDark)"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"}}"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"link"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," "],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"      rel"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\"stylesheet\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," "],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"      href"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\"https://cdn.jsdelivr.net/npm/[email protected]/styles/atom-one-dark.css\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," />"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"  "],[1,"{{"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"else"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"}}"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"link"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," "],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"      rel"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\"stylesheet\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," "],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"      href"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\"https://cdn.jsdelivr.net/npm/[email protected]/styles/atom-one-light.css\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," />"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"  "],[1,"{{/"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"if"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"}}"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"</"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"template"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[13],[13],[13],[1,"\\n"],[10,2],[12],[1,"Sometimes, you may wish to control the CSS via a class property on "],[10,"code"],[12],[1,"<body>"],[13],[1," or similar element."],[13],[1,"\\n"],[10,2],[12],[1,"To do that, you need an effect:"],[13],[1,"\\n"],[10,0],[14,0,"repl-sdk__snippet"],[14,"data-repl-output",""],[12],[10,"pre"],[14,0,"shiki shiki-themes g

1ithub-light github-dark"],[14,5,"background-color:light-dark(#fff, #24292e);--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;color:light-dark(#24292e, #e1e4e8);--shiki-light:#24292e;--shiki-dark:#e1e4e8"],[14,"tabindex","0"],[12],[10,"code"],[12],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"import"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," { colorScheme } "],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"from"],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1," \'ember-primitives/color-scheme\'"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"function"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1," syncBodyClass"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"() {"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"  if"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," (colorScheme.current "],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"==="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1," \'dark\'"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,") {"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    document.body.classList."],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"remove"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"("],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\'theme-light\'"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,");"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    document.body.classList."],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"add"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"("],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\'theme-dark\'"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,");"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  } "],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"else"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," {"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    document.body.classList."],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"remove"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"("],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\'theme-dark\'"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,");"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    document.body.classList."],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"add"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"("],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\'theme-light\'"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,");"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  }"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"}"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"<"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"template"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"  "],[1,"{{"],[13],[10,1],[14,5,"color:light-dark(#032F62, #DBEDFF);

1--shiki-light:#032F62;--shiki-dark:#DBEDFF"],[12],[1," ("],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"syncBodyClass"],[13],[10,1],[14,5,"color:light-dark(#032F62, #DBEDFF);--shiki-light:#032F62;--shiki-dark:#DBEDFF"],[12],[1,")"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1," }}"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"</"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"template"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[13],[13],[13],[1,"\\n"],[10,"h2"],[14,1,"install"],[12],[1,"Install"],[13],[1,"\\n"],[10,0],[14,1,"repl_156"],[14,0,"repl-sdk__demo"],[12],[8,[32,1],null,null,[["default"],[[[],[]]]]],[13],[1,"\\n"],[10,"h2"],[14,1,"api-reference"],[12],[1,"API Reference"],[13],[1,"\\n"],[10,0],[14,1,"repl_157"],[14,0,"repl-sdk__demo"],[12],[8,[32,2],null,

1null,[["default"],[[[],[]]]]],[13]],[],[]]',moduleName:"(unknown template module)",scope:()=>({repl_155:n,repl_156:F,repl_157:m}),isStrictMode:!0}),k());export{D as n,u as t};