spectacle icon indicating copy to clipboard operation
spectacle copied to clipboard

What is the correct way to replace the backdrop color?

Open akloster opened this issue 3 years ago • 1 comments

I'd like to have a white background in my slides, and I'd prefer a fadeTransition, though slideTransition has the same problem. Best way to put it: the transitions go through a black phase, no matter what I tried.

In the source code I found ways to specify backdropStyle in the theme settings. That seems to work in presenter mode, but not in the normal mode.

const theme = {
  fonts: {
    header: '"Ubuntu", Helvetica, Arial, sans-serif',
    text: '"Fira sans", Helvetica, Arial, sans-serif'
  },
    colors: {
      primary: '#000000',
      secondary: '#0000ff',
      tertiary: '#ffffff',
      background:"#ffffff"
    },
  backdropStyle:{
    backgroundColor:"#ffffff",
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100vw',
    height: '100vh'
}
}

This is also not covered in the documentation. Any help would be appreciated.

akloster avatar Jul 24 '21 21:07 akloster

I would like to know this as well. I could hack my way to that backdrop element, but is there a better way to style it?

vegetablesalad avatar Sep 09 '21 13:09 vegetablesalad

It's not documented right now for whatever reason, but you can pass backdropStyle to the Deck component and change the color there.

Demo: https://codesandbox.io/s/custom-backdrop-style-spectacle-lfcrrf

If you're using TypeScript, which also apparently doesn't have that prop in the types, a hack that will work for now is to plug it into the props like so:

{...{ backdropStyle: { background: "#fff" } }}

fritz-c avatar Sep 15 '22 19:09 fritz-c

Adding the Feature Request label because modifying backdrop style via backdropStyle should be a documented feature, supported by types as well.

fritz-c avatar Sep 15 '22 20:09 fritz-c