Customise Bespoke's progress bar via theme's CSS

[mil-ad]

Is it possible to customise bespoke's progress bar directly from my theme's CSS/SASS?

I tried adding something below to my sass but it doesn't seem to be picked up:

.bespoke-progress-bar {
    background: red !important;
}

I can of course tweak it from Chrome's dev tools but when I copy/paste the rule directly into my CSS it's still not picked up:

body[data-bespoke-view=""] .bespoke-progress-parent .bespoke-progress-bar {
    background: green !important;
}

[yhatt]

It cannot. Theme CSS cannot interfere with the outside of Marp slides to prevent breaking Marp-integrated tools. In addition, Marp CLI's bespoke template is not designed for customizable for now.

If you really want to change the color, a following hack is working:

@import url('data:text/css,.bespoke-progress-bar { background: red !important; }');

CSS @import rule can bypass Marp(it)'s postprocess for scoping styles to the slide. It's just a hack that is similar to marp-team/marp-cli#358 so honestly we could never recommend.

[mil-ad]

makes sense -- thanks!