fix: add reactive theme content by kieranwv · Pull Request #7218 · withastro/docs

kieranwv · 2024-03-07T12:38:23Z

Description (required)

In shiki's configuration, I set experimentalThemes: { } as documented, but it doesn't work when I dynamically switch dark mode and light mode.

Then I checked the official documentation of shiki and found that I need to manually set some css fragments to get reactive dark mode.

I replaced the .shiki class name with .astro-code and added the code to my documentation project and now it works fine.

I added this usage to the document, hoping to help developers who are unfamiliar with shiki. 😀

vercel · 2024-03-07T12:38:30Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	May 6, 2024 11:58am

astrobot-houston · 2024-03-07T12:38:52Z

Hello! Thank you for opening your first PR to Astro’s Docs! 🎉

Here’s what will happen next:

Our GitHub bots will run to check your changes.
If they spot any broken links you will see some error messages on this PR.
Don’t hesitate to ask any questions if you’re not sure what these mean!
In a few minutes, you’ll be able to see a preview of your changes on Vercel 🥳
One or more of our maintainers will take a look and may ask you to make changes.
We try to be responsive, but don’t worry if this takes a few days.

Eveeifyeve · 2024-03-07T15:08:20Z

!coauthor

github-actions · 2024-03-07T15:08:33Z

Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com>
Co-authored-by: Eveeifyeve <88671402+Eveeifyeve@users.noreply.github.com>

sarah11918 · 2024-03-11T23:51:44Z

Hi @kaivanwong ! This looks really cool!

We did just update our Shiki config though, and now instead of experimentalThemes it's just themes. Would you mind testing and make sure this still works with themes?

