✨ support theme switch

Author: Wendell

angular.json

@@ -31,7 +31,7 @@
                 "output": "/assets/vs/"
               }
             ],
-            "styles": ["src/styles.scss"],
+            "styles": ["src/styles.scss", "src/override.less"],
             "scripts": [],
             "es5BrowserSupport": true
           },

package.json

@@ -21,6 +21,7 @@
     "@angular/router": "~7.2.0",
     "@silicic/share-styles": "0.0.1",
     "core-js": "^2.5.4",
+    "ng-zorro-antd": "^7.4.1",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",
     "zone.js": "~0.8.26"

projects/monaco-ng/src/lib/monaco.service.ts

@@ -11,6 +11,8 @@ import {
 } from './typings';
 import { tryTriggerFunc } from './utils';
 
+declare const monaco: any;
+
 /**
  *
  */
@@ -71,6 +73,10 @@ export class MonacoService {
     }
 
     this.option = { ...this.option, ...option };
+
+    if (option.theme) {
+      monaco.editor.setTheme(option.theme);
+    }
   }
 
   private loadMonacoScript(): void {

src/app/app.component.html

@@ -3,6 +3,20 @@
     <h1 class="header">
       Monaco for Angular
     </h1>
+    <div class="theme-switcher">
+      <nz-switch [(ngModel)]="dark"
+                 [nzUnCheckedChildren]="lightTpl"
+                 [nzCheckedChildren]="darkTpl"
+                 (ngModelChange)="onToggleTheme()"></nz-switch>
+      <ng-template #darkTpl>
+        <i nz-icon
+           nzType="bulb"></i>
+      </ng-template>
+      <ng-template #lightTpl>
+        <i nz-icon
+           nzType="poweroff"></i>
+      </ng-template>
+    </div>
   </header>
   <div class="content-container">
     <section id="demo">
@@ -13,7 +27,9 @@ <h3>Normal Editor</h3>
       </p>
       <div class="full-width-container">
         <div class="editor-container">
-          <si-monaco-editor id="editor" [ngModel]="code" [editorOption]="editorOption"></si-monaco-editor>
+          <si-monaco-editor id="editor"
+                            [ngModel]="code"
+                            [editorOption]="editorOption"></si-monaco-editor>
         </div>
       </div>
       <p class="center"><i>Try to type on it.</i></p>
@@ -23,8 +39,12 @@ <h3>Diff Editor</h3>
       </p>
       <div class="full-width-container">
         <div class="editor-container">
-          <si-monaco-editor id="editor" [ngModel]="code" [mode]="'diff'" [originalText]="originalText"
-                            [editorOption]="{ language: 'typescript' }" (ngModelChange)="onModelChange($event)">
+          <si-monaco-editor id="editor"
+                            [ngModel]="code"
+                            [mode]="'diff'"
+                            [originalText]="originalText"
+                            [editorOption]="{ language: 'typescript' }"
+                            (ngModelChange)="onModelChange($event)">
           </si-monaco-editor>
         </div>
       </div>

src/app/app.component.scss

@@ -1,3 +1,9 @@
+.theme-switcher {
+  height: 42px;
+  line-height: 42px;
+  margin-bottom: 14px;
+}
+
 .editor-container {
   margin: auto;
   height: 300px;

src/app/app.component.ts

@@ -1,13 +1,16 @@
-import { Component } from '@angular/core';
+import { Component, Inject, OnInit, Renderer2 } from '@angular/core';
+import { DOCUMENT } from '@angular/platform-browser';
 import { editor } from 'monaco-editor';
+import { MonacoService } from 'projects/monaco-ng/src/public-api';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'monaco-ng';
+  dark = false;
 
   editorOption: editor.IEditorConstructionOptions = {
     scrollBeyondLastLine: false,
@@ -34,7 +37,28 @@ export class AppComponent {
   title = 'monaco-ng';
 }`;
 
+  constructor(
+    private monacoService: MonacoService,
+    private renderer: Renderer2,
+    @Inject(DOCUMENT) private document: any
+  ) {}
+
   onModelChange(value: string): void {
     console.log(value);
   }
+
+  onToggleTheme(): void {
+    const next = this.dark ? 'vs-dark' : 'vs';
+    this.monacoService.updateDefaultOption({ theme: next });
+    this.toggleBodyTheme();
+  }
+
+  toggleBodyTheme(): void {
+    this.renderer.addClass(this.document.body, this.dark ? 'dark' : 'light');
+    this.renderer.removeClass(this.document.body, this.dark ? 'light' : 'dark');
+  }
+
+  ngOnInit(): void {
+    this.toggleBodyTheme();
+  }
 }

src/app/app.module.ts

@@ -1,16 +1,23 @@
-import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
-import { AppComponent } from './app.component';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { BulbOutline, PoweroffOutline } from '@ant-design/icons-angular/icons';
+import { NZ_ICONS, NzIconModule, NzSwitchModule } from 'ng-zorro-antd';
 import {
-  SiMonacoModule,
-  MONACO_CONFIG
+  MONACO_CONFIG,
+  SiMonacoModule
 } from 'projects/monaco-ng/src/public-api';
-import { FormsModule } from '@angular/forms';
+import { AppComponent } from './app.component';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, FormsModule, SiMonacoModule],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    SiMonacoModule,
+    NzSwitchModule,
+    NzIconModule
+  ],
   providers: [
     {
       provide: MONACO_CONFIG,
@@ -23,6 +30,10 @@ import { FormsModule } from '@angular/forms';
           console.log('load');
         }
       }
+    },
+    {
+      provide: NZ_ICONS,
+      useValue: [BulbOutline, PoweroffOutline]
     }
   ],
   bootstrap: [AppComponent]

src/override.less

@@ -0,0 +1,4 @@
+@import '../node_modules/ng-zorro-antd/style/entry.less';
+@import '../node_modules/ng-zorro-antd/switch/style/entry.less';
+
+@primary-color: rgb(255, 177, 75);

src/styles.scss

@@ -1,2 +1,24 @@
 /* You can add global styles to this file, and also import other style files */
 @import '../node_modules/@silicic/share-styles/dist/index.css';
+
+.dark {
+  --text: white;
+  --background: rgb(27, 27, 27);
+}
+
+.light {
+  --text: #333;
+  --background: #fff;
+}
+
+body {
+  h1,
+  h2,
+  h3,
+  p,
+  li {
+    color: var(--text);
+  }
+
+  background-color: var(--background) !important; // Fuck antd!
+}