Program view doesn't have dark background

[nospam2k]

In ProgramPreview.svelte:

<div class="columns is-centered is-vcentered has-text-centered">
  {#if isStudioMode}
    <div class="column">
      <img bind:this={preview} class="has-background-dark" alt="Preview" />
    </div>
    <div class="column is-narrow">
      {#each transitions as transition}
      <button class="button is-fullwidth is-info" style="margin-bottom: .5rem;"
        on:click={async () => {
          await sendCommand('SetCurrentSceneTransition', { transitionName: transition.transitionName })
          await sendCommand('TriggerStudioModeTransition')
        }}
        >{transition.transitionName}</button>
      {/each}
    </div>
  {/if}
  <div class="column">
    <!-- ****** This should have class="has-background-dark" like Preview ****** -->
    <!-- Ex.  <img bind:this={program} class="has-background-dark" alt="Program" /> -->
    <img bind:this={program} alt="Program"/>
  </div>
</div>

Changing the line to include has-background-dark doesn't work because:

  async function getScreenshot () {
    if (!programScene) return
    let data = await sendCommand('GetSourceScreenshot', {
      sourceName: programScene,
      imageFormat,
      imageWidth: 960,
      imageHeight: 540
    })
    if (data && data.imageData && program) {
      program.src = data.imageData
      program.className = '' // **** Is this valid??? ****
    }

    if (isStudioMode) {
      if (previewScene !== programScene) {
        data = await sendCommand('GetSourceScreenshot', {
          sourceName: previewScene,
          imageFormat,
          imageWidth: 960,
          imageHeight: 540
        })
      }
      if (data && data.imageData && preview) {
        preview.src = data.imageData
      }
    }
  }

[KanavCode]

Hey, @nospam2k Can I do this under hacktoberfest ?

[nospam2k]

@KanavCode - Not sure what you mean.