"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1279"],{818:function(e,t,s){s.r(t),s.d(t,{default:()=>f,frontMatter:()=>d,metadata:()=>o,assets:()=>m,toc:()=>u,contentTitle:()=>h});var o=JSON.parse('{"id":"features/themes","title":"Themes","description":"LiveCodes comes with dark and light themes. In addition, a theme color can be set to change the app color.","source":"@site/docs/features/themes.mdx","sourceDirName":"features","slug":"/features/themes","permalink":"/docs/features/themes","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/themes.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Default View","permalink":"/docs/features/default-view"},"next":{"title":"Mobile Support","permalink":"/docs/features/mobile"}}'),n=s("5893"),r=s("65"),i=s("4200"),a=s("7294"),l=s("3365");function c(){let{colorMode:e}=(0,i.I)(),t=[{name:"blue",themeColor:"lightblue"},{name:"cyan",themeColor:"hsl(192, 40%, 50%)"},{name:"green",themeColor:"rgb(77, 179, 114)"},{name:"amber",themeColor:"#b38d4d"},{name:"red",themeColor:"hsl(0, 40%, 50%)"},{name:"violet",themeColor:"rgb(114, 77, 179)"},{name:"slate",themeColor:"#667799"}],[s,o]=(0,a.useState)(e),[r,c]=(0,a.useState)(t[0].themeColor);return(0,n.jsxs)("form",{className:"form_bM8e",children:[(0,n.jsxs)("p",{children:["Theme:",(0,n.jsx)("input",{type:"radio",name:"theme",id:"light-theme",checked:"light"===s,onChange:()=>o("light")}),(0,n.jsx)("label",{htmlFor:"light-theme",children:"Light"}),(0,n.jsx)("input",{type:"radio",name:"theme",id:"dark-theme",checked:"dark"===s,onChange:()=>o("dark")}),(0,n.jsx)("label",{htmlFor:"dark-theme",children:"Dark"})]}),(0,n.jsxs)("p",{children:["Theme Color:",(0,n.jsx)("select",{name:"themeColor",id:"",onChange:e=>c(e.target.value),children:t.map(e=>{let{name:t,themeColor:s}=e;return(0,n.jsx)("option",{value:s,children:t},t)})})," ",(0,n.jsxs)("span",{className:"colorValue_LfXD",children:['"',r,'"']})]}),(0,n.jsx)(l.Z,{showCode:!1,config:{theme:s,themeColor:r},template:"react"})]})}let d={},h="Themes",m={},u=[{value:"Theme",id:"theme",level:2},{value:"Theme Color",id:"theme-color",level:2},{value:"Demo",id:"demo",level:2}];function p(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",header:"header",img:"img",li:"li",p:"p",ul:"ul",...(0,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"themes",children:"Themes"})}),"\n","\n",(0,n.jsx)(t.p,{children:"LiveCodes comes with dark and light themes. In addition, a theme color can be set to change the app color."}),"\n",(0,n.jsx)(t.h2,{id:"theme",children:"Theme"}),"\n",(0,n.jsx)(t.p,{children:"Dark/Light theme can be set in:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsx)(t.p,{children:"UI, either:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:"Dark/Light theme switch in toolbar"}),"\n",(0,n.jsx)(t.li,{children:"Settings menu \u2192 Dark theme switch"}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.a,{href:"/docs/configuration/query-params",children:"Query params"}),": ",(0,n.jsx)(t.code,{children:"?theme=dark"})," or ",(0,n.jsx)(t.code,{children:"?theme=light"}),".\ne.g. ",(0,n.jsx)(t.a,{href:"https://livecodes.io/?theme=light",children:"https://livecodes.io/?theme=light"})]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.a,{href:"/docs/configuration/configuration-object",children:"Configuration object"}),": ",(0,n.jsx)(t.a,{href:"/docs/configuration/configuration-object#theme",children:(0,n.jsx)(t.code,{children:"theme"})})," property."]}),"\n"]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"LiveCodes dark theme",src:s(1003).Z+"",width:"2240",height:"1400"})}),"\n",(0,n.jsx)("div",{className:"caption",children:"LiveCodes dark theme"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"LiveCodes light theme",src:s(7573).Z+"",width:"2240",height:"1400"})}),"\n",(0,n.jsx)("div",{className:"caption",children:"LiveCodes light theme"}),"\n",(0,n.jsx)(t.h2,{id:"theme-color",children:"Theme Color"}),"\n",(0,n.jsx)(t.p,{children:"Similarly, a theme color can be set in:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsx)(t.p,{children:"UI: Settings menu \u2192 Color"}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.a,{href:"/docs/configuration/query-params",children:"Query params"}),": ",(0,n.jsx)(t.code,{children:"?themeColor={color}"}),".\ne.g. ",(0,n.jsx)(t.a,{href:"https://livecodes.io/?themeColor=lightblue",children:"https://livecodes.io/?themeColor=lightblue"})]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.a,{href:"/docs/configuration/configuration-object",children:"Configuration object"}),": ",(0,n.jsx)(t.a,{href:"/docs/configuration/configuration-object#themecolor",children:(0,n.jsx)(t.code,{children:"themeColor"})})," property."]}),"\n"]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"LiveCodes alternate theme color",src:s(9334).Z+"",width:"2240",height:"1400"})}),"\n",(0,n.jsx)("div",{className:"caption",children:"Change theme color from UI"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"LiveCodes custom theme color",src:s(2658).Z+"",width:"2240",height:"1400"})}),"\n",(0,n.jsx)("div",{className:"caption",children:"Custom theme color"}),"\n",(0,n.jsx)(t.h2,{id:"demo",children:"Demo"}),"\n",(0,n.jsx)(c,{}),"\n",(0,n.jsx)(t.admonition,{title:"Note",type:"info",children:(0,n.jsxs)(t.p,{children:["Please note that editor themes can be set in the ",(0,n.jsx)(t.a,{href:"/docs/features/editor-settings",children:"editor settings"})," or using the ",(0,n.jsx)(t.a,{href:"/docs/configuration/configuration-object#editortheme",children:(0,n.jsx)(t.code,{children:"editorTheme"})})," configuration option."]})})]})}function f(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},1003:function(e,t,s){s.d(t,{Z:function(){return o}});let o=s.p+"assets/images/themes-1-c184a5ea8687727b1a0e690c8a465e02.jpg"},7573:function(e,t,s){s.d(t,{Z:function(){return o}});let o=s.p+"assets/images/themes-2-c08826d8eea2d618912b9b65e4898833.jpg"},9334:function(e,t,s){s.d(t,{Z:function(){return o}});let o=s.p+"assets/images/themes-3-75f2639c1c01a2a3db35cd2f86721d42.jpg"},2658:function(e,t,s){s.d(t,{Z:function(){return o}});let o=s.p+"assets/images/themes-4-18b621d69d0ddf788b1cb33d87885cae.jpg"},3365:function(e,t,s){s.d(t,{Z:()=>g});var o=s("5893"),n=s("4200"),r=s("7294"),i=s("8294");function a(e){let t=(0,r.useRef)(null),[s,n]=(0,r.useState)(e.className||""),[a,l]=(0,r.useState)(e.style||{}),[c,d]=(0,r.useState)(e.height),[h,m]=(0,r.useState)(),[u,p]=(0,r.useState)(JSON.stringify(e.config||"")),[f,g]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:s,style:o,height:r,sdkReady:a,config:c,...j}=e;if(n(s||""),l(o||{}),d(r),h&&f===JSON.stringify(j)){if(u===JSON.stringify(c))return;p(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{h?.setConfig(e)}):c&&h.setConfig(c)}else g(JSON.stringify(j)),h?.destroy(),(0,i.T)(t.current,{config:c,...j}).then(e=>{m(e),"function"==typeof a&&a(e)})},[e]),(0,r.useEffect)(()=>()=>{h?.destroy()},[]),(0,o.jsx)("div",{ref:t,className:s,style:a,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),h=s("7645"),m=s("8168"),u=s("8228"),p=s("5050");function f(e){let[t,s]=(0,r.useState)(e.js),[n,i]=(0,r.useState)(e.ts),[a,l]=(0,r.useState)(e.react),[f,g]=(0,r.useState)(e.vue),[j,v]=(0,r.useState)(e.svelte),y="3.7rem",[x,b]=(0,r.useState)(!0),[w,C]=(0,r.useState)(y),S=(0,r.useRef)(null),k=()=>{setTimeout(()=>{C(`calc(${S.current.offsetHeight}px + ${y})`)},5),setTimeout(()=>{C(`calc(${S.current.offsetHeight}px + ${y})`)},255)};return(0,r.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),i(e(n,"ts")),l(e(a,"jsx")),g(e(f,"html")),v(e(j,"html"))}},[]),(0,o.jsxs)("details",{className:`alert alert--info ${p.Z.details} ${u.Z.details}`,"data-collapsed":x,style:{height:x?y:w,overflow:"hidden",willChange:"height",transition:`height ${x?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,o.jsx)("summary",{onClick:()=>{b(!x),k()},children:"show code"}),(0,o.jsx)("div",{ref:S,style:{display:"block",overflow:"hidden"},children:(0,o.jsx)("div",{className:p.Z.collapsibleContent,children:(0,o.jsxs)(m.Z,{groupId:"sdk-code",children:[(0,o.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:k},children:(0,o.jsx)(d.Z,{language:"js",children:t})}),(0,o.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:k},children:(0,o.jsx)(d.Z,{language:"ts",children:n})}),(0,o.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:k},children:(0,o.jsx)(d.Z,{language:"jsx",children:a})}),(0,o.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:k},children:(0,o.jsx)(d.Z,{language:"html",children:f})}),(0,o.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:k},children:(0,o.jsx)(d.Z,{language:"html",children:j})})]})})})]})}function g(e){let{className:t,style:s,showCode:r,height:i,...c}=e,{colorMode:d}=(0,n.I)(),h=e=>JSON.stringify(e,null,2),m=`
import { createPlayground } from 'livecodes';

const options = ${h(c)};
createPlayground('#container', options);

`.trimStart(),u=`
import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = ${h(c)};
createPlayground('#container', options);

`.trimStart(),p=`
import LiveCodes from 'livecodes/react';

export default function App() {
  const options = ${h(c)};
  return (<LiveCodes {...options}></LiveCodes>);
}

`.trimStart(),g=`
<script setup>
import LiveCodes from "livecodes/vue";

const options = ${h(c)};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

`,j=`
<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

let options = $state(${h(c)});
let container = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>

`.trimStart();return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,o.jsx)(f,{js:m,ts:u,react:p,vue:g,svelte:j})]})}},8294:function(e,t,s){s.d(t,{T:function(){return n},r:function(){return r}});var o=s(7728);async function n(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:o,loading:n="lazy",view:i}=t,a=o||"headless"===i,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)S(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(r(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":n),d.searchParams.set("sdkVersion",process.env.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let m=t.params;"object"==typeof m&&Object.keys(m).length>0&&JSON.stringify(m).length<1800&&Object.keys(m).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(m[e])))});let u=!1,p="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let o="livecodes",r=l.querySelector(`iframe.${o}`),i=r||document.createElement("iframe");i.classList.add(o),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===n?"eager":"lazy"),a?S(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),i.onload=()=>{e(i)},i.src=d.href,r||l.appendChild(i)}),g=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),g.settled=!0)})}),j=()=>u?Promise.reject(p):new Promise(async e=>{g.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await g,e()}),v=(e,t)=>new Promise(async(s,o)=>{if(u)return o(p);await j();let n=k();addEventListener("message",function t(r){if(r.source===f.contentWindow&&r.origin===h&&r.data?.type==="livecodes-api-response"&&r.data?.id===n&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?o(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:n,args:t},h)}),y={},x=["load","ready","code","console","tests","destroy"],b=(e,t)=>{if(u)throw Error(p);return x.includes(e)?(v("watch",[e]),y[e]||(y[e]=[]),y[e]?.push(t),{remove:()=>{y[e]=y[e]?.filter(e=>e!==t),y[e]?.length===0&&v("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},w=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=w(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!y[t])return;let s=e.data?.payload;y[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(y).forEach(e=>{e.length=0}),f?.remove?.(),u=!0};function S(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===n&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await j(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let k=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>j(),run:()=>v("run"),format:e=>v("format",[e]),getShareUrl:e=>v("getShareUrl",[e]),getConfig:e=>v("getConfig",[e]),setConfig:e=>v("setConfig",[e]),getCode:()=>v("getCode"),show:(e,t)=>v("show",[e,t]),runTests:()=>v("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),o=1;o<t;o++)s[o-1]=arguments[o];return v("exec",[e,...s])},destroy:()=>g.settled?v("destroy").then(C):u?Promise.reject(p):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:n={},config:r={},headless:i,import:a,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,o]=t;void 0!==o&&e.searchParams.set(s,String(o))});let m="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==c?r.view=c:e.searchParams.set("view",c)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),h.set("config","code/"+(0,o.compressToEncodedURIComponent)(JSON.stringify(r))));if(n&&"object"==typeof n&&Object.keys(n).length>0)try{h.set("params",(0,o.compressToEncodedURIComponent)(JSON.stringify(n)))}catch{Object.keys(n).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(n[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),m&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return i}});var o=s(7294);let n={},r=o.createContext(n);function i(e){let t=o.useContext(r);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]);