How to modify the background color of #slide-content?

[gkapfham]

Thanks for creating this project, it is really interesting! I've used a significant number of different frameworks to create slides and I think that it is likely possible for me to convert to using slidev for all of my teaching and research presentations.

I'm currently trying to theme different aspects of the example presentation. For instance, I can change the size of fonts through a CSS file in the styles directory. I can also change the background color of slides by using the background variable inside of .slidev-layout. Here is a rudimentary example:

.slidev-layout {

  background: #E0E0E0;

  code {
    @apply text-3xl
    background: #1c1c1c;
  }

  h1 {
    @apply text-7xl
  }

  h2,h3 {
    @apply text-2xl
  }

  p {
    @apply text-2xl
  }

  li {
    @apply text-xl
  }

}

The challenge that I am running into is that if a slide does not have a lot of content on it, then a white box appears at the bottom of the slide. After inspect the element in Firefox I can see that it is #slide-content, which I can find mentioned in the source code in node_modules/@slidev directory. I initially thought that you could change this color in the windi.config.ts file. However, everything that I have tried so far does not result in this box changing color. I have also looked at the source code of three themes and "ejected" the source code of the default theme. However, I could not find a hint as to how to change this background color.

Ultimately, I would like it to match the color defined for the background in the .slidev-layout CSS code snippet above. I'm still learning how to use Vue, Slidev, and Windi.css so I'm sure that there is something that I am overlooking. Can you please point me in the right direction so that I can modify this background color?

Again, thanks for investing your time to create and maintain this framework. It looks really exciting and I hope to learn it well enough that I could use it for all of my teaching and research presentations. If someone can help in any way, I would greatly appreciate it! Thanks in advance for your time and wisdom.

[antfu]

Hey Gregory, thanks for the kind words.

Maybe you can try this:

.slidev-layout {
  height: 100%;
  background: #E0E0E0;
}

[gkapfham]

Hey Gregory, thanks for the kind words.

Maybe you can try this:

.slidev-layout {
  height: 100%;
  background: #E0E0E0;
}

Hi @antfu thanks for your rapid response, I greatly appreciate it! Wow! Yes, this worked correctly. I have marked your response as the correct answer.