From 869a47e532694995360e87a08044a91016c4cc4b Mon Sep 17 00:00:00 2001 From: Serpentarius13 Date: Fri, 1 Nov 2024 09:11:47 +0300 Subject: [PATCH] docs: add more descriptive multiple themes example (#823) lint: Use linter on md file --- docs/guide/dual-themes.md | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/docs/guide/dual-themes.md b/docs/guide/dual-themes.md index 40e963d7d..7c8885296 100644 --- a/docs/guide/dual-themes.md +++ b/docs/guide/dual-themes.md @@ -97,13 +97,27 @@ const code = await codeToHtml('console.log("hello")', { }) ``` -A token would be generated like: +`span` tokens would be generated with respective theme's css variables: ```html console ``` -Then update your CSS snippet to control when each theme takes effect. Here is an example: +After that, you need to apply theme's css variables on element with `shiki` class and tokens under it, for example, based on parent's `data-theme` property: + +```css +[data-theme='dark'] .shiki, +[data-theme='dark'] .shiki span { + background-color: var(--s-dark-bg) !important; + color: var(--s-dark) !important; +} + +[data-theme='dim'] .shiki, +[data-theme='dim'] .shiki span { + background-color: var(--s-dim-bg) !important; + color: var(--s-dim) !important; +} +``` [Demo preview](https://htmlpreview.github.io/?https://raw.githubusercontent.com/shikijs/shiki/main/packages/shiki/test/out/multiple-themes.html)