Skip to content

Conversation

ackzell
Copy link
Contributor

@ackzell ackzell commented Aug 30, 2025

I noticed there isn't a way to change the themes that Expressive Code uses.

I am proposing to expose a themes config in the tutorialkit integration for astro.

Copy link

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

Copy link
Member

@AriPerkkio AriPerkkio left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great!

Let's also update documentation at

## Configure the Tutorialkit Astro integration
`@tutorialkit/astro` is an integration for Astro. You can configure the integration in your `astro.config.ts` file.
```ts "tutorialkit()" title="astro.config.ts"
import tutorialkit from "@tutorialkit/astro";
import { defineConfig } from "astro/config";
export default defineConfig({
devToolbar: {
enabled: false,
},
integrations: [
tutorialkit(),
],
});
```
You can pass the following options to the `tutorialkit` integration:
### `components`
**type**: `OverrideComponentsOptions`
Provide the path to the components you want to override.
```ts
tutorialkit({
components: {
TopBar: './src/components/CustomTopBar.astro',
},
});
```
See [Overriding Components](/guides/overriding-components/) for details of all the components that you can override.
### `defaultRoutes`
**type**: `boolean | "tutorial-only"`<br/>
**default**: `true`
Controls whether the tutorial routes are automatically added to your project. When set to `true`, it additionally adds a redirect from `/` to the first tutorial.
Use `"tutorial-only"` to only add the tutorial routes without the redirect.

Something simple to mention that expressive code themes can be changed.

@ackzell ackzell requested a review from AriPerkkio August 30, 2025 20:14
@AriPerkkio AriPerkkio force-pushed the expressive-code-themes branch from ee68967 to bb437f6 Compare September 1, 2025 05:08
@AriPerkkio AriPerkkio changed the title feat(astro): add 'themes' option to the tutorialkit astro integration feat(astro): add expressiveCodeThemes option Sep 1, 2025
Copy link
Member

@AriPerkkio AriPerkkio left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR @ackzell 💯

I've renamed the themes option to expressiveCodeThemes to be more explicit about what the option controls. It aligns nicely with previously existing expressiveCodePlugins option name.

@AriPerkkio AriPerkkio merged commit 1fd2b53 into stackblitz:main Sep 1, 2025
13 checks passed
@AriPerkkio
Copy link
Member

Released in 1.6.0.

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

Successfully merging this pull request may close these issues.

2 participants