import{_ as o}from"./chunks/PageInfo.vue_vue_type_script_setup_true_lang.65c6b98c.js";import{_ as e,o as r,c,k as s,a,E as t,O as l}from"./chunks/framework.c989bd33.js";import"./chunks/commonjsHelpers.725317a4.js";const m=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":1726417910000}'),y={name:"application/vitepress-plugin-shiki-twoslash/guide/custom-theme.md"};function i(C,n,A,d,D,h){const p=o;return r(),c("div",null,[n[0]||(n[0]=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)),t(p,{readTime:"2",words:"362"}),n[1]||(n[1]=l(`

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)),n[2]||(n[2]=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 github-dark-dimmed twoslash lsp",style:{"background-color":"#22272e",color:"#adbac7"}},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#F47067"}},"export"),s("span",{style:{color:"#F69D50"}}," "),s("span",{style:{color:"#F47067"}},"default"),s("span",{style:{color:"#F69D50"}}," "),s("span",{style:{color:"#DCBDFB"}},[s("data-lsp",{lsp:`(alias) defineConfig(config: UserConfig): UserConfig import defineConfig`},"defineConfig")]),s("span",{style:{color:"#F69D50"}},"({")]),s("div",{class:"line"},[s("span",{style:{color:"#F69D50"}}," "),s("span",{style:{color:"#ADBAC7"}},[s("data-lsp",{lsp:"(property) UserConfig.markdown?: MarkdownOptions | undefined"},"markdown"),a(": {")])]),s("div",{class:"line"},[s("span",{style:{color:"#ADBAC7"}},[a(" "),s("data-lsp",{lsp:"(property) MarkdownOptions.theme?: any"},"theme"),a(": { "),s("data-lsp",{lsp:"(property) dark: string"},"dark"),a(": ")]),s("span",{style:{color:"#96D0FF"}},"'vitesse-dark'"),s("span",{style:{color:"#ADBAC7"}},[a(", "),s("data-lsp",{lsp:"(property) light: string"},"light"),a(": ")]),s("span",{style:{color:"#96D0FF"}},"'vitesse-light'"),s("span",{style:{color:"#ADBAC7"}}," },")]),s("div",{class:"line"},[s("span",{style:{color:"#ADBAC7"}}," }"),s("span",{style:{color:"#F69D50"}},",")]),s("div",{class:"line"},[s("span",{style:{color:"#F69D50"}},"})")])])])]),s("pre",{class:"shiki github-light twoslash lsp",style:{"background-color":"#fff",color:"#24292e"}},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#D73A49"}},"export"),s("span",{style:{color:"#24292E"}}," "),s("span",{style:{color:"#D73A49"}},"default"),s("span",{style:{color:"#24292E"}}," "),s("span",{style:{color:"#6F42C1"}},[s("data-lsp",{lsp:`(alias) defineConfig(config: UserConfig): UserConfig import defineConfig`},"defineConfig")]),s("span",{style:{color:"#24292E"}},"({")]),s("div",{class:"line"},[s("span",{style:{color:"#24292E"}},[a(" "),s("data-lsp",{lsp:"(property) UserConfig.markdown?: MarkdownOptions | undefined"},"markdown"),a(": {")])]),s("div",{class:"line"},[s("span",{style:{color:"#24292E"}},[a(" "),s("data-lsp",{lsp:"(property) MarkdownOptions.theme?: any"},"theme"),a(": { "),s("data-lsp",{lsp:"(property) dark: string"},"dark"),a(": ")]),s("span",{style:{color:"#032F62"}},"'vitesse-dark'"),s("span",{style:{color:"#24292E"}},[a(", "),s("data-lsp",{lsp:"(property) light: string"},"light"),a(": ")]),s("span",{style:{color:"#032F62"}},"'vitesse-light'"),s("span",{style:{color:"#24292E"}}," },")]),s("div",{class:"line"},[s("span",{style:{color:"#24292E"}}," },")]),s("div",{class:"line"},[s("span",{style:{color:"#24292E"}},"})")])])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")])],-1)),n[3]||(n[3]=l(`

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))])}const E=e(y,[["render",i]]);export{m as __pageData,E as default};