Dark theme support

[pratik97]

Do we have a dark theme support for this?

[qiuquanwu]

https://github.com/qiuquanwu/vue3-json-viewer ,支持dark theme

[kalyncoose]

@qiuquanwu I'm using Vue 2.0, and I just tested your vue3-json-viewer and it unfortunately doesn't work in a Vue 2.0 app. For vue-json-viewer, the custom theme is not working - it only applies the color property directly under the parent scss class:

.my-awesome-json-theme {
  background: #fff;
  white-space: nowrap;
  color: red; /* only this property is working with theme="my-awesome-json-theme" prop */
  font-size: 14px;
  font-family: Consolas, Menlo, Courier, monospace;
  ....
  /* color properties below this do not work */

I tried adding !important; to each color property but that does not work either. I checked the elements with the new theme loaded and only the parent div has the class, like below:

<div class="jv-container my-awesome-json-theme jv-light">
<!-- vue-json-viewer child elements -->
</div>

Any idea on how to fix it so that I can get dark theme working on Vue 2.0 for vue-json-viewer?

[kalyncoose]

Okay I found the issue. My SCSS was in the Vue component file and it was scoped so all of the child properties weren't working. I resolved this by putting the necessary SCSS script in the index.html of the Vue project so that the properties are no longer ignored:

<style lang="scss">
        .anchor{
            display: block;
            height: 100px;
            margin-top: -100px;
            visibility: hidden;
        }
        .v-toast__text {
            font-family: "Roboto", sans-serif !important;
        }
        .jv-dark {
            background: none;
            white-space: nowrap;
            font-size: 14px;
            font-family: Consolas, Menlo, Courier, monospace;
        }
        .jv-button { color: #49b3ff !important; }
        .jv-dark .jv-key { color: #999 !important; }
        .jv-dark .jv-array { color: #999 !important; }
        .jv-boolean { color: #fc1e70 !important; }
        .jv-function { color: #067bca !important; }
        .jv-number { color: #fc1e70 !important; }
        .jv-number-float { color: #fc1e70 !important; }
        .jv-number-integer { color: #fc1e70 !important; }
        .jv-dark .jv-object { color: #999 !important; }
        .jv-undefined { color: #e08331 !important; }
        .jv-string {
            color: #42b983 !important;
            word-break: break-word;
            white-space: normal;
        }
</style>