(See the updated, live docs now: https://docs.astro.build/en/guides/markdown-content/#shiki-configuration )

I will also ask @delucis to review, but we are a bit busy with launch week, so thank you for your patience as we catch up! 😄

kieranwv · 2024-03-12T01:03:42Z

Hi @kaivanwong ! This looks really cool!

We did just update our Shiki config though, and now instead of experimentalThemes it's just themes. Would you mind testing and make sure this still works with themes?

(See the updated, live docs now: docs.astro.build/en/guides/markdown-content/#shiki-configuration )

I will also ask @delucis to review, but we are a bit busy with launch week, so thank you for your patience as we catch up! 😄

Sure, I tested themes and it work normaly, thank you.

Also, it will be great if the experimental field names stay as the same. If I upgrade the version of Astro, I don't need to change my code. 😁

Eveeifyeve · 2024-03-12T12:25:28Z

Hi @kaivanwong ! This looks really cool!

We did just update our Shiki config though, and now instead of experimentalThemes it's just themes. Would you mind testing and make sure this still works with themes?

(See the updated, live docs now: https://docs.astro.build/en/guides/markdown-content/#shiki-configuration )

I will also ask @delucis to review, but we are a bit busy with launch week, so thank you for your patience as we catch up! 😄

Yeah I thought this LGTM Since I would use this feature as well.

sarah11918 · 2024-03-18T13:46:33Z

Hi @kaivanwong ! We're all catching up now after a busy launch week, and I just noticed the second file changed in this PR, too.

Can you please remove the zh file in this PR? When content changes are proposed to the English site, the PR should contain only a change to the English file, which is treated as the source file for our i18n tracking system.

Only after the English is reviewed, edited, and approved do we consider changes ready for translation. Even small changes to the English site are often revised before publishing, so we ask that you not worry about submitting a translation at the same time, to save you time, and because we have a system for translations already! 🙌

kieranwv · 2024-03-19T01:27:26Z

Hi @kaivanwong ! We're all catching up now after a busy launch week, and I just noticed the second file changed in this PR, too.

Can you please remove the zh file in this PR? When content changes are proposed to the English site, the PR should contain only a change to the English file, which is treated as the source file for our i18n tracking system.

Only after the English is reviewed, edited, and approved do we consider changes ready for translation. Even small changes to the English site are often revised before publishing, so we ask that you not worry about submitting a translation at the same time, to save you time, and because we have a system for translations already! 🙌

ok, it doesn't matter, I've seen a major update happening to Astro recently. Now, I droped the commit for the zh file.

sarah11918

Hi @kaivanwong , thank you for your patience while we discussed this proposed change internally!

We are glad you added the extra information about the astro-code class, and think that's really helpful to have here. We have decided that the exact implementation should be left to Shiki's own docs, since they do have this example there and will keep it updated and maintained. We try whenever possible not to document anything that might change without us knowing if it already exists somewhere else and we can just link to it.

I think adding just a note, and not the specific implementation, calls more attention to Astro's class name, which is really the key idea to get across!

So see what you think of this suggestion!

sarah11918 · 2024-05-01T13:26:14Z

src/content/docs/en/guides/markdown-content.mdx

+#### Light and Dark Mode
+
+To make it reactive to your site's theme, you need to add a short CSS snippet:
+
+```css title="Query-based Dark Mode"
+@media (prefers-color-scheme: dark) {
+  .astro-code,
+  .astro-code span {
+    color: var(--shiki-dark) !important;
+    background-color: var(--shiki-dark-bg) !important;
+    /* Optional, if you also want font styles */
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+  }
+}
+```
+
+```css title="Class-based Dark Mode"
+html.dark .astro-code,
+html.dark .astro-code span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  /* Optional, if you also want font styles */
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}
+```
+
+> The class name used in [shiki](https://shiki.style/guide/dual-themes#query-based-dark-mode) is `.shiki`, here you need to use `.astro-code`.
+


Suggested change

#### Light and Dark Mode

To make it reactive to your site's theme, you need to add a short CSS snippet:

```css title="Query-based Dark Mode"

@media (prefers-color-scheme: dark) {

.astro-code,

.astro-code span {

color: var(--shiki-dark) !important;

background-color: var(--shiki-dark-bg) !important;

/* Optional, if you also want font styles */

font-style: var(--shiki-dark-font-style) !important;

font-weight: var(--shiki-dark-font-weight) !important;

text-decoration: var(--shiki-dark-text-decoration) !important;

}

}

```

```css title="Class-based Dark Mode"

html.dark .astro-code,

html.dark .astro-code span {

color: var(--shiki-dark) !important;

background-color: var(--shiki-dark-bg) !important;

/* Optional, if you also want font styles */

font-style: var(--shiki-dark-font-style) !important;

font-weight: var(--shiki-dark-font-weight) !important;

text-decoration: var(--shiki-dark-text-decoration) !important;

}

```

> The class name used in [shiki](https://shiki.style/guide/dual-themes#query-based-dark-mode) is `.shiki`, here you need to use `.astro-code`.

:::note [Customizing Shiki themes]

Astro code blocks are styled using the `.astro-code` class. When following Shiki's documentation (e.g. to [customize light/dark dual or multiple themes](https://shiki.style/guide/dual-themes#query-based-dark-mode)), be sure to replace the `.shiki` class in the examples with `.astro-code`

:::

I think this note helpfully sends people to a better place to see the example (because Shiki will maintain it and keep it updated in the event that things change) and emphasizes the important point which is the astro-code class used! There may be other situations, not just light and dark mode, where knowing this is helpful to the reader.

😀 Thank you very much for your and I think you are right.

astrobot-houston · 2024-05-06T01:46:04Z

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

Locale	File	Note
en	guides/markdown-content.mdx	Source changed, localizations will be marked as outdated.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

sarah11918

Thank you @kaivanwong ! I think this note is going to be really helpful, and really call attention to the main point. Thank you for taking the time to contribute this, and welcome to Team Docs! 🥳

kieranwv · 2024-05-06T11:51:33Z

Thank you @kaivanwong ! I think this note is going to be really helpful, and really call attention to the main point. Thank you for taking the time to contribute this, and welcome to Team Docs! 🥳

Thank you, and I am happy to be able to make some small contribution. 😸

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> Co-authored-by: Eveeifyeve <88671402+Eveeifyeve@users.noreply.github.com>

Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com>

* i18n(fr): Update guides/astro-db from #8478 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/backend from #8450 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/backend/google-firebase from #8422 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/cms/apostrophecms from #8480 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/cms/builderio from #8259 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/cms/directus from #8647 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/cms/ghost from #8518 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/cms/statamic from #7119 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/content-collections from #8447 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/data-fetching from #8210 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/deploy/cloudflare from #8421 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/deploy/netlify from #8233 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/deploy/render from #8233 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/deploy/vercel from #8217 (and fix little typos) Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/environment-variables from #8533 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/environment-variables from #8611 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/images from #8447 #8646 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/integrations-guide from #8575 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/integrations-guide/cloudflare from #8211 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/integrations-guide/lit from #8270 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/integrations-guide/markdoc from #8167 (Steeeeps) Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/integrations-guide/preact from #8644 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/integrations-guide/react from #8038 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/integrations-guide/vue from #8295 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/markdown-content from #7218 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/markdown-content from #8167 #8239 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/middleware from #8572 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/prefetch from #8246 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/routing from #8466 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/rss from #8632 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/testing from #8369 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update guides/view-transitions from #8646 Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Fix typo in routing.mdx Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Fix links ? Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Fix badge Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Fix badge Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Fix tabs Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Fix tabs Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * Update src/content/docs/fr/guides/environment-variables.mdx Co-authored-by: pioupia <49518790+pioupia@users.noreply.github.com> * Update src/content/docs/fr/guides/integrations-guide/lit.mdx Co-authored-by: pioupia <49518790+pioupia@users.noreply.github.com> * Update src/content/docs/fr/guides/integrations-guide/vue.mdx Co-authored-by: pioupia <49518790+pioupia@users.noreply.github.com> * Update src/content/docs/fr/guides/markdown-content.mdx Co-authored-by: pioupia <49518790+pioupia@users.noreply.github.com> * Update src/content/docs/fr/guides/middleware.mdx Co-authored-by: pioupia <49518790+pioupia@users.noreply.github.com> * Update src/content/docs/fr/guides/testing.mdx Co-authored-by: pioupia <49518790+pioupia@users.noreply.github.com> * Update src/content/docs/fr/guides/testing.mdx Co-authored-by: pioupia <49518790+pioupia@users.noreply.github.com> * Update src/content/docs/fr/guides/testing.mdx Co-authored-by: pioupia <49518790+pioupia@users.noreply.github.com> * i18n(fr): Fix links Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): Update `tutorial/6-islands` because CI links err Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): fix links Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> * i18n(fr): fix links Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> --------- Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com> Co-authored-by: pioupia <49518790+pioupia@users.noreply.github.com> Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com>

fix: add reactive theme content

dcc3340

github-actions bot added the i18n Anything to do with internationalization & translation efforts - ask @YanThomas for help! label Mar 7, 2024

vercel bot deployed to Preview – docs March 7, 2024 12:52 View deployment

kieranwv force-pushed the fix/shiki-reactive-theme branch from b6c9964 to dcc3340 Compare March 19, 2024 01:24

github-actions bot removed the i18n Anything to do with internationalization & translation efforts - ask @YanThomas for help! label Mar 19, 2024

vercel bot deployed to Preview – docs March 19, 2024 01:37 View deployment

sarah11918 reviewed May 1, 2024

View reviewed changes

sarah11918 added the add new content Document something that is not in docs. May require testing, confirmation, or affect other pages. label May 1, 2024

sarah11918 mentioned this pull request May 3, 2024

fix: better description and explanation of how to use the dual themes of Shiki #8174

Closed

feat: use a link for themes

899d50b

vercel bot deployed to Preview – docs May 6, 2024 01:55 View deployment

sarah11918 added 2 commits May 6, 2024 08:37

remove section heading

389b311

Merge branch 'main' into fix/shiki-reactive-theme

8f43caf

sarah11918 approved these changes May 6, 2024

View reviewed changes

vercel bot deployed to Preview – docs May 6, 2024 11:58 View deployment

sarah11918 merged commit 6c0af6a into withastro:main May 6, 2024

This was referenced May 7, 2024

i18n(zh-cn): use <Steps> components for many files. #8182

Merged

i18n(zh-cn): update markdown-content.mdx #8230

Merged

tarikrital pushed a commit to tarikrital/astro-docs that referenced this pull request May 9, 2024

fix: add reactive theme content (withastro#7218)

66610ea

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> Co-authored-by: Eveeifyeve <88671402+Eveeifyeve@users.noreply.github.com>

tarikrital pushed a commit to tarikrital/astro-docs that referenced this pull request May 15, 2024

fix: add reactive theme content (withastro#7218)

42aeb57

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> Co-authored-by: Eveeifyeve <88671402+Eveeifyeve@users.noreply.github.com>

tarikrital pushed a commit to tarikrital/astro-docs that referenced this pull request May 15, 2024

fix: add reactive theme content (withastro#7218)

5834b93

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> Co-authored-by: Eveeifyeve <88671402+Eveeifyeve@users.noreply.github.com>

thomasbnt added a commit to thomasbnt/docs that referenced this pull request Jun 25, 2024

i18n(fr): Update guides/markdown-content from withastro#7218

7c57d41

Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com>

thomasbnt mentioned this pull request Jun 25, 2024

i18n(fr): Update all Guides files in French language (june 25) #8673

Merged

Uh oh!

Conversation

kieranwv commented Mar 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description (required)

Uh oh!

vercel bot commented Mar 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

astrobot-houston commented Mar 7, 2024

Uh oh!

Eveeifyeve commented Mar 7, 2024

Uh oh!

github-actions bot commented Mar 7, 2024

Uh oh!

sarah11918 commented Mar 11, 2024

Uh oh!

kieranwv commented Mar 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Eveeifyeve commented Mar 12, 2024

Uh oh!

sarah11918 commented Mar 18, 2024

Uh oh!

kieranwv commented Mar 19, 2024

Uh oh!

sarah11918 left a comment

Choose a reason for hiding this comment

Uh oh!

sarah11918 May 1, 2024

Choose a reason for hiding this comment

Uh oh!

kieranwv May 6, 2024

Choose a reason for hiding this comment

Uh oh!

astrobot-houston commented May 6, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Lunaria Status Overview

Tracked Files

Uh oh!

sarah11918 left a comment

Choose a reason for hiding this comment

Uh oh!

kieranwv commented May 6, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

kieranwv commented Mar 7, 2024 •

edited

Loading

vercel bot commented Mar 7, 2024 •

edited

Loading

kieranwv commented Mar 12, 2024 •

edited

Loading

astrobot-houston commented May 6, 2024 •

edited

Loading