Custom styles

[marcstee]

Is it possible to change default styles? Mainly colors.

[benkrig]

@marcstee,

It doesn't look like there's any built-in, clean way to change color styling. This seems like a good area for future development. Until there's an official development for this, I've added a workaround to achieve this with Sass below. You can change the colors to suit your needs.

// add this to your component's .scss
$type-colors: (
  string: #0bff00,
  number: #009688,
  boolean: #b938a4,
  date: #05668D,

  array: #999,
  object: #999,
  function: #999,

  'null': #fff,
  undefined: #fff
);

@each $type, $color in $type-colors {
  ::ng-deep .segment-type-#{$type} > .segment-main > .segment-value {
    color: $color !important;
  }
}

Keep in mind this uses ::ng-deep which is moving towards depreciation. Although this is listed as depreciated in official documentation, there are no plans to officially remove it anytime in the future. See https://github.com/angular/angular/issues/7562 for more on that.

[parulJain30]

On fetching the JSON data, key-value fields are enclosed in double quotes (""), can we customize ngx-json-viewer to remove these?

[joshglogau]

Figured out how to style individual elements of the viewer:

.segment-key {
    color: gray !important;
}
.segment-type-boolean > .segment-main > .segment-value {
    color: lightskyblue !important;
}
.segment-type-string > .segment-main > .segment-value {
    color: lightgreen !important;
}
.segment-type-number > .segment-main > .segment-value {
    color:  lightcoral !important;
}
// etc...

[KaranTrivedi]

Still open, aye. Lol. Can't seem to be able to override the red null background making my eyes bleed, and the override only seems to work sometimes using the method shown above.

[DaSchTour]

I added some possibilities for theming in #108

[ami-friedman]

@joshglogau this is not working for me. Has something changed? @DaSchTour - how do I go about using the theming?

[DaSchTour]

@ami-friedman the version with theming is not released yet. You will be able to use it by setting the listed CSS variables.

[ami-friedman]

Thanks @DaSchTour. When will it be released? Will the above workarounds work in the meantime? They weren't when I tried :(

[amitd820]

Thanks @benkrig it is working for me.