Visualizer output not visible in Postman dark theme

🗣 General Discussion
,
1

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!

2

Hey @meenakshi-dhanani

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. :grin:

3

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!

4

Can you share your code please?

I love seeing visualizations in the app :heart_eyes:

1 Like
5

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

image
image2278×1146 138 KB