Skip to content

Commit abfb57e

Browse files
Commanderk3Commanderk3
committed
no boolean
1 parent 907f9d1 commit abfb57e

File tree

5 files changed

+47
-80
lines changed

5 files changed

+47
-80
lines changed

‎js/activity.js‎

Lines changed: 17 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -272,28 +272,15 @@ class Activity {
272272
//Flag to check if any other input box is active or not
273273
this.isInputON = false;
274274

275-
// Flag to check if dark mode is on or not
276-
this.isDarkModeON = false;
275+
// If the theme is set to "darkMode", enable dark mode else diable
277276
try {
278-
if (this.storage.darkMode === undefined) {
279-
this.isDarkModeON = false;
280-
} else if (this.storage.darkMode !== null) {
281-
this.isDarkModeON = this.storage.darkMode;
282-
283-
if (typeof this.isDarkModeON === "string") {
284-
if (this.isDarkModeON === "true") {
285-
this.isDarkModeON = true;
286-
body.classList.add('dark-mode');
287-
//navbar.classList.add('dark-mode');
288-
} else if (this.isDarkModeON === "false") {
289-
this.isDarkModeON = false;
290-
body.classList.remove('dark-mode');
291-
}
292-
}
277+
if (this.storage.myThemeName === "darkMode") {
278+
body.classList.add("dark-mode");
279+
} else {
280+
body.classList.remove("dark-mode");
293281
}
294282
} catch (e) {
295-
console.error("Error accessing darkMode storage:", e);
296-
this.isDarkModeON = false;
283+
console.error("Error accessing myThemeName storage:", e);
297284
}
298285

299286
this.beginnerMode = true;
@@ -1082,7 +1069,7 @@ class Activity {
10821069
modal.style.textAlign = "left";
10831070
const title = document.createElement("h2");
10841071
title.textContent = "Clear Workspace";
1085-
title.style.color = "#0066FF";
1072+
title.style.color = platformColor.blueButton;
10861073
title.style.fontSize = "24px";
10871074
title.style.margin = "0 0 16px 0";
10881075
modal.appendChild(title);
@@ -6488,15 +6475,18 @@ class Activity {
64886475

64896476
this._createErrorContainers();
64906477

6491-
// Function to toggle dark mode
6492-
this.toggleDarkMode = () => {
6493-
this.isDarkModeON = !this.isDarkModeON; // Toggle the boolean value
6494-
console.log(`Dark Mode is now ${this.isDarkModeON ? "ON" : "OFF"}`);
6478+
// Function to toggle theme mode
6479+
this.toggleThemeMode = () => {
6480+
if (this.storage.myThemeName === "darkMode") {
6481+
// If currently in dark mode, remove the theme
6482+
delete this.storage.myThemeName;
6483+
} else {
6484+
this.storage.myThemeName = "darkMode";
6485+
}
64956486
try {
6496-
this.storage.darkMode = this.isDarkModeON.toString(); // Save the state as a string
64976487
window.location.reload();
64986488
} catch (e) {
6499-
console.error("Error saving darkMode state to storage:", e);
6489+
console.error("Error reloading the window:", e);
65006490
}
65016491
};
65026492

@@ -6566,7 +6556,7 @@ class Activity {
65666556
this.toolbar.renderModeSelectIcon(doSwitchMode, doRecordButton, doAnalytics, doOpenPlugin, deletePlugin, setScroller);
65676557
this.toolbar.renderRunSlowlyIcon(doSlowButton);
65686558
this.toolbar.renderRunStepIcon(doStepButton);
6569-
this.toolbar.renderDarkModeIcon(this.toggleDarkMode);
6559+
this.toolbar.renderDarkModeIcon(this.toggleThemeMode);
65706560
this.toolbar.renderMergeIcon(_doMergeLoad);
65716561
this.toolbar.renderRestoreIcon(restoreTrash);
65726562
if (_THIS_IS_MUSIC_BLOCKS_) {

‎js/palette.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -163,8 +163,8 @@ class Palettes {
163163
img = makePaletteIcons(
164164
PALETTEICONS[MULTIPALETTEICONS[j]]
165165
.replace("background_fill_color", platformColor.paletteLabelSelected)
166-
.replace(/stroke_color/g, "#E2E2E2")
167-
.replace(/fill_color/g, "#F9F9F9"),
166+
.replace(/stroke_color/g, platformColor.strokeColor)
167+
.replace(/fill_color/g, platformColor.fillColor),
168168
this.cellSize,
169169
this.cellSize
170170
);
@@ -173,8 +173,8 @@ class Palettes {
173173
img = makePaletteIcons(
174174
PALETTEICONS[MULTIPALETTEICONS[j]]
175175
.replace("background_fill_color", platformColor.paletteLabelBackground)
176-
.replace(/stroke_color/g, "#E2E2E2")
177-
.replace(/fill_color/g, "#F9F9F9"),
176+
.replace(/stroke_color/g, platformColor.strokeColor)
177+
.replace(/fill_color/g, platformColor.fillColor),
178178
this.cellSize,
179179
this.cellSize
180180
);

‎js/utils/README.md‎

Lines changed: 24 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,20 @@ This guide explains how themes are managed in Music Blocks (MB) and how you can
2525

2626
To persist a theme, save its name locally when toggled. For example, the **dark mode** implementation:
2727
```javascript
28-
this.toggleDarkMode = () => {
29-
this.isDarkModeON = !this.isDarkModeON; // Toggle the boolean value
30-
try {
31-
this.storage.darkMode = this.isDarkModeON.toString(); // Save the state as a string
32-
window.location.reload(); // Reload the browser
33-
} catch (e) {
34-
console.error("Error saving darkMode state to storage:", e);
35-
}
36-
};
28+
// Function to toggle theme mode
29+
this.toggleThemeMode = () => {
30+
if (this.storage.myThemeName === "darkMode") {
31+
// If currently in dark mode, remove the theme
32+
delete this.storage.myThemeName;
33+
} else {
34+
this.storage.myThemeName = "darkMode";
35+
}
36+
try {
37+
window.location.reload();
38+
} catch (e) {
39+
console.error("Error reloading the window:", e);
40+
}
41+
};
3742
```
3843

3944
5. **Applying the Theme After Reload**
@@ -44,29 +49,16 @@ This guide explains how themes are managed in Music Blocks (MB) and how you can
4449

4550
Example:
4651
```javascript
47-
// Flag to check if dark mode is enabled
48-
this.isDarkModeON = false;
49-
50-
try {
51-
if (this.storage.darkMode === undefined) {
52-
this.isDarkModeON = false;
53-
} else if (this.storage.darkMode !== null) {
54-
this.isDarkModeON = this.storage.darkMode;
55-
56-
if (typeof this.isDarkModeON === "string") {
57-
if (this.isDarkModeON === "true") {
58-
this.isDarkModeON = true;
59-
body.classList.add('dark-mode'); // Add class to body
60-
} else if (this.isDarkModeON === "false") {
61-
this.isDarkModeON = false;
62-
body.classList.remove('dark-mode'); // Remove class
63-
}
64-
}
65-
}
66-
} catch (e) {
67-
console.error("Error accessing darkMode storage:", e);
68-
this.isDarkModeON = false;
69-
}
52+
// If the theme is set to "darkMode", enable dark mode else diable
53+
try {
54+
if (this.storage.myThemeName === "darkMode") {
55+
body.classList.add("dark-mode");
56+
} else {
57+
body.classList.remove("dark-mode");
58+
}
59+
} catch (e) {
60+
console.error("Error accessing myThemeName storage:", e);
61+
}
7062
```
7163

7264
6. **Theme Integration in `platformstyle.js`**

‎js/utils/platformstyle.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
1919

2020
/* exported showButtonHighlight */
2121

22-
const isDarkModeON = localStorage.darkMode
23-
? JSON.parse(localStorage.darkMode)
24-
: false;
22+
const themeName = localStorage.myThemeName || undefined;
2523

2624

2725
window.platform = {
@@ -34,7 +32,7 @@ window.platform = {
3432
platform.androidWebkit = platform.android && !platform.FF;
3533
platform.FFOS = platform.FF && (platform.mobile || platform.tablet) && !platform.android;
3634

37-
if (isDarkModeON) {
35+
if (themeName === "darkMode") {
3836
window.platformColor = {
3937
textColor : "#E2E2E2",
4038
blockText: "#E2E2E2",

‎script.js‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,6 @@ $(document).ready(function() {
1717
mode = "true";
1818
}
1919

20-
/**
21-
* The user's selected dark mode, stored in local storage.
22-
* @type {boolean}
23-
*/
24-
var isDarkModeON;
25-
try {
26-
console.log("log from script.js");
27-
isDarkModeON = localStorage.getItem("isDarkModeON") === "true";
28-
} catch (error) {
29-
console.error("Error accessing localStorage:", error);
30-
isDarkModeON = false; // Default to light mode
31-
}
32-
3320
/**
3421
* The icon element that displays the user's current mode.
3522
* @type {HTMLElement}

0 commit comments

Comments
 (0)