Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

feat: support (at least) dual themes #26

Merged
merged 2 commits into from
Nov 5, 2024

Conversation

Barbapapazes
Copy link
Contributor

@Barbapapazes Barbapapazes commented Nov 5, 2024

Hello 👋

This PR adds the support for dual themes in Shiki. This is very useful when a website have both a light and a dark theme.

With this feature, developers can still specifies a single theme but also two themes using an associative array.

In shiki.js, I use both variables theme and themes to align with the original Shiki API.

related to https://shiki.style/guide/dual-themes
fix #22

I'm sorry for the formatting stuff in the JS files but I could open another PR to add a JS formatter.

I'm not a PHP expert and I'm not sure how to solve this type issue.

@riasvdv
Copy link
Member

riasvdv commented Nov 5, 2024

Can you rebase on the main branch? I've updated the github actions to drop PHP 7.4 support

@riasvdv riasvdv merged commit 45db989 into spatie:main Nov 5, 2024
8 checks passed
@riasvdv
Copy link
Member

riasvdv commented Nov 5, 2024

Thanks!

@Barbapapazes
Copy link
Contributor Author

Thanks!

That was quick! Thanks! I will open PRs in related packages to make it available to shiki-laravel.

@Barbapapazes
Copy link
Contributor Author

Barbapapazes commented Nov 12, 2024

I've update laravel-markdown to my website and I could have make a mistake no mistake but I only implement one way.

With dual theme, I should not use color:#<color>;--shiki-dark:#<color> because the only way to overwrite the default theme is to use !important in the CSS. I verify the source code of Shiki website and both light and dark must be put through variables and them apply using CSS.

.dark .vp-code span {
  color: var(--shiki-dark, inherit);
}

html:not(.dark) .vp-code span {
  color: var(--shiki-light, inherit);
}

With the current implementation, the developer has to define !important to make sure the stylesheet overwrite the inline style.

We could support a new option: https://shiki.style/guide/dual-themes#without-default-color to avoid this.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants