Skip to content
Expressive Code

Themes

Expressive Code supports the full range of themes available for VS Code. Any theme that works in the editor will work in Expressive Code!

You can use our bundled themes, import themes from NPM, or export themes from VS Code.

Key features

  • Efficient multi-theme support: You can use multiple themes at the same time, e.g. a dark and a light theme for improved accessibility. In contrast to other popular solutions, this does not lead to duplicate HTML output with one block per theme. Instead, Expressive Code renders every code block once and uses optimized CSS variables to allow switching between themes.
  • Dark mode support: If you specify one dark and one light theme, Expressive Code automatically displays the theme that matches the user’s system preferences. You can configure this with the useDarkModeMediaQuery option.
  • Theme switcher support: If your site has a theme switcher that allows users to pick a theme, Expressive Code can generate CSS code to support it. By default, you can use the data-theme attribute to select a theme by name, both on the html element and individual code blocks. You can configure this with the themeCssRoot and themeCssSelector options.
  • Automatic color contrast correction: Many themes you’ll find online do not meet the WCAG color contrast requirements for accessibility. Expressive Code fixes this by automatically processing the syntax highlighting colors of any theme to ensure a color contrast ratio of at least 5.5:1. You can configure this with the minSyntaxHighlightingColorContrast option.

Using bundled themes

Expressive Code comes with a set of popular themes bundled with our default syntax highlighter. You can use them by passing their names to the themes option:

astro.config.mjs
import { defineConfig } from 'astro/config'
import astroExpressiveCode from 'astro-expressive-code'


export default defineConfig({
  integrations: [
    astroExpressiveCode({
      // Replace the default themes with a custom set of bundled themes:
      // "dracula" (a dark theme) and "solarized-light"
      themes: ['dracula', 'solarized-light'],
    }),
  ],
})

Available themes

dark-plus
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
dracula
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
dracula-soft
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
github-dark
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
github-dark-dimmed
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
github-light
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
light-plus
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
material-theme
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
material-theme-darker
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
material-theme-lighter
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
material-theme-ocean
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
material-theme-palenight
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
min-dark
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
min-light
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
monokai
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
nord
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
one-dark-pro
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
poimandres
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
rose-pine
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
rose-pine-dawn
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
rose-pine-moon
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
slack-dark
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
slack-ochin
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
solarized-dark
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
solarized-light
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
vitesse-dark
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}
vitesse-light
example.js
function isEven(num) {
  return num % 2 === 0;
}


// Testing the function
const num = 4;
if (isEven(num)) {
  console.log(`${num} is even.`);
} else {
  throw new Error('Wait, what?');
}

Using themes from NPM

You can use any theme available on NPM with Expressive Code, provided that it exports a VS Code-compatible JSON theme object. Follow these steps:

  1. Install the theme using your package manager of choice:

    Terminal window
    # Install any theme from NPM here, e.g. `summer-time`
    npm i summer-time

  2. Add the theme to your Expressive Code configuration:

    astro.config.mjs
    import { defineConfig } from 'astro/config'
    import astroExpressiveCode from 'astro-expressive-code'
    // Import the theme object
    import summerTime from 'summer-time/themes/summer-time-vscode-theme.json'
    

    export default defineConfig({
      integrations: [
        astroExpressiveCode({
          // Pass the theme to the `themes` option
          // (consider adding a dark and light theme for accessibility)
          themes: [summerTime],
        }),
      ],
    })

Using themes from VS Code

You can export any theme from VS Code for use with Expressive Code. Follow these steps:

  1. Open the desired theme in VS Code using any of the following methods:

    • Browse the VS Code Themes gallery, select a theme, and press one of the Open With buttons to open it in VS Code.

    • Alternatively, start right inside VS Code by pressing Ctrl+Shift+P, running the command Preferences: Color Theme and selecting a theme you like.

  2. Export the theme to a file:

    • Inside VS Code, press Ctrl+Shift+P and run the command Generate Color Theme from Current Settings.

    • Save the generated file to a folder of your website, e.g. as ./my-theme.jsonc.

  3. Add the theme to your Expressive Code configuration:

    astro.config.mjs
    import { defineConfig } from 'astro/config'
    import astroExpressiveCode, { ExpressiveCodeTheme } from 'astro-expressive-code'
    import fs from 'node:fs'
    

    // Load your saved theme JSONC file here and create a theme from it
    const jsoncString = fs.readFileSync(new URL(`./my-theme.jsonc`, import.meta.url), 'utf-8')
    const myTheme = ExpressiveCodeTheme.fromJSONString(jsoncString)
    

    export default defineConfig({
      integrations: [
        astroExpressiveCode({
          // Pass the theme to the `themes` option
          // (consider adding a dark and light theme for accessibility)
          themes: [myTheme],
        }),
      ],
    })