How do you change the background color of ngx-monaco-editor in Angular 12?

I'm currently trying to change the background color of the ngx-monaco-editor element in my Angular 12 project, but nothing I've tried has worked so far. Is there a way I can easily do this with my current setup or do I need to redo it with another method? This is what I am currently trying to do, but the editor ends up looking like the "vs" theme. Snippets from my code:

component1.html

<div class="data" id="d2">
        <ngx-monaco-editor id="xmlDisplayer" style="height: 100%;" [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>
</div>

component1.ts

import { Component, OnInit } from '@angular/core';
import { DataMapService } from '../data-map.service';
import { MonacoEditorLoaderService } from '@materia-ui/ngx-monaco-editor';
import { saveAs } from "file-saver";
import * as d3 from 'd3';

export class component1 implements OnInit {

  constructor(private dataMapService: DataMapService, private monacoLoaderService: MonacoEditorLoaderService) {
    this.monacoLoaderService.isMonacoLoaded$.pipe(
    ).subscribe(() => {
      (window as any).monaco.editor.defineTheme('myCustomTheme', {
        base: 'vs-dark', // can also be vs-dark or hc-black
        colors: {
          "editor.background": '#AA4A44', // code background
          'editorCursor.foreground': '#002438', // corsour color
          'editor.lineHighlightBackground': '#9B9B9B', // line highlight colour
          'editorLineNumber.foreground': '#666666', // line number colour
          'editor.selectionBackground': '#666666', // code selection background
          'editor.inactiveSelectionBackground': '#7e890b'
        }
      });
    });
   }

  ngOnInit(): void {
  }

  //options and text for the xml display
  editorOptions = {theme: 'myCustomTheme', language: 'xml'};
  code = "xml stuff goes here";

app.module.ts

import { MonacoEditorModule } from 'ngx-monaco-editor';
//Other component imports and misc

@NgModule({
  declarations: [
    AppComponent,
    //Component declarations
  ],
  imports: []
    //Other imports
    MonacoEditorModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  
 }

Another problem I run into is that when I try to do "monaco.editor.defineTheme(...) in other places I get an error with the monaco namespace. Any help would be appreciated.

Solution

I was able to solve the issue without having to change my code too much. It will not work if you don't have the .pipe(filter(),take()) in component1.ts so make sure to include that.

This stackblitz helped me figure it out: https://stackblitz.com/edit/materia-ngx-monaco-editor-example

component1.html

<div class="data" id="d2">
        <ngx-monaco-editor id="xmlDisplayer" style="height: 100%;" [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>
</div>

component1.ts

import { Component, OnInit } from '@angular/core';
import { filter, take } from 'rxjs/operators';
import { MonacoEditorConstructionOptions, MonacoEditorLoaderService } from '@materia-ui/ngx-monaco-editor';

export class component1 implements OnInit {

  constructor(private monacoLoaderService: MonacoEditorLoaderService) {
    this.monacoLoaderService.isMonacoLoaded$
      .pipe(
        filter((isLoaded) => !!isLoaded),
        take(1)
      )
      .subscribe(() => {
        monaco.editor.defineTheme('myCustomTheme', {
          base: 'vs-dark', // can also be vs or hc-black
          inherit: true, // can also be false to completely replace the builtin rules
          rules: [
            {
              token: 'comment',
              foreground: 'ffa500',
              fontStyle: 'italic underline'
            },
            { token: 'comment.js', foreground: '008800', fontStyle: 'bold' },
            { token: 'comment.css', foreground: '0000ff' } // will inherit fontStyle from `comment` above
          ],
          colors: {
            "editor.background": '#ff0000', // code background
            'editorCursor.foreground': '#002438', // corsour color
            'editor.lineHighlightBackground': '#9B9B9B', // line highlight colour
            'editorLineNumber.foreground': '#666666', // line number colour
            'editor.selectionBackground': '#666666', // code selection background
            'editor.inactiveSelectionBackground': '#7e890b'
          }
        });
      });
   }

  ngOnInit(): void {
  }


  //options and text for the xml display
  editorOptions: MonacoEditorConstructionOptions = {
    theme: 'myCustomTheme',
    language: 'xml',
  };
  code = "xml goes here";
}

app.module.ts

import { NgModule } from '@angular/core';
import { MonacoEditorModule, MONACO_PATH } from '@materia-ui/ngx-monaco-editor';
//Other import functions

@NgModule({
  declarations: [
    AppComponent,
    //Other component declarations
  ],
  imports: [
    MonacoEditorModule,
    //Other imports
  ],
  providers: [
    {
      provide: MONACO_PATH,
      useValue: 'https://unpkg.com/[email protected]/min/vs'
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  
 }

I hope this helps anyone who is having trouble with this