Visualizer output not visible in Postman dark theme

[payload-cosmologist8 (Meenakshi Dhanani)]

Hey folks,
I really love using Postman with the dark theme. I was trying my hand at the visualizer and all I could see in that tab is a black screen, it took a while for me to realize that it was probably because of the dark theme. Once I changed the theme to the lighter one, I could see all the html elements with their expected styles under the visualizer.

I just wanted to discuss about the user experience. Every user who likes using Postman with the dark theme would have to switch to the lighter theme while visualizing. Is it possible to have the visualizer space with a white background?

I’d like to hear your suggestions/opinions.

Thanks!

[danny-dainton]

Hey @payload-cosmologist8

What’s the visualizer code that you’re using?

You should just be able to apply some basic CSS to the code, that would make that show in the theme of your choice.

[payload-cosmologist8 (Meenakshi Dhanani)]

Thanks @danny-dainton. I understand that I’d have to change the CSS according to the theme. But I was expecting to have the canvas for the visualizer white by default, irrespective of the theme. It would just feel similar to the browser. Just a thought!

[danny-dainton]

Can you share your code please?

I love seeing visualizations in the app

[payload-cosmologist8 (Meenakshi Dhanani)]

This is my first attempt with the visualizer, have a look.

let template = `
<style>
/* List */
ul {
  padding: 0;
  max-width: 300px;
}

/* List element */
li {
  display: flex;
  align-items: center;
  padding: 12px 0;
  box-sizing: border-box;
}

h4 {
      color: skyblue
}

/* Element counter */
.counter {
  font-size: 1.5rem;
  text-align: right;
  font-weight: bold;
  min-width: 50px;
  padding-right: 12px;
  font-variant-numeric: tabular-nums;
  align-self: flex-start;
  background-image: linear-gradient(to bottom, aquamarine, orangered);
  background-attachment: fixed;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* Element separation */
li + li {
  border-top: 1px solid rgba(255,255,255,0.2);
}

@use postcss-preset-env {
  stage: 0;
  autoprefixer: {
    grid: true;
  }
  browsers: last 2 versions
}

</style>
<h4>Spotify - Top 5</h4>
{{#each items}}
    <ol>
    <li><span class="counter">0{{@index}}</span>{{{this.name}}}</li>
    </ol>
    {{/each}}`
pm.visualizer.set(template, pm.response.json())

And here’s how it looks