Official way to add custom theme CSS

[MichaelGoff]

I couldn't find an official way to load in custom theme CSS. It'd be cool to have a way to register custom themes so we can switch to them by name.

[FIameCaster]

I'm assuming, you're using one of the setups. They're very limited when it comes to customization currently, but I could definitely make it possible to register new themes that the setups can use. An API that could easily work would be something like this:

import { registerTheme } from "prism-code-editor/themes"

registerTheme("my-theme", () => import("./my-theme.css?inline"))

This example would work with Vite, but might be different if you're using another bundler.

The second argument to registerTheme is a function that returns a Promise. This promise must resolve with an object containing a property named default whose value is the CSS string for the theme.

If this sounds useful to you, I can add this proposed registerTheme function in v3.4.0.

[MichaelGoff]

Your proposed function would be perfect! Thank you for the consideration

[ysk3a]

With regards to customizing styles, would it be possible to add the ::part() CSS selector and exportparts into the injected element wrapper since CSS Shadow Parts allow web components authors to provide public styling API.

that is, when rendering, the result html will contain part="prism-code-editor-part" and will look something like:

<div class="prism-code-editor language-javascript show-line-numbers pce-nowrap pce-no-selection pce-readonly" part="prism-code-editor-part" style="tab-size: 2; --number-width: 1.001ch;">
    <div class="pce-wrapper">
        <div class="pce-overlays">
            <textarea spellcheck="false" autocapitalize="off" autocomplete="off" inputmode="none" aria-readonly="true">
            </textarea>
            <!-- ... -->
        </div>
        <!-- ... -->
    </div>
</div>

this is mostly just a feature request since this was the only way i could select this element in my styles files, at the moment, like

::part(prism-code-editor-part):hover {
    --editor__bg-scrollbar: 210, 10%, 40%;
}

and probably due to how shadow DOM styling works in the framework I am using, I've programmatically got the html element and manually added the part attribute.

of course this is just a feature request and since I did not really need a full theme change as I just wanted to make small changes like
changing background color or scrollbar temporarily on hover, I thought introducing part() would be nice.

I am not sure of what other implications will be introduced when adding part attribute in your library, so the request can be denied if it will negatively affect some other parts I'm not aware of.

[FIameCaster]

The setups could definitely add a part attribute to the outermost element. This is just a single line of code.

I've programmatically got the html element and manually added the part attribute.

Library users could also write that single line themselves, yeah.

[FIameCaster]

Version 3.4.0 is out, and the registerTheme function has been added.