chore: add Dark mode + some rewrites (#248)

* chore: start on scss rewrite

* chore: rewrite done, added themes

* chore: almost done with themes

* chore: almost done with themes....

* chore: finished themes

* chore: fix other merge conflicts

* fix: make CONNECT_PYTHON_ROBOT button primary

* chore: prettier

* chore: fix some mistakes

* chore: fix select color

* chore: fix all issues

* chore: fix last issues

* chore: prettier

* fix: oops

* chore: fix last issues... (again)

* chore: prettier

* fix: more contrast to file explorer names

* chore: fix color of second selection screen

* chore: last header border color

* chore: last few styling issues

* chore: prettier

* fix: oops

* fix: modal -> dialog

* chore: remove change of color on file explorer

* fix: background overrides all props, also when none

* fix: duplicate keys

* chore: fix last styling issue

* chore: prettier

* fix: change text color of upload log

src/app/effects/app.effects.ts

@@ -9,6 +9,7 @@ import { MatDialog } from "@angular/material/dialog";
 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 @@ export class AppEffects {
         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);
+
+                document
+                    .getElementsByTagName("body")[0]
+                    .setAttribute("data-bs-theme", theme);
+
+                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 @@ export class AppEffects {
                 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

@@ -13,11 +13,10 @@ import {
     blocks,
     CATEGORIES,
     EXTENSIONS,
-    THEME,
     translations,
 } from "@leaphy-robotics/leaphy-blocks";
-import { LeaphyCategory } from "../services/toolbox/category";
-import { LeaphyToolbox } from "../services/toolbox/toolbox";
+import { LeaphyCategory } from "../services/blockly/category";
+import { LeaphyToolbox } from "../services/blockly/toolbox";
 import { CodeEditorState } from "../state/code-editor.state";
 import {
     genericRobotType,
@@ -28,6 +27,7 @@ import { RobotType } from "../domain/robot.type";
 import { WorkspaceService } from "../services/workspace.service";
 import { LocalStorageService } from "../services/localstorage.service";
 import PinSelectorField from "../domain/blockly-fields";
+import getTheme from "../services/blockly/theme";
 
 @Injectable({
     providedIn: "root",
@@ -36,6 +36,72 @@ import PinSelectorField from "../domain/blockly-fields";
 // 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,
+    ) {
+        const translation = translations[this.appState.currentLanguageCode];
+        if (robotType === leaphyFlitzNanoRobotType)
+            translation.ARD_SERVO_WRITE = translation.ARD_SERVO_ARM_WRITE;
+        else translation.ARD_SERVO_WRITE = translation.ARD_SERVO_REGULAR_WRITE;
+
+        Blockly.setLocale(translation);
+
+        PinSelectorField.processPinMappings(robotType);
+        if (this.firstRun) {
+            this.firstRun = false;
+            Blockly.defineBlocksWithJsonArray(blocks);
+        }
+
+        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,
@@ -45,6 +111,10 @@ export class BlocklyEditorEffects {
         private workspaceService: WorkspaceService,
         private localStorage: LocalStorageService,
     ) {
+        this.getXmlContent("./assets/blockly/leaphy-start.xml").subscribe(
+            (xml) => (this.startWorkspaceXml = xml),
+        );
+
         Blockly.defineBlocksWithJsonArray(blocks);
         Blockly.fieldRegistry.register("field_pin_selector", PinSelectorField);
         Blockly.registry.register(
@@ -119,68 +189,17 @@ 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(
-                ([
+                async ([
                     [[element, config], robotType],
                     baseToolboxXml,
                     leaphyToolboxXml,
-                    startWorkspaceXml,
                 ]) => {
-                    const translation =
-                        translations[this.appState.currentLanguageCode];
-                    if (robotType === leaphyFlitzNanoRobotType)
-                        translation.ARD_SERVO_WRITE =
-                            translation.ARD_SERVO_ARM_WRITE;
-                    else
-                        translation.ARD_SERVO_WRITE =
-                            translation.ARD_SERVO_REGULAR_WRITE;
-
-                    Blockly.setLocale(translation);
-
-                    PinSelectorField.processPinMappings(robotType);
-                    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,
-                    );
+                    this.baseToolboxXml = baseToolboxXml;
+                    this.leaphyToolboxXml = leaphyToolboxXml;
+                    await this.loadBlockly(element, robotType, config);
                 },
             );
 
@@ -209,11 +228,7 @@ export class BlocklyEditorEffects {
                     leaphyToolboxXml,
                     startWorkspaceXml,
                 ]) => {
-                    this.blocklyState.toolboxXml = this.loadToolBox(
-                        baseToolboxXml,
-                        leaphyToolboxXml,
-                        robotType,
-                    );
+                    this.blocklyState.toolboxXml = this.loadToolBox(robotType);
 
                     workspace.clear();
                     const xml = Blockly.utils.xml.textToDom(startWorkspaceXml);
@@ -338,19 +353,15 @@ export class BlocklyEditorEffects {
         return category;
     }
 
-    private loadToolBox(
-        baseToolboxXml: string,
-        leaphyToolboxXml: string,
-        robotType: RobotType,
-    ): string {
+    private loadToolBox(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,7 @@
 
 .sidenav-container {
     flex: 1 1 auto;
-    background: #eee;
+    background: transparent !important;
 }
 
 #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

@@ -1,17 +1,36 @@
-import { Component } from "@angular/core";
+import {
+    AfterViewInit,
+    ChangeDetectorRef,
+    Component,
+    OnInit,
+} from "@angular/core";
 import { CodeEditorState } from "../../../../state/code-editor.state";
+import { editor } from "monaco-editor";
+import IStandaloneEditorConstructionOptions = editor.IStandaloneEditorConstructionOptions;
+import { AppState } from "../../../../state/app.state";
 
 @Component({
     selector: "app-code-view",
     templateUrl: "./code-view.component.html",
     styleUrls: ["./code-view.component.scss"],
 })
 export class CodeViewComponent {
-    editorOptions = {
+    editorOptions: IStandaloneEditorConstructionOptions = {
         language: "cpp",
         readOnly: true,
         automaticLayout: true,
+        theme: "vs",
     };
 
-    constructor(public codeEditor: CodeEditorState) {}
+    constructor(
+        private cdr: ChangeDetectorRef,
+        public codeEditor: CodeEditorState,
+        private appState: AppState,
+    ) {
+        // check if we are currently in dark mode
+        const isDarkMode = this.appState.selectedTheme === "dark";
+        if (isDarkMode) {
+            this.editorOptions.theme = "vs-dark";
+        }
+    }
 }

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

@@ -5,6 +5,9 @@ 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";
+import { editor } from "monaco-editor";
+import IStandaloneEditorConstructionOptions = editor.IStandaloneEditorConstructionOptions;
 
 @Component({
     standalone: true,
@@ -14,15 +17,23 @@ import { MonacoEditorModule } from "ngx-monaco-editor-v2";
     imports: [CommonModule, SharedModule, CoreModule, MonacoEditorModule],
 })
 export class CodeEditorCppPage implements AfterViewInit {
-    editorOptions = {
+    editorOptions: IStandaloneEditorConstructionOptions = {
         language: "cpp",
         automaticLayout: true,
+        theme: "vs",
     };
 
     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.theme = "vs-dark";
+        }
+    }
 
     ngAfterViewInit(): void {
         window.addEventListener("beforeunload", async () => {

src/app/modules/code-editor-python/code-editor-python.page.scss

@@ -10,6 +10,7 @@
     height: calc(100% - 64px);
     width: 100%;
     overflow: hidden;
+    background-color: var(--leaphy-background-color);
 }
 
 .sidenav-container {

src/app/modules/code-editor-python/code-editor-python.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({
     selector: "app-code-editor-python",
@@ -17,12 +18,20 @@ export class CodeEditorPythonPage implements AfterViewInit {
     editorOptions = {
         language: "python",
         automaticLayout: true,
+        theme: "vs",
     };
 
     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.theme = "vs-dark";
+        }
+    }
 
     ngAfterViewInit(): void {
         window.addEventListener("beforeunload", async () => {