chore: add Dark mode + some rewrites

src/app/app.component.html

@@ -4,3 +4,4 @@
 } @else {
     <app-start></app-start>
 }
+

src/app/app.component.ts

@@ -15,6 +15,7 @@ export class AppComponent {
         private matIconRegistry: MatIconRegistry,
         private domSanitizer: DomSanitizer,
     ) {
+
         this.matIconRegistry.addSvgIcon(
             "block",
             this.domSanitizer.bypassSecurityTrustResourceUrl(

src/app/effects/app.effects.ts

@@ -9,6 +9,7 @@
 import { ChangeLogDialog } from "../modules/core/dialogs/change-log/change-log.dialog";
 import showdown from "showdown";
 import { WorkspaceService } from "../services/workspace.service";
+import {BlocklyEditorEffects} from "./blockly-editor.effects";
 
 @Injectable({
     providedIn: "root",
@@ -21,7 +22,29 @@
         private localStorage: LocalStorageService,
         private dialog: MatDialog,
         private workspaceService: WorkspaceService,
+        private blocklyEffects: BlocklyEditorEffects,
     ) {
+        this.appState.selectedTheme = localStorage.fetch("theme") || "light";
+
+        this.appState.selectedTheme$
+            .pipe(filter((theme) => !!theme))
+            .subscribe((theme) => {
+                document.getElementsByTagName("body")[0].setAttribute(
+                    "data-theme",
+                    theme.replace('"', ""),
+                );
+
+                document.getElementsByTagName("body")[0].setAttribute(
+                    "data-bs-theme",
+                    theme.replace('"', ""),
+                );
+
+                localStorage.store("theme", theme);
+                if (this.appState.selectedCodeEditor == CodeEditorType.Beginner) {
+                    this.blocklyEffects.loadTheme();
+                }
+            });
+
         // Use the current language to translate the angular strings
         this.appState.currentLanguage$
             .pipe(filter((language) => !!language))
@@ -137,7 +160,6 @@
                 this.localStorage.store("releaseVersion", releaseVersion);
 
                 const robotId = this.localStorage.fetch("changedLanguage");
-                console.log(robotId);
                 if (robotId) {
                     this.localStorage.store("changedLanguage", "");
                     this.workspaceService

src/app/effects/blockly-editor.effects.ts

@@ -1,29 +1,29 @@
-import { Injectable } from "@angular/core";
-import { BlocklyEditorState } from "../state/blockly-editor.state";
-import { filter, pairwise, withLatestFrom } from "rxjs/operators";
-import { HttpClient, HttpHeaders } from "@angular/common/http";
-import { combineLatest, Observable } from "rxjs";
-import { AppState } from "../state/app.state";
-import { CodeEditorType } from "../domain/code-editor.type";
+import {Injectable} from "@angular/core";
+import {BlocklyEditorState} from "../state/blockly-editor.state";
+import {filter, pairwise, withLatestFrom} from "rxjs/operators";
+import {HttpClient, HttpHeaders} from "@angular/common/http";
+import {combineLatest, Observable} from "rxjs";
+import {AppState} from "../state/app.state";
+import {CodeEditorType} from "../domain/code-editor.type";
 import * as Blockly from "blockly";
 import "@blockly/field-bitmap";
 
 import {
+    arduino,
     CATEGORIES,
-    THEME,
+    constantBlocks,
     EXTENSIONS,
-    translations,
-    arduino,
     getBlocks,
-    constantBlocks,
+    translations,
 } from "@leaphy-robotics/leaphy-blocks";
-import { LeaphyCategory } from "../services/toolbox/category";
-import { LeaphyToolbox } from "../services/toolbox/toolbox";
-import { CodeEditorState } from "../state/code-editor.state";
-import { genericRobotType, microPythonRobotType } from "../domain/robots";
-import { RobotType } from "../domain/robot.type";
-import { WorkspaceService } from "../services/workspace.service";
-import { LocalStorageService } from "../services/localstorage.service";
+import {LeaphyCategory} from "../services/blockly/category";
+import {LeaphyToolbox} from "../services/blockly/toolbox";
+import {CodeEditorState} from "../state/code-editor.state";
+import {genericRobotType, microPythonRobotType} from "../domain/robots";
+import {RobotType} from "../domain/robot.type";
+import {WorkspaceService} from "../services/workspace.service";
+import {LocalStorageService} from "../services/localstorage.service";
+import getTheme from "../services/blockly/theme";
 
 @Injectable({
     providedIn: "root",
@@ -32,6 +32,69 @@ import { LocalStorageService } from "../services/localstorage.service";
 // Defines the effects on the Blockly Editor that different state changes have
 export class BlocklyEditorEffects {
     private firstRun = true;
+    private startWorkspaceXml = ``;
+    private baseToolboxXml = ``;
+    private leaphyToolboxXml = ``;
+
+    private readonly darkTheme = getTheme("dark");
+    private readonly lightTheme = getTheme("light");
+
+    public async loadTheme() {
+        const workspace = this.blocklyState.workspace;
+        const darkMode = document.getElementsByTagName('body')[0].getAttribute('data-theme') === 'dark';
+        const blocklyTheme = darkMode ? this.darkTheme : this.lightTheme;
+        workspace.setTheme(blocklyTheme);
+        workspace.refreshTheme();
+    }
+
+    public async loadBlockly(element, robotType: RobotType, config: Blockly.BlocklyOptions) {
+        let allBlocks = getBlocks(robotType.id).block;
+        if (this.firstRun) {
+            this.firstRun = false;
+            allBlocks = allBlocks.concat(constantBlocks);
+        }
+
+        Blockly.defineBlocksWithJsonArray(allBlocks);
+
+        const toolboxXmlString = this.loadToolBox(
+            robotType,
+        );
+        config.toolbox = toolboxXmlString;
+        // @ts-ignore
+        const workspace = Blockly.inject(element, config);
+        const darkMode = document.getElementsByTagName('body')[0].getAttribute('data-theme') === 'dark';
+        const blocklyTheme = darkMode ? this.darkTheme : this.lightTheme;
+        workspace.setTheme(blocklyTheme);
+        const toolbox = workspace.getToolbox();
+        workspace.registerToolboxCategoryCallback(
+            "LISTS",
+            CATEGORIES.LISTS,
+        );
+        toolbox.getFlyout().autoClose = false;
+        const xml = Blockly.utils.xml.textToDom(this.startWorkspaceXml);
+        Blockly.Xml.domToWorkspace(xml, workspace);
+        this.blocklyState.workspace = workspace;
+        this.blocklyState.toolboxXml = toolboxXmlString;
+        if (
+            this.appState.currentEditor == CodeEditorType.Beginner
+        ) {
+            this.workspaceService
+                .restoreWorkspaceTemp()
+                .then(() => {
+                });
+        }
+        toolbox.selectItemByPosition(0);
+        toolbox.refreshTheme();
+
+        setTimeout(
+            () =>
+                (this.blocklyState.isSideNavOpen =
+                    robotType.features.showCodeOnStart),
+            200,
+        );
+    }
+
+
 
     constructor(
         private blocklyState: BlocklyEditorState,
@@ -41,6 +104,10 @@ export class BlocklyEditorEffects {
         private workspaceService: WorkspaceService,
         private localStorage: LocalStorageService,
     ) {
+        this.getXmlContent("./assets/blockly/leaphy-start.xml").subscribe(
+            (xml) => (this.startWorkspaceXml = xml),
+        );
+
         Blockly.registry.register(
             Blockly.registry.Type.TOOLBOX_ITEM,
             Blockly.ToolboxCategory.registrationName,
@@ -120,65 +187,18 @@ export class BlocklyEditorEffects {
                 withLatestFrom(
                     this.getXmlContent("./assets/blockly/base-toolbox.xml"),
                     this.getXmlContent("./assets/blockly/leaphy-toolbox.xml"),
-                    this.getXmlContent("./assets/blockly/leaphy-start.xml"),
                 ),
             )
             .subscribe(
-                ([
-                    [[element, config], robotType],
-                    baseToolboxXml,
-                    leaphyToolboxXml,
-                    startWorkspaceXml,
-                ]) => {
-                    let allBlocks = getBlocks(robotType.id).block;
-                    if (this.firstRun) {
-                        this.firstRun = false;
-                        allBlocks = allBlocks.concat(constantBlocks);
-                    }
-
-                    Blockly.defineBlocksWithJsonArray(allBlocks);
-                    config.theme = Blockly.Theme.defineTheme("leaphy", {
-                        blockStyles: THEME.defaultBlockStyles,
-                        categoryStyles: THEME.categoryStyles,
-                        componentStyles: THEME.componentStyles,
-                        name: "leaphy",
-                    });
-                    const toolboxXmlString = this.loadToolBox(
-                        baseToolboxXml,
-                        leaphyToolboxXml,
-                        robotType,
-                    );
-                    config.toolbox = toolboxXmlString;
-                    // @ts-ignore
-                    const workspace = Blockly.inject(element, config);
-                    const toolbox = workspace.getToolbox();
-                    workspace.registerToolboxCategoryCallback(
-                        "LISTS",
-                        CATEGORIES.LISTS,
-                    );
-                    toolbox.getFlyout().autoClose = false;
-                    const xml = Blockly.utils.xml.textToDom(startWorkspaceXml);
-                    Blockly.Xml.domToWorkspace(xml, workspace);
-                    this.blocklyState.workspace = workspace;
-                    this.blocklyState.toolboxXml = toolboxXmlString;
-                    if (
-                        this.appState.currentEditor == CodeEditorType.Beginner
-                    ) {
-                        this.workspaceService
-                            .restoreWorkspaceTemp()
-                            .then(() => {});
-                    }
-                    toolbox.selectItemByPosition(0);
-                    toolbox.refreshTheme();
-
-                    setTimeout(
-                        () =>
-                            (this.blocklyState.isSideNavOpen =
-                                robotType.features.showCodeOnStart),
-                        200,
-                    );
-                },
-            );
+                async ([
+                           [[element, config], robotType],
+                           baseToolboxXml,
+                           leaphyToolboxXml,
+                       ]) => {
+                    this.baseToolboxXml = baseToolboxXml;
+                    this.leaphyToolboxXml = leaphyToolboxXml;
+                    await this.loadBlockly(element, robotType, config);
+                });
 
         // When a new project is started, reset the blockly code
         this.appState.selectedRobotType$
@@ -205,12 +225,9 @@ export class BlocklyEditorEffects {
                     leaphyToolboxXml,
                     startWorkspaceXml,
                 ]) => {
-                    const toolboxXmlString = this.loadToolBox(
-                        baseToolboxXml,
-                        leaphyToolboxXml,
+                    this.blocklyState.toolboxXml = this.loadToolBox(
                         robotType,
                     );
-                    this.blocklyState.toolboxXml = toolboxXmlString;
 
                     workspace.clear();
                     const xml = Blockly.utils.xml.textToDom(startWorkspaceXml);
@@ -335,19 +352,18 @@ export class BlocklyEditorEffects {
         return category;
     }
 
+
     private loadToolBox(
-        baseToolboxXml: string,
-        leaphyToolboxXml: string,
         robotType: RobotType,
     ): string {
         const parser = new DOMParser();
         const toolboxXmlDoc = parser.parseFromString(
-            baseToolboxXml,
+            this.baseToolboxXml,
             "text/xml",
         );
         const toolboxElement = toolboxXmlDoc.getElementById("easyBloqsToolbox");
         const leaphyCategories = parser.parseFromString(
-            leaphyToolboxXml,
+            this.leaphyToolboxXml,
             "text/xml",
         );
         const leaphyRobotCategory = leaphyCategories.getElementById(

src/app/modules/blockly-editor/blockly-editor.page.scss

@@ -9,7 +9,8 @@
 
 .sidenav-container {
     flex: 1 1 auto;
-    background: #eee;
+    background: var(--leaphy-background-color);
+
 }
 
 #sidenav {

src/app/modules/blockly-editor/components/code-view/code-view.component.scss

@@ -3,4 +3,6 @@
     height: 100%;
     margin: 0;
     overflow-x: scroll;
+//    set the scrollbar color to #9c9a9a
+    scrollbar-color: #ccc #9c9a9a;
 }

src/app/modules/blockly-editor/components/code-view/code-view.component.ts

@@ -7,11 +7,20 @@ import { CodeEditorState } from "../../../../state/code-editor.state";
     styleUrls: ["./code-view.component.scss"],
 })
 export class CodeViewComponent {
-    editorOptions = {
+    editorOptions : any = {
         language: "cpp",
         readOnly: true,
         automaticLayout: true,
     };
 
-    constructor(public codeEditor: CodeEditorState) {}
+    constructor(public codeEditor: CodeEditorState) {
+        // check if we are currently in dark mode
+        const isDarkMode = document.getElementsByTagName('body')[0].getAttribute('data-theme') === 'dark';
+        if (isDarkMode) {
+            this.editorOptions = {
+                ...this.editorOptions,
+                theme: "vs-dark",
+            };
+        }
+    }
 }

src/app/modules/code-editor-cpp/code-editor-cpp.page.ts

@@ -5,6 +5,7 @@ import { SharedModule } from "../shared/shared.module";
 import { CoreModule } from "../core/core.module";
 import { WorkspaceService } from "../../services/workspace.service";
 import { MonacoEditorModule } from "ngx-monaco-editor-v2";
+import {AppState} from "../../state/app.state";
 
 @Component({
     standalone: true,
@@ -14,15 +15,41 @@ import { MonacoEditorModule } from "ngx-monaco-editor-v2";
     imports: [CommonModule, SharedModule, CoreModule, MonacoEditorModule],
 })
 export class CodeEditorCppPage implements AfterViewInit {
-    editorOptions = {
+    editorOptions: any = {
         language: "cpp",
         automaticLayout: true,
     };
 
     constructor(
         public codeEditorState: CodeEditorState,
         private workspaceService: WorkspaceService,
-    ) {}
+        private appState: AppState,
+    ) {
+        // check if we are currently in dark mode
+        const isDarkMode = appState.selectedTheme === 'dark';
+        if (isDarkMode) {
+            this.editorOptions = {
+                ...this.editorOptions,
+                theme: "vs-dark",
+            };
+        }
+
+        appState.selectedTheme$.subscribe((theme) => {
+            if (theme === "dark") {
+                this.editorOptions = {
+                    ...this.editorOptions,
+                    theme: "vs-dark",
+                };
+            } else {
+                this.editorOptions = {
+                    ...this.editorOptions,
+                    theme: "vs",
+                };
+            }
+        });
+
+
+    }
 
     ngAfterViewInit(): void {
         window.addEventListener("beforeunload", async () => {