Hi @wide torrent. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Nuxt content shiki themes only ever uses the default
cerulean gobletBOT
Based on the knowledge sources, Nuxt Content uses Shiki for code highlighting and supports specifying multiple themes for different color modes (e.g., light/dark) in your nuxt.config.ts under content.build.markdown.highlight.theme. Your configuration is correct in structure:
content: {
build: {
markdown: {
highlight: {
theme: {
default: 'github-light',
dark: 'github-dark',
},
langs: ['json', 'js', 'ts', 'html', 'css', 'vue', 'bash', 'markdown', 'nix']
}
}
}
}
According to the documentation, this setup should apply github-light in the default (light) mode and github-dark when the page is in dark mode. The theme switching is compatible with the Color Mode module, and the documentation specifically notes:
If you are using multiple themes, it's recommended to always have a
defaulttheme specified.
...
This option is compatible with Color Mode module.
If you are using multiple themes, it's recommended to always have adefaulttheme specified.
Docs > Getting-started >highlight
However, if you are finding that only the default theme is ever used and the dark theme is ignored, the knowledge sources do not provide troubleshooting steps or known issues for this specific problem. The documentation assumes that, when the color mode changes (e.g., via the Color Mode module or a class on <html>), the correct theme will be applied automatically.
Possible causes (based on documentation):
- The color mode is not being set or switched correctly in your app, so the
darktheme is never triggered. - The integration between
@nuxt/contentand the color mode module may not be working as expected, or the required class (e.g.,darkon<html>) is missing. - There may be a limitation or bug not covered in the documentation.
What you can check:
- Ensure you have the Color Mode module enabled and configured if you want automatic theme switching.
- Make sure the
darkclass is being applied to the<html>element when in dark mode, as this is how Nuxt Content detects which theme to use. - If you are not using the Color Mode module, you may need to manually toggle the class or ensure your dark mode logic is compatible.
Summary:
Your configuration matches the documented approach for multiple Shiki themes in Nuxt Content. If only the default theme is ever used, the knowledge sources do not provide a direct solution or explanation for this issue. You may need to verify your color mode setup or consult further resources or GitHub issues for potential bugs or workarounds.