-
Notifications
You must be signed in to change notification settings - Fork 91
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dark theme support #81
Comments
https://github.com/qiuquanwu/vue3-json-viewer ,支持dark theme |
@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 <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? |
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> |
Do we have a dark theme support for this?
The text was updated successfully, but these errors were encountered: