How to apply dark theme when using vanilla-jsoneditor?

[sommmen]

Hello,

I'm using (and loving) jsoneditor within angular.
I'm trying to (dynamically) apply the dark theme. The docs state a sample, but its for svelte.

Could anyone guide me how to apply the dark theme when using the vanilla jsoneditor?

Don't think its very relevant but this is my component now;

<div class="container-fluid">
    <div class="row">
        <div class="col g-0">

            <div *ngIf="!json" class="spinner-border" role="status">
                <span class="sr-only">Loading...</span>
              </div>

            <ng-container *ngIf="json">
                <ng-container *ngIf="!rawView; else rawViewTemplate">
                    <div #jsoneditor></div>
                </ng-container>
            </ng-container>


        </div>
    </div>
</div>

<ng-template #rawViewTemplate>
    <pre><code>{{ json | json }}</code></pre>
</ng-template> 

import { Component, Input, OnChanges, SimpleChanges, OnDestroy, ViewChild, ElementRef, AfterViewChecked } from '@angular/core';
import { JSONEditor, Mode } from 'vanilla-jsoneditor'

@Component({
    selector: 'app-json-viewer',
    templateUrl: './json-viewer.component.html',
    styleUrls: ['./json-viewer.component.scss']
})
export class JsonViewerComponent implements OnChanges, OnDestroy, AfterViewChecked {
  @ViewChild('jsoneditor') jsoneditorElement: ElementRef<HTMLDivElement>;
  @Input() public json: any | null;
  @Input() public mode: string = Mode.tree
  public rawView = false;
  editor: JSONEditor | null;

  
  ngAfterViewChecked(): void {
      // Sometimes the div is in the DOM, sometimes it is not,
      // For example when loading (!this.json) or when the raw view is used.
      // This is why we check this every view update.
      this.initEditor();
  }

  initEditor() {
      if(this.jsoneditorElement && !this.editor) {
          const content = this.getContent()

          // See: https://github.com/josdejong/svelte-jsoneditor
          this.editor = new JSONEditor({
              target: this.jsoneditorElement.nativeElement,
              props: {
                  content,
                  // onChange: (updatedContent, previousContent, { contentErrors, patchResult }) => {
                  //     // content is an object { json: JSONValue } | { text: string }
                  //     console.log('onChange', { updatedContent, previousContent, contentErrors, patchResult })
                  //     //content = updatedContent
                  // }
                  mode: <Mode> this.mode,
                  readOnly: true
              }
          });

          // Expand all
          if(this.mode === Mode.tree) {
              this.editor.expand(() => true);
          }
      }
  }

  private getContent() {
      // NOTE The whole json object could be passed into the 'json' variable, but this produces some bugs.
      return {
          text: JSON.stringify(this.json, null, 2),
          json: undefined,
      };
  }

  ngOnChanges(changes: SimpleChanges): void {

      if (this.rawView || changes.json.isFirstChange()) {
          return;
      }

      const newJson = changes.json.currentValue;

      if (newJson && this.editor) {
          this.editor.update(this.getContent());
          // Expand all
          if(this.mode === Mode.tree) {
              this.editor.expand(() => true);
          }
      }
  }

  ngOnDestroy(): void {
      if (this.editor) {
          this.editor.destroy();
          this.editor = null;
      }
  }

}

[josdejong]

Applying the dark theme involves CSS only, it is not framework specific:

1. Ensure that the dark theme is loaded in CSS:

   @import 'svelte-jsoneditor/themes/jse-theme-dark.css'

2. Add the class name jse-theme-dark of the dark theme to the HTML container element where the editor is loaded, like:

   <div class="my-json-editor jse-theme-dark"></div>

   So in your case I guess it will look like:

   <div #jsoneditor class="jse-theme-dark"></div>

Docs: https://github.com/josdejong/svelte-jsoneditor/?tab=readme-ov-file#dark-theme

[sommmen]

Hiya @josdejong,

I can't seem to get that to work;

<div #jsoneditor class="jse-theme-dark"></div>

The dark style seems to just not load.

The weird thing is that i never did anything to include the css, the package just seems to resolve the default style as-is.
I then tried to import the style sheets via angular.json;

"styles": {
    "node_modules/vanilla-jsoneditor/themes/defaults.scss",
     "node_modules/vanilla-jsoneditor/themes/jse-theme-dark.scss",
}

Which does not seem to do anyhing.
Importing in the main style file also seems to do nought;

@import '~/vanilla-jsoneditor/themes/defaults.scss';
@import '~/vanilla-jsoneditor/themes/jse-theme-dark.scss';

I can imagine this is more of a general angular issue so i might move this question to SO later.

[josdejong]

There is no jse-theme-dark.scss, only jse-theme-dark.css. There is no need to import defaults.scss manually, it is loaded by the library itself. See: https://unpkg.com/browse/vanilla-jsoneditor@0.21.6/themes/

[sommmen]

-sighs- You're absolutely right.

Added "node_modules/vanilla-jsoneditor/themes/jse-theme-dark.css", in angular.json and she worked.

[josdejong]

😂 good to hear. I know the feeling 😅