Support for multiple themes

[pawanrawal]

Is it possible to use multiple themes with the same app ? I want some piece of code using Coy and others using the Dark theme. Is there someway to do this ?

[Golmote]

Hi! Prism does not currently provide a way to do this out of the box, though you could probably change the selectors used in those themes to fit your needs.
If it were to be a feature, how would you see it? How could we allow both a global default theme and block-specific ones?

[mAAdhaTTah]

You'd have to scope the CSS or something to the context you want to highlight it in; I can't imagine how you'd support this by default, if you even wanted to.

[Golmote]

We could try to rely on selectors specificity, but this would require all themes to properly reset any property the default theme would have set...

[pawanrawal]

Hi, do you mean to say that I change the code and pre selectors in the css and js files of one of the themes to some other selectors and use the new selectors to style an element ?

[Golmote]

You shouldn't have to change anything in the JS.

You just need to add a class name on every code blocks, for example:

<pre class="dark-block language-css"><code>

and change the dark theme like this, for example:

code.dark-block[class*="language-"],
pre.dark-block[class*="language-"] {

(just make sure you change all the required selectors in the theme)

And you can do the same with the Coy theme.

[pawanrawal]

Thanks @Golmote that works. Please close this issue.

[Stanzilla]

To pick this up again, could something be added that uses the preferred-color-scheme media query to switch themes automatically?

[RunDevelopment]

prefers-color-scheme is very experimental at this point in time, so we won't use it as part of Prism.

Also, switching themes automatically with this won't be easy since the theme being switched to will have to override all rules of the default theme. This is simply not the reality of Prism's themes, so it's not doable right now.

[aSemy]

I've managed to implement this by

1. depending on some new Prism themes in package.json

     "dependencies": {
       "prism-themes": "^1.9.0",
       "prismjs-darcula-theme": "^1.0.3",
     },

2. Activating the Docusaurus Sass plugin

   • add "docusaurus-plugin-sass": "^0.2.2", in package.json,
   • in docusaurus.config.js activate the sass plugin: plugins: ['docusaurus-plugin-sass'],)

3. in docusaurus.config.js, define a new global.scss client module

   const config = {
     clientModules: [
       require.resolve('./src/modules/global.scss'),
     ]
   }

4. Then in ./src/modules/global.scss I @import the two Prism styles inside a css rule, which means the rule in each imported style will have an additional qualifier.

   .language-typescript {
     @import "prism-themes/themes/prism-vsc-dark-plus";
   }
   
   .language-kotlin {
     @import "prismjs-darcula-theme/darcula";
   }

   Because the Kotlin and TypeScript styles have different fonts/colours/sizes that look weird aside each other, I !important override the incongruent properties

   pre[class*="language-"], code[class*="language-"] {
     font-family: Source Code Pro, PT Mono, Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace !important;
     font-size: 1em !important;
     line-height: 1.3 !important;
     background: #1e1e1e !important;
   }

Now Kotlin and TypeScript have different colours, which makes the difference more apparent.