import{s as fa,e as c,a as i,c as u,l as m,g as r,p as h,i as p,f as t,H as X,b as Z,m as aa,n as sa}from"./scheduler.DKiYiPX0.js";import{S as ga,i as va,c as F,a as G,m as J,t as K,b as N,d as Q}from"./index.z4bt_ZBS.js";import{C as V}from"./Code.tlNrnEug.js";function _a(d){let s,o,k=`

<div class="carta-editor carta-theme__<theme>">
	<div class="carta-toolbar">
		<div class="carta-toolbar-left">
			<!-- ... -->
		</div>
		<div class="carta-toolbar-right">
			<button class="carta-icon"><!-- ... --></button>
			<!-- Other icons -->
		</div>
	</div>

	<div class="carta-wrapper">
		<div class="carta-container mode-<split|tabs>">
			<div class="carta-input-wrapper">
				<pre class="carta-font-code"><!-- ... --></pre>
				<textarea class="carta-font-code" id="md" />
			</div>
			<div class="carta-renderer">
				<!-- Rendered Markdown -->
			</div>
		</div>
	</div>
</div>

/* Editor dark mode */
/* Only if you are using the default theme */
html.dark .carta-theme__default {
	--border-color: var(--border-color-dark);
	--selection-color: var(--selection-color-dark);
	--focus-outline: var(--focus-outline-dark);
	--hover-color: var(--hover-color-dark);
	--caret-color: var(--caret-color-dark);
	--text-color: var(--text-color-dark);
}

/* Code dark mode */
/* Only if you didn't specify a custom code theme */
html.dark .shiki,
html.dark .shiki span {
	color: var(--shiki-dark) !important;
}

const carta = new Carta({
	// ...
	theme: 'github-dark'
});

const carta = new Carta({
	// ...
	shikiOptions: {
		langs: // ...
		themes: // ...
	}
})

`;return{c(){s=c("pre"),o=new X(!1),this.h()},l(e){s=u(e,"PRE",{class:!0});var l=Z(s);o=aa(l,!1),l.forEach(t),this.h()},h(){o.a=null,h(s,"class","language-ts")},m(e,l){p(e,s,l),o.m(k,s)},p:sa,d(e){e&&t(s)}}}function Ha(d){let s,o='Customizing editor styles',k,e,l="While the core styles are embedded in the Svelte components, the others can be set in a custom stylesheet. Here is what the final rendered HTML looks like.",q,f,E,g,na='Using multiple themes',P,C,ta="By using the theme property in <MarkdownEditor> you can differentiate the themes of multiple editors.",S,v,ea='Dark mode',O,x,pa="When using dark mode, there are two different themes that have to be changed: the editor theme and the one used for syntax highlighting:",R,_,z,$,oa='Changing Markdown input color theme',I,M,la='Carta uses Shiki for syntax highlighting. Two default themes are included in the core package, which are set as a dual theme to support light and dark mode. If you plan to use a custom one with light/dark modes, make sure to use a dual theme as well.',j,T,ca="You can change theme in the options:",W,w,B,b,ua='If you use a custom theme(or a custom language), you need to provide it inside the options, so that it gets loaded into the highlighter:',D,y,U,H,ia='Markdown stylesheets',Y,L,ra='Markdown is converted into standard HTML, so you can edit the final styles by using standard CSS rules. If you do not wish to create one from the ground up, you can use some already complete stylesheets, like github-markdown-css or Tailwind Typography.',A;return f=new V({props:{$$slots:{default:[_a]},$$scope:{ctx:d}}}),_=new V({props:{$$slots:{default:[$a]},$$scope:{ctx:d}}}),w=new V({props:{$$slots:{default:[wa]},$$scope:{ctx:d}}}),y=new V({props:{$$slots:{default:[ya]},$$scope:{ctx:d}}}),{c(){s=c("h2"),s.innerHTML=o,k=i(),e=c("p"),e.textContent=l,q=i(),F(f.$$.fragment),E=i(),g=c("h3"),g.innerHTML=na,P=i(),C=c("p"),C.innerHTML=ta,S=i(),v=c("h2"),v.innerHTML=ea,O=i(),x=c("p"),x.textContent=pa,R=i(),F(_.$$.fragment),z=i(),$=c("h2"),$.innerHTML=oa,I=i(),M=c("p"),M.innerHTML=la,j=i(),T=c("p"),T.textContent=ca,W=i(),F(w.$$.fragment),B=i(),b=c("p"),b.innerHTML=ua,D=i(),F(y.$$.fragment),U=i(),H=c("h2"),H.innerHTML=ia,Y=i(),L=c("p"),L.innerHTML=ra,this.h()},l(a){s=u(a,"H2",{id:!0,"data-svelte-h":!0}),m(s)!=="svelte-1oq9x79"&&(s.innerHTML=o),k=r(a),e=u(a,"P",{"data-svelte-h":!0}),m(e)!=="svelte-1d8k47q"&&(e.textContent=l),q=r(a),G(f.$$.fragment,a),E=r(a),g=u(a,"H3",{id:!0,"data-svelte-h":!0}),m(g)!=="svelte-1w3acjm"&&(g.innerHTML=na),P=r(a),C=u(a,"P",{"data-svelte-h":!0}),m(C)!=="svelte-fatvzl"&&(C.innerHTML=ta),S=r(a),v=u(a,"H2",{id:!0,"data-svelte-h":!0}),m(v)!=="svelte-50vs2h"&&(v.innerHTML=ea),O=r(a),x=u(a,"P",{"data-svelte-h":!0}),m(x)!=="svelte-1p81he7"&&(x.textContent=pa),R=r(a),G(_.$$.fragment,a),z=r(a),$=u(a,"H2",{id:!0,"data-svelte-h":!0}),m($)!=="svelte-fxmyja"&&($.innerHTML=oa),I=r(a),M=u(a,"P",{"data-svelte-h":!0}),m(M)!=="svelte-1eehkcf"&&(M.innerHTML=la),j=r(a),T=u(a,"P",{"data-svelte-h":!0}),m(T)!=="svelte-ex141y"&&(T.textContent=ca),W=r(a),G(w.$$.fragment,a),B=r(a),b=u(a,"P",{"data-svelte-h":!0}),m(b)!=="svelte-1ebbpib"&&(b.innerHTML=ua),D=r(a),G(y.$$.fragment,a),U=r(a),H=u(a,"H2",{id:!0,"data-svelte-h":!0}),m(H)!=="svelte-16btwno"&&(H.innerHTML=ia),Y=r(a),L=u(a,"P",{"data-svelte-h":!0}),m(L)!=="svelte-18c97fa"&&(L.innerHTML=ra),this.h()},h(){h(s,"id","customizing-editor-styles"),h(g,"id","using-multiple-themes"),h(v,"id","dark-mode"),h($,"id","changing-markdown-input-color-theme"),h(H,"id","markdown-stylesheets")},m(a,n){p(a,s,n),p(a,k,n),p(a,e,n),p(a,q,n),J(f,a,n),p(a,E,n),p(a,g,n),p(a,P,n),p(a,C,n),p(a,S,n),p(a,v,n),p(a,O,n),p(a,x,n),p(a,R,n),J(_,a,n),p(a,z,n),p(a,$,n),p(a,I,n),p(a,M,n),p(a,j,n),p(a,T,n),p(a,W,n),J(w,a,n),p(a,B,n),p(a,b,n),p(a,D,n),J(y,a,n),p(a,U,n),p(a,H,n),p(a,Y,n),p(a,L,n),A=!0},p(a,[n]){const ka={};n&1&&(ka.$$scope={dirty:n,ctx:a}),f.$set(ka);const ma={};n&1&&(ma.$$scope={dirty:n,ctx:a}),_.$set(ma);const da={};n&1&&(da.$$scope={dirty:n,ctx:a}),w.$set(da);const ha={};n&1&&(ha.$$scope={dirty:n,ctx:a}),y.$set(ha)},i(a){A||(K(f.$$.fragment,a),K(_.$$.fragment,a),K(w.$$.fragment,a),K(y.$$.fragment,a),A=!0)},o(a){N(f.$$.fragment,a),N(_.$$.fragment,a),N(w.$$.fragment,a),N(y.$$.fragment,a),A=!1},d(a){a&&(t(s),t(k),t(e),t(q),t(E),t(g),t(P),t(C),t(S),t(v),t(O),t(x),t(R),t(z),t($),t(I),t(M),t(j),t(T),t(W),t(B),t(b),t(D),t(U),t(H),t(Y),t(L)),Q(f,a),Q(_,a),Q(w,a),Q(y,a)}}}const Ta={title:"Editing Styles",section:"Overview"};class ba extends ga{constructor(s){super(),va(this,s,null,Ha,fa,{})}}export{ba as default,Ta as metadata};