import{_ as p}from"./chunks/PageInfo.vue_vue_type_script_setup_true_lang.70cf5f11.js";import{_ as e,o,c as r,H as t,k as s,a,Q as n}from"./chunks/framework.b7580407.js";import"./chunks/commonjsHelpers.725317a4.js";const D=JSON.parse('{"title":"Using a Custom Theme","description":"Customize the Twoslash interface to match your theme.","frontmatter":{"description":"Customize the Twoslash interface to match your theme.","title":"Using a Custom Theme"},"headers":[],"relativePath":"application/vitepress-plugin-shiki-twoslash/guide/custom-theme.md","filePath":"application/vitepress-plugin-shiki-twoslash/guide/custom-theme.md","lastUpdated":1694942052000}'),c={name:"application/vitepress-plugin-shiki-twoslash/guide/custom-theme.md"},i=s("h1",{id:"using-a-custom-theme",tabindex:"-1"},[a("Using a Custom Theme "),s("a",{class:"header-anchor",href:"#using-a-custom-theme","aria-label":'Permalink to "Using a Custom Theme"'},"​")],-1),y=n(`

Twoslash uses your markdown.theme for syntax highlighting, but there are a few other things you can do to customize the look and feel of your code examples — particulary the generated Twoslash interface.

CSS Variables ​

The following CSS variables (and their defaults) are available to style Twoslash interface:

css
:root {
    --vp-twoslash-c-annotation-fg: var(--vp-c-text-1);

    --vp-twoslash-c-brand: var(--vp-c-brand);

    --vp-twoslash-c-error-bg: var(--vp-c-red-dimm-2);
    --vp-twoslash-c-error-fg: var(--vp-c-text-1);

    --vp-twoslash-c-logger-error-bg: var(--vp-c-red-dimm-2);
    --vp-twoslash-c-logger-error-fg: var(--vp-c-red-dark);
    --vp-twoslash-c-logger-fg: var(--vp-c-text-1);
    --vp-twoslash-c-logger-log-bg: var(--vp-c-mute-dark);
    --vp-twoslash-c-logger-log-fg: var(--vp-c-gray);
    --vp-twoslash-c-logger-warn-bg: var(--vp-c-yellow-dimm-2);
    --vp-twoslash-c-logger-warn-fg: var(--vp-c-yellow-dark);

    --vp-twoslash-c-lsp-bg: var(--vp-c-bg-elv);
    --vp-twoslash-c-lsp-border: var(--vp-c-divider);
    --vp-twoslash-c-lsp-fg: var(--vp-c-text-1);
    --vp-twoslash-c-lsp-underline: var(--vp-c-text-2);
    --vp-twoslash-lsp-shadow: var(--vp-shadow-2);

    --vp-twoslash-c-query-bg: var(--vp-c-mute-darker);
    --vp-twoslash-c-query-fg-2: var(--vp-c-text-2);
    --vp-twoslash-c-query-fg: var(--vp-c-text-1);
}
:root {
    --vp-twoslash-c-annotation-fg: var(--vp-c-text-1);

    --vp-twoslash-c-brand: var(--vp-c-brand);

    --vp-twoslash-c-error-bg: var(--vp-c-red-dimm-2);
    --vp-twoslash-c-error-fg: var(--vp-c-text-1);

    --vp-twoslash-c-logger-error-bg: var(--vp-c-red-dimm-2);
    --vp-twoslash-c-logger-error-fg: var(--vp-c-red-dark);
    --vp-twoslash-c-logger-fg: var(--vp-c-text-1);
    --vp-twoslash-c-logger-log-bg: var(--vp-c-mute-dark);
    --vp-twoslash-c-logger-log-fg: var(--vp-c-gray);
    --vp-twoslash-c-logger-warn-bg: var(--vp-c-yellow-dimm-2);
    --vp-twoslash-c-logger-warn-fg: var(--vp-c-yellow-dark);

    --vp-twoslash-c-lsp-bg: var(--vp-c-bg-elv);
    --vp-twoslash-c-lsp-border: var(--vp-c-divider);
    --vp-twoslash-c-lsp-fg: var(--vp-c-text-1);
    --vp-twoslash-c-lsp-underline: var(--vp-c-text-2);
    --vp-twoslash-lsp-shadow: var(--vp-shadow-2);

    --vp-twoslash-c-query-bg: var(--vp-c-mute-darker);
    --vp-twoslash-c-query-fg-2: var(--vp-c-text-2);
    --vp-twoslash-c-query-fg: var(--vp-c-text-1);
}

Dark/Light Theme ​

If you pass a responsive theme to markdown.theme, you probably also want to hide/show the correct theme based on the user's settings.

`,6),d=s("div",{class:"language-ts vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"ts"),s("pre",{class:"shiki solarized-dark twoslash lsp",style:{"background-color":"#002B36",color:"#839496"}},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"export"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"default"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) defineConfig(config: UserConfig): UserConfig import defineConfig`},"defineConfig")]),s("span",{style:{color:"#839496"}},"({")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}},[a(" "),s("data-lsp",{lsp:"(property) UserConfig.markdown?: MarkdownOptions | undefined"},"markdown"),a(": {")])]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}},[a(" "),s("data-lsp",{lsp:"(property) MarkdownOptions.theme?: any"},"theme"),a(": { "),s("data-lsp",{lsp:"(property) dark: string"},"dark"),a(": ")]),s("span",{style:{color:"#2AA198"}},"'vitesse-dark'"),s("span",{style:{color:"#839496"}},[a(", "),s("data-lsp",{lsp:"(property) light: string"},"light"),a(": ")]),s("span",{style:{color:"#2AA198"}},"'vitesse-light'"),s("span",{style:{color:"#839496"}}," },")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," },")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}},"})")])])])]),s("pre",{class:"shiki solarized-light twoslash lsp",style:{"background-color":"#FDF6E3",color:"#657B83"}},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"export"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"default"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) defineConfig(config: UserConfig): UserConfig import defineConfig`},"defineConfig")]),s("span",{style:{color:"#657B83"}},"({")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},[a(" "),s("data-lsp",{lsp:"(property) UserConfig.markdown?: MarkdownOptions | undefined"},"markdown"),a(": {")])]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},[a(" "),s("data-lsp",{lsp:"(property) MarkdownOptions.theme?: any"},"theme"),a(": { "),s("data-lsp",{lsp:"(property) dark: string"},"dark"),a(": ")]),s("span",{style:{color:"#2AA198"}},"'vitesse-dark'"),s("span",{style:{color:"#657B83"}},[a(", "),s("data-lsp",{lsp:"(property) light: string"},"light"),a(": ")]),s("span",{style:{color:"#2AA198"}},"'vitesse-light'"),s("span",{style:{color:"#657B83"}}," },")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," },")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},"})")])])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")])],-1),h=n(`

You can do this with the following CSS:

css
/*
 * Hide block based on theme
 * \`[class*='-dark']\` matches \`'vitesse-dark'\`
 * \`[class*='-light']\` matches \`'vitesse-light'\`
 */
html:not(.dark) pre.shiki[class*='-dark'] {
    display: none;
}
html:not(.dark) pre.shiki[class*='-light'] {
    display: block;
}
html.dark pre.shiki[class*='-dark'] {
    display: block;
}
html.dark pre.shiki[class*='-light'] {
    display: none;
}
/*
 * Hide block based on theme
 * \`[class*='-dark']\` matches \`'vitesse-dark'\`
 * \`[class*='-light']\` matches \`'vitesse-light'\`
 */
html:not(.dark) pre.shiki[class*='-dark'] {
    display: none;
}
html:not(.dark) pre.shiki[class*='-light'] {
    display: block;
}
html.dark pre.shiki[class*='-dark'] {
    display: block;
}
html.dark pre.shiki[class*='-light'] {
    display: none;
}
`,2);function v(m,g,b,B,u,A){const l=p;return o(),r("div",null,[i,t(l,{readTime:"2",words:"362"}),y,d,h])}const _=e(c,[["render",v]]);export{D as __pageData,_ as default};