How do you use light and dark Shiki themes with Astro?
#Use multiple Shiki themes
chilly maple
austere hazelBOT
Hi @chilly maple. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To use multiple Shiki themes with Astro, you can configure the shikiConfig object in your astro.config.mjs file. Here's an example of how to do it:
import { defineConfig } from 'astro/config';
export default defineConfig({
markdown: {
shikiConfig: {
// Choose from Shiki's built-in themes (or add your own)
// <https://shiki.style/themes>
themes: {
light: 'github-light',
dark: 'github-dark',
},
// Disable the default colors
// <https://shiki.style/guide/dual-themes#without-default-color>
// (Added in v4.12.0)
defaultColor: false,
// Add custom languages
// Note: Shiki has countless langs built-in, including .astro!
// <https://shiki.style/languages>
langs: [],
// Enable word wrap to prevent horizontal scrolling
wrap: true,
// Add custom transformers: <https://shiki.style/guide/transformers>
// Find common transformers: <https://shiki.style/packages/transformers>
transformers: [],
},
},
});
In this example, the themes object is used to specify different themes for light and dark modes. The light and dark keys correspond to the light and dark themes respectively. You can replace 'github-light' and 'github-dark' with any of the Shiki's built-in themes (https://shiki.style/themes) or your own custom 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.
To add interactivity to an Astro component, you can use a <script> tag. This script can check and set the current theme from localStorage and toggle the theme when the icon is clicked. Here's an example of how to do it:
<script is:inline>
const theme = (() => {
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
return localStorage.getItem('theme');
}
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark';
}
return 'light';
})();
if (theme === 'light') {
document.documentElement.classList.remove('dark');
} else {
document.documentElement.classList.add('dark');
}
window.localStorage.setItem('theme', theme);
const handleToggleClick = () => {
const element = document.documentElement;
element.classList.toggle("dark");
const isDark = element.classList.contains("dark");
localStorage.setItem("theme", isDark ? "dark" : "light");
}
document.getElementById("themeToggle").addEventListener("click", handleToggleClick);
</script>
In this script, the theme variable is used to store the current theme. The handleToggleClick function is used to toggle the theme when the theme icon is clicked.
Sources:
- Shiki Configuration (https://docs.astro.build/en/guides/markdown-content/#shiki-configuration)
- Add client-side interactivity (https://docs.astro.build/en/tutorial/6-islands/2/#add-client-side-interactivity)