Dracula Theme is not visible properly

yagnikvamja commented 9 months ago

Describe the bug

The dracula theme is not visible properly while doing Syntax Highlighting.

Reproduction

https://stackblitz.com/edit/vite-vnywhq?file=docs%2F.vitepress%2Fconfig.ts,docs%2Findex.md,docs%2Fexample.md

Expected behavior

Code snippet in example page should be in dracula (dark) theme.

System Info

System:
    OS: macOS 14.2.1
    CPU: (8) arm64 Apple M2
    Memory: 80.41 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v20.10.0/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 8.12.1 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 120.0.6099.199
    Safari: 17.2.1
  npmPackages:
    vitepress: 1.0.0-rc.36 => 1.0.0-rc.36

Additional context

N/A

Validations

[X] Check if you're on the latest VitePress version.
[X] Follow our Code of Conduct
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Zhengqbbb commented 9 months ago

The dracula theme has only dark themes, so that:

Change to another theme in light mode
Set your site to dark only

yagnikvamja commented 9 months ago

In my documention i want both the themes light and dark . And i want to set the theme dracula in both the modes.

brc-dd commented 9 months ago

In my documention i want both the themes light and dark . And i want to set the theme dracula in both the modes.

You'll need to write a dracula light theme yourself then.

jd-solanki commented 9 months ago

@brc-dd He is trying to force dark theme in snippets even when light theme is activated in VitePress like Anu:

Anu is still using older version of docs so I'm not getting this issue ATM but I'll prefer keeping dracula in both modes as well

I guess this should be feature request instead of bug report.

brc-dd commented 9 months ago

Use this CSS - https://github.com/vuejs/vitepress/issues/3154#issuecomment-1784612839

yagnikvamja commented 9 months ago

Thanks for the comment @brc-dd . It's working.

jd-solanki commented 9 months ago

It looks like according to everyone, VitePress should have option for forcing certain theme like previously we were doing.

Do you think we should consider this for feature req because everyone who want dark code snippet (even in light theme) they have to write custom CSS which was previously not the case?

vuejs / vitepress