From ff3976078892910a132d7d18ef02af440cf774d0 Mon Sep 17 00:00:00 2001 From: Diwangshu Kakoty Date: Mon, 6 Jan 2025 16:37:32 +0530 Subject: [PATCH 01/15] highlights fix --- js/widgets/phrasemaker.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/js/widgets/phrasemaker.js b/js/widgets/phrasemaker.js index 7da9b6c7eb..a362abeb4d 100644 --- a/js/widgets/phrasemaker.js +++ b/js/widgets/phrasemaker.js @@ -994,6 +994,13 @@ class PhraseMaker { lyricsInput.style.backgroundColor = "#FF6EA1"; inputCell.appendChild(lyricsInput); + inputCell.addEventListener("mouseover", (event) => { + event.target.style.backgroundColor = platformColor.selectorSelected; + }); + + inputCell.addEventListener("mouseout", (event) => { + event.target.style.backgroundColor = "#FF6EA1"; + }); lyricsInput.addEventListener("focus", () => this.activity.isInputON = true); lyricsInput.addEventListener("blur", () => this.activity.isInputON = false); lyricsInput.addEventListener("input", (event) => { @@ -3112,17 +3119,17 @@ class PhraseMaker { // Using the alt attribute to store the note value cell.setAttribute("alt", 1 / noteValue); - cell.onmouseover = (event) => { + cell.addEventListener("mouseover", (event) => { if (event.target.style.backgroundColor !== "black") { event.target.style.backgroundColor = platformColor.selectorSelected; } - }; + }); - cell.onmouseout = (event) => { + cell.addEventListener("mouseout", (event) => { if (event.target.style.backgroundColor !== "black") { event.target.style.backgroundColor = event.target.getAttribute("cellColor"); } - }; + }); } // Add a note value. From ea2cd48b2a2403d2bb246d9423aad5eb3ee22a1e Mon Sep 17 00:00:00 2001 From: Diwangshu Kakoty Date: Wed, 8 Jan 2025 15:53:48 +0530 Subject: [PATCH 02/15] Dark Mode --- index.html | 9 + js/activity.js | 35 ++++ js/toolbar.js | 14 +- js/utils/platformstyle.js | 414 +++++++++++++++++++++++++------------- script.js | 22 +- 5 files changed, 354 insertions(+), 140 deletions(-) diff --git a/index.html b/index.html index aea8f6d80a..b0ec4f7efd 100644 --- a/index.html +++ b/index.html @@ -733,6 +733,15 @@ > +
  • + brightness_4 +
  • { + this.isDarkModeON = !this.isDarkModeON; // Toggle the boolean value + console.log(`Dark Mode is now ${this.isDarkModeON ? "ON" : "OFF"}`); + try { + this.storage.darkMode = this.isDarkModeON.toString(); // Save the state as a string + } catch (e) { + console.error("Error saving darkMode state to storage:", e); + } + }; + /* Z-Order (top to bottom): * menus * palettes @@ -6530,6 +6563,7 @@ class Activity { this.toolbar.renderModeSelectIcon(doSwitchMode, doRecordButton, doAnalytics, doOpenPlugin, deletePlugin, setScroller); this.toolbar.renderRunSlowlyIcon(doSlowButton); this.toolbar.renderRunStepIcon(doStepButton); + this.toolbar.renderDarkModeIcon(this.toggleDarkMode); this.toolbar.renderMergeIcon(_doMergeLoad); this.toolbar.renderRestoreIcon(restoreTrash); if (_THIS_IS_MUSIC_BLOCKS_) { @@ -7093,6 +7127,7 @@ class Activity { saveLocally() { try { localStorage.setItem('beginnerMode', this.beginnerMode.toString()); + localStorage.setItem('isDarkModeON', this.isDarkModeON.toString()); } catch (e) { console.error('Error saving to localStorage:', e); } diff --git a/js/toolbar.js b/js/toolbar.js index ecf4c6b479..c4e51eadcd 100644 --- a/js/toolbar.js +++ b/js/toolbar.js @@ -67,6 +67,7 @@ class Toolbar { ["delPluginIcon", _("Delete plugin")], ["enableHorizScrollIcon", _("Enable horizontal scrolling")], ["disableHorizScrollIcon", _("Disable horizontal scrolling")], + ["darkModeIcon", _("Change theme")], ["mergeWithCurrentIcon", _("Merge with current project")], ["chooseKeyIcon", _("Set Pitch Preview")], ["toggleJavaScriptIcon", _("JavaScript Editor")], @@ -128,6 +129,7 @@ class Toolbar { _("Delete plugin"), _("Enable horizontal scrolling"), _("Disable horizontal scrolling"), + _("Change theme"), _("Merge with current project"), _("Set Pitch Preview"), _("JavaScript Editor"), @@ -193,6 +195,7 @@ class Toolbar { ["delPluginIcon", _("Delete plugin")], ["enableHorizScrollIcon", _("Enable horizontal scrolling")], ["disableHorizScrollIcon", _("Disable horizontal scrolling")], + ["darkModeIcon", _("Change theme")], ["mergeWithCurrentIcon", _("Merge with current project")], ["toggleJavaScriptIcon", _("JavaScript Editor")], ["restoreIcon", _("Restore")], @@ -249,6 +252,7 @@ class Toolbar { _("Delete plugin"), _("Enable horizontal scrolling"), _("Disable horizontal scrolling"), + _("Change theme"), _("Merge with current project"), _("JavaScript Editor"), _("Restore"), @@ -422,7 +426,7 @@ class Toolbar { /** * Renders the load icon with the provided onclick handler. - * + * * @public * @param {Function} onclick - The onclick handler for the load icon. * @returns {void} @@ -435,6 +439,14 @@ class Toolbar { }; } + renderDarkModeIcon(onclick) { + const darkModeIcon = docById("darkModeIcon"); + + darkModeIcon.onclick = () => { + onclick(); + } + } + /** * Renders the wrap icon. * diff --git a/js/utils/platformstyle.js b/js/utils/platformstyle.js index 5d0d4b465d..0c07fa3de9 100644 --- a/js/utils/platformstyle.js +++ b/js/utils/platformstyle.js @@ -19,6 +19,8 @@ along with this program. If not, see . /* exported showButtonHighlight */ +const isDarkModeON = JSON.parse(localStorage.darkMode); + window.platform = { android: /Android/i.test(navigator.userAgent), FF: /Firefox/i.test(navigator.userAgent), @@ -28,144 +30,282 @@ window.platform = { platform.androidWebkit = platform.android && !platform.FF; platform.FFOS = platform.FF && (platform.mobile || platform.tablet) && !platform.android; +console.log("platform", isDarkModeON); -window.platformColor = { - blockText: "#282828", - paletteColors: { - widgets: ["#7CD622", "#57AD02", "#77C428", "#B4EB7D"], - pitch: ["#7CD622", "#57AD02", "#77C428", "#B4EB7D"], - // rhythm: ["#FE994F", "#E86B0E", "#FF8B2D", "#FEC092"], - rhythm: ["#FF8700", "#E86B0E", "#FF6600", "#FEC092"], - meter: ["#FE994F", "#E86B0E", "#FF8B2D", "#FEC092"], - tone: ["#3EDCDD", "#1DBCBD", "#25C3C0", "#A1EEEF"], - ornament: ["#3EDCDD", "#1DBCBD", "#25C3C0", "#A1EEEF"], - intervals: ["#7CD622", "#57AD02", "#77C428", "#B4EB7D"], - volume: ["#3EDCDD", "#1DBCBD", "#25C3C0", "#A1EEEF"], - drum: ["#3EDCDD", "#1DBCBD", "#25C3C0", "#A1EEEF"], - graphics: ["#92A9FF", "#5370DC", "#728FF9", "#CDD8FF"], - turtle: ["#92A9FF", "#5370DC", "#728FF9", "#CDD8FF"], - pen: ["#92A9FF", "#5370DC", "#728FF9", "#CDD8FF"], - // boxes: ["#FFBF00", "#DAAF30", "#DAA926", "#FFE391"], - boxes: ["#FFB900", "#d18600", "#FFA548", "#FFD092"], - // action: ["#FFBF00", "#DAAF30", "#DAA926", "#FFE391"], - action: ["#F3C800", "#DAAF30", "#DAA926", "#FFE391"], - media: ["#FF664B", "#EA4326", "#FF5942", "#FFB9E2"], - number: ["#FF6EA1", "#FF2C76", "#FF5293", "#FFCDDF"], - boolean: ["#D97DF5", "#B653D3", "#C96DF3", "#EDC6A3"], - flow: ["#D98A43", "#B7651A", "#D68136", "#ECC6A4"], - // sensors: ["#FF664B", "#EA4326", "#FF5942", "#FFB9E2"], - sensors: ["#AABB00", "#748400", "#E1F400", "#FFE391"], - extras: ["#C4C4C4", "#A0A0A0", "#B0B0B0", "#D0D0D0"], - program: ["#C4C4C4", "#A0A0A0", "#B0B0B0", "#D0D0D0"], - myblocks: ["#FFBF00", "#DAAF30", "#DAA926", "#FFE391"], - heap: ["#D98A43", "#B7651A", "#D68136", "#ECC6A4"], - dictionary: ["#D98A43", "#B7651A", "#D68136", "#ECC6A4"], - ensemble: ["#92A9FF", "#5370DC", "#728FF9", "#CDD8FF"] - }, - - disconnected: "#C4C4C4", // disconnected block color - header: platform.FF ? "#4DA6FF" : "#4DA6FF", - aux: "#1A8CFF", - sub: "#8CC6FF", - doHeaderShadow: !platform.FF, - rule: "#E2E2E2", - ruleColor: "#E2E2E2", - trashColor: "#C0C0C0", - trashBorder: "#808080", - trashActive: "#FF0000", - background: "#F9F9F9", - paletteSelected: "#F3F3F3", - paletteBackground: "#FFFFFF", - paletteText: "#666666", - rulerHighlight: "#FFBF00", - selectorBackground: "#8CC6FF", - selectorSelected: "#1A8CFF", - labelColor: "#a0a0a0", - tupletBackground: "#c0c0c0", - drumBackground: "#3EDCDD", - pitchBackground: "#7CD622", - graphicsBackground: "#92A9FF", - drumLabelBackground: "#25C3C0", - pitchLabelBackground: "#77C428", - graphicsLabelBackground: "#728FF9", - rhythmcellcolor: "#c8c8c8", - stopIconcolor : "#ea174c", - hitAreaGraphicsBeginFill: "#FFF", - orange: "#e37a00", // 5YR - piemenuBasic: ["#3ea4a3", "#60bfbc", "#1d8989", "#60bfbc", "#1d8989"], - exitWheelcolors: ["#808080", "#c0c0c0"], - exitWheelcolors2: ["#808080", "#92a9ff", "#80a080"], - pitchWheelcolors: ["#77c428", "#93e042", "#77c428", "#5ba900", "#77c428", "#93e042", "#adfd55"], - gridWheelcolors: { - wheel: ["#ffffff"], - selected: { - fill: "#dedede", - stroke: "#a3a3a3" - } - }, - drumWheelcolors: ["#1fadae", "#3edcdd"], - graphicWheelcolors: ["#92a9ff", "#728ff9"], - accidentalsWheelcolors: ["#77c428", "#93e042", "#77c428", "#5ba900", "#77c428"], - accidentalsWheelcolorspush: "#c0c0c0", - octavesWheelcolors: [ - "#ffb2bc", - "#ffccd6", - "#ffb2bc", - "#ffccd6", - "#ffb2bc", - "#ffccd6", - "#ffb2bc", - "#ffccd6", - "#c0c0c0", - "#c0c0c0", - "#c0c0c0", - "#c0c0c0", - "#c0c0c0", - "#c0c0c0" - ], - blockLabelsWheelcolors: [ - "#ffb2bc", - "#ffccd6", - "#ffb2bc", - "#ffccd6", - "#ffb2bc", - "#ffccd6", - "#ffb2bc", - "#ffccd6", - "#ffb2bc", - "#ffccd6", - "#ffb2bc", - "#ffccd6" - ], - noteValueWheelcolors: ["#ffb2bc", "#ffccd6"], - tabsWheelcolors: ["#ffb2bc", "#ffccd6"], - numberWheelcolors: ["#ffb2bc", "#ffccd6"], - piemenuBasicundefined: ["#77c428", "#93e042", "#5ba900"], - booleanWheelcolors: ["#d3cf76", "#b8b45f"], - piemenuVoicesColors: ["#3ea4a3", "#60bfbc", "#1d8989", "#60bfbc", "#1d8989"], - intervalNameWheelcolors: ["#77c428", "#93e042", "#77c428", "#5ba900", "#93e042"], - intervalWheelcolors: ["#77c428", "#93e042", "#77c428", "#5ba900", "#93e042"], - modeWheelcolors: ["#77c428", "#93e042"], - modeGroupWheelcolors: [ - "#ffb2bc", - "#ffccd6", - "#ffb2bc", - "#ffccd6", - "#ffb2bc", - "#ffccd6", - "#ffb2bc", - "#ffccd6", - "#c0c0c0", - "#c0c0c0", - "#c0c0c0", - "#c0c0c0", - "#c0c0c0", - "#c0c0c0" - ], - modePieMenusIfColorPush: "#4b8b0e", - modePieMenusElseColorPush: "#66a62d", - wheelcolors: ["#808080", "#909090", "#808080", "#909090", "#707070"] -}; +if (isDarkModeON) { + window.platformColor = { + blockText: "#E2E2E2", + paletteColors: { + widgets: ["#4CAF50", "#388E3C", "#66BB6A", "#A5D6A7"], + pitch: ["#4CAF50", "#388E3C", "#66BB6A", "#A5D6A7"], + rhythm: ["#FF5722", "#D84315", "#FF7043", "#FFAB91"], + meter: ["#FF5722", "#D84315", "#FF7043", "#FFAB91"], + tone: ["#00BCD4", "#008BA3", "#00ACC1", "#80DEEA"], + ornament: ["#00BCD4", "#008BA3", "#00ACC1", "#80DEEA"], + intervals: ["#4CAF50", "#388E3C", "#66BB6A", "#A5D6A7"], + volume: ["#00BCD4", "#008BA3", "#00ACC1", "#80DEEA"], + drum: ["#00BCD4", "#008BA3", "#00ACC1", "#80DEEA"], + graphics: ["#7986CB", "#3F51B5", "#5C6BC0", "#9FA8DA"], + turtle: ["#7986CB", "#3F51B5", "#5C6BC0", "#9FA8DA"], + pen: ["#7986CB", "#3F51B5", "#5C6BC0", "#9FA8DA"], + boxes: ["#FF9800", "#E65100", "#FFAB40", "#FFE0B2"], + action: ["#FFC107", "#FFA000", "#FFCA28", "#FFECB3"], + media: ["#FF5252", "#D32F2F", "#FF6E6E", "#FFCDD2"], + number: ["#F48FB1", "#EC407A", "#F06292", "#F8BBD0"], + boolean: ["#BA68C8", "#8E24AA", "#AB47BC", "#E1BEE7"], + flow: ["#A1887F", "#6D4C41", "#8D6E63", "#D7CCC8"], + sensors: ["#CDDC39", "#827717", "#DCE775", "#F0F4C3"], + extras: ["#757575", "#424242", "#616161", "#BDBDBD"], + program: ["#757575", "#424242", "#616161", "#BDBDBD"], + myblocks: ["#FFC107", "#FFA000", "#FFCA28", "#FFECB3"], + heap: ["#A1887F", "#6D4C41", "#8D6E63", "#D7CCC8"], + dictionary: ["#A1887F", "#6D4C41", "#8D6E63", "#D7CCC8"], + ensemble: ["#7986CB", "#3F51B5", "#5C6BC0", "#9FA8DA"] + }, + + disconnected: "#424242", // Dimmed gray + header: "#1E88E5", // Blue header + aux: "#1976D2", + sub: "#64B5F6", + doHeaderShadow: !platform.FF, + rule: "#303030", + ruleColor: "#303030", + trashColor: "#757575", + trashBorder: "#424242", + trashActive: "#E53935", + background: "#303030", // Very dark gray + paletteSelected: "#1E1E1E", + paletteBackground: "#1C1C1C", + paletteText: "#BDBDBD", + rulerHighlight: "#FFEB3B", + selectorBackground: "#64B5F6", + selectorSelected: "#1E88E5", + labelColor: "#BDBDBD", + tupletBackground: "#424242", + drumBackground: "#00ACC1", + pitchBackground: "#4CAF50", + graphicsBackground: "#7986CB", + drumLabelBackground: "#008BA3", + pitchLabelBackground: "#388E3C", + graphicsLabelBackground: "#5C6BC0", + rhythmcellcolor: "#303030", + stopIconcolor: "#D50000", + hitAreaGraphicsBeginFill: "#121212", + orange: "#FB8C00", // 5YR + piemenuBasic: ["#00ACC1", "#4CAF50", "#008BA3", "#4CAF50", "#008BA3"], + exitWheelcolors: ["#757575", "#BDBDBD"], + exitWheelcolors2: ["#757575", "#7986CB", "#4CAF50"], + pitchWheelcolors: ["#388E3C", "#4CAF50", "#388E3C", "#008BA3", "#388E3C", "#4CAF50", "#66BB6A"], + gridWheelcolors: { + wheel: ["#1C1C1C"], + selected: { + fill: "#303030", + stroke: "#757575" + } + }, + drumWheelcolors: ["#008BA3", "#00ACC1"], + graphicWheelcolors: ["#7986CB", "#5C6BC0"], + accidentalsWheelcolors: ["#388E3C", "#4CAF50", "#388E3C", "#008BA3", "#388E3C"], + accidentalsWheelcolorspush: "#424242", + octavesWheelcolors: [ + "#FFCDD2", + "#EF9A9A", + "#FFCDD2", + "#EF9A9A", + "#FFCDD2", + "#EF9A9A", + "#FFCDD2", + "#EF9A9A", + "#424242", + "#424242", + "#424242", + "#424242", + "#424242", + "#424242" + ], + blockLabelsWheelcolors: [ + "#FFCDD2", + "#EF9A9A", + "#FFCDD2", + "#EF9A9A", + "#FFCDD2", + "#EF9A9A", + "#FFCDD2", + "#EF9A9A", + "#FFCDD2", + "#EF9A9A", + "#FFCDD2", + "#EF9A9A" + ], + noteValueWheelcolors: ["#FFCDD2", "#EF9A9A"], + tabsWheelcolors: ["#FFCDD2", "#EF9A9A"], + numberWheelcolors: ["#FFCDD2", "#EF9A9A"], + piemenuBasicundefined: ["#388E3C", "#4CAF50", "#008BA3"], + booleanWheelcolors: ["#C5CAE9", "#9FA8DA"], + piemenuVoicesColors: ["#00ACC1", "#4CAF50", "#008BA3", "#4CAF50", "#008BA3"], + intervalNameWheelcolors: ["#388E3C", "#4CAF50", "#388E3C", "#008BA3", "#4CAF50"], + intervalWheelcolors: ["#388E3C", "#4CAF50", "#388E3C", "#008BA3", "#4CAF50"], + modeWheelcolors: ["#388E3C", "#4CAF50"], + modeGroupWheelcolors: [ + "#FFCDD2", + "#EF9A9A", + "#FFCDD2", + "#EF9A9A", + "#FFCDD2", + "#EF9A9A", + "#FFCDD2", + "#EF9A9A", + "#424242", + "#424242", + "#424242", + "#424242", + "#424242", + "#424242" + ], + modePieMenusIfColorPush: "#66BB6A", + modePieMenusElseColorPush: "#81C784", + wheelcolors: ["#757575", "#9E9E9E", "#757575", "#9E9E9E", "#616161"] + }; + +} else { + window.platformColor = { + blockText: "#282828", + paletteColors: { + widgets: ["#7CD622", "#57AD02", "#77C428", "#B4EB7D"], + pitch: ["#7CD622", "#57AD02", "#77C428", "#B4EB7D"], + // rhythm: ["#FE994F", "#E86B0E", "#FF8B2D", "#FEC092"], + rhythm: ["#FF8700", "#E86B0E", "#FF6600", "#FEC092"], + meter: ["#FE994F", "#E86B0E", "#FF8B2D", "#FEC092"], + tone: ["#3EDCDD", "#1DBCBD", "#25C3C0", "#A1EEEF"], + ornament: ["#3EDCDD", "#1DBCBD", "#25C3C0", "#A1EEEF"], + intervals: ["#7CD622", "#57AD02", "#77C428", "#B4EB7D"], + volume: ["#3EDCDD", "#1DBCBD", "#25C3C0", "#A1EEEF"], + drum: ["#3EDCDD", "#1DBCBD", "#25C3C0", "#A1EEEF"], + graphics: ["#92A9FF", "#5370DC", "#728FF9", "#CDD8FF"], + turtle: ["#92A9FF", "#5370DC", "#728FF9", "#CDD8FF"], + pen: ["#92A9FF", "#5370DC", "#728FF9", "#CDD8FF"], + // boxes: ["#FFBF00", "#DAAF30", "#DAA926", "#FFE391"], + boxes: ["#FFB900", "#d18600", "#FFA548", "#FFD092"], + // action: ["#FFBF00", "#DAAF30", "#DAA926", "#FFE391"], + action: ["#F3C800", "#DAAF30", "#DAA926", "#FFE391"], + media: ["#FF664B", "#EA4326", "#FF5942", "#FFB9E2"], + number: ["#FF6EA1", "#FF2C76", "#FF5293", "#FFCDDF"], + boolean: ["#D97DF5", "#B653D3", "#C96DF3", "#EDC6A3"], + flow: ["#D98A43", "#B7651A", "#D68136", "#ECC6A4"], + // sensors: ["#FF664B", "#EA4326", "#FF5942", "#FFB9E2"], + sensors: ["#AABB00", "#748400", "#E1F400", "#FFE391"], + extras: ["#C4C4C4", "#A0A0A0", "#B0B0B0", "#D0D0D0"], + program: ["#C4C4C4", "#A0A0A0", "#B0B0B0", "#D0D0D0"], + myblocks: ["#FFBF00", "#DAAF30", "#DAA926", "#FFE391"], + heap: ["#D98A43", "#B7651A", "#D68136", "#ECC6A4"], + dictionary: ["#D98A43", "#B7651A", "#D68136", "#ECC6A4"], + ensemble: ["#92A9FF", "#5370DC", "#728FF9", "#CDD8FF"] + }, + + disconnected: "#C4C4C4", // disconnected block color + header: platform.FF ? "#4DA6FF" : "#4DA6FF", + aux: "#1A8CFF", + sub: "#8CC6FF", + doHeaderShadow: !platform.FF, + rule: "#E2E2E2", + ruleColor: "#E2E2E2", + trashColor: "#C0C0C0", + trashBorder: "#808080", + trashActive: "#FF0000", + background: "#F9F9F9", + paletteSelected: "#F3F3F3", + paletteBackground: "#FFFFFF", + paletteText: "#666666", + rulerHighlight: "#FFBF00", + selectorBackground: "#8CC6FF", + selectorSelected: "#1A8CFF", + labelColor: "#a0a0a0", + tupletBackground: "#c0c0c0", + drumBackground: "#3EDCDD", + pitchBackground: "#7CD622", + graphicsBackground: "#92A9FF", + drumLabelBackground: "#25C3C0", + pitchLabelBackground: "#77C428", + graphicsLabelBackground: "#728FF9", + rhythmcellcolor: "#c8c8c8", + stopIconcolor : "#ea174c", + hitAreaGraphicsBeginFill: "#FFF", + orange: "#e37a00", // 5YR + piemenuBasic: ["#3ea4a3", "#60bfbc", "#1d8989", "#60bfbc", "#1d8989"], + exitWheelcolors: ["#808080", "#c0c0c0"], + exitWheelcolors2: ["#808080", "#92a9ff", "#80a080"], + pitchWheelcolors: ["#77c428", "#93e042", "#77c428", "#5ba900", "#77c428", "#93e042", "#adfd55"], + gridWheelcolors: { + wheel: ["#ffffff"], + selected: { + fill: "#dedede", + stroke: "#a3a3a3" + } + }, + drumWheelcolors: ["#1fadae", "#3edcdd"], + graphicWheelcolors: ["#92a9ff", "#728ff9"], + accidentalsWheelcolors: ["#77c428", "#93e042", "#77c428", "#5ba900", "#77c428"], + accidentalsWheelcolorspush: "#c0c0c0", + octavesWheelcolors: [ + "#ffb2bc", + "#ffccd6", + "#ffb2bc", + "#ffccd6", + "#ffb2bc", + "#ffccd6", + "#ffb2bc", + "#ffccd6", + "#c0c0c0", + "#c0c0c0", + "#c0c0c0", + "#c0c0c0", + "#c0c0c0", + "#c0c0c0" + ], + blockLabelsWheelcolors: [ + "#ffb2bc", + "#ffccd6", + "#ffb2bc", + "#ffccd6", + "#ffb2bc", + "#ffccd6", + "#ffb2bc", + "#ffccd6", + "#ffb2bc", + "#ffccd6", + "#ffb2bc", + "#ffccd6" + ], + noteValueWheelcolors: ["#ffb2bc", "#ffccd6"], + tabsWheelcolors: ["#ffb2bc", "#ffccd6"], + numberWheelcolors: ["#ffb2bc", "#ffccd6"], + piemenuBasicundefined: ["#77c428", "#93e042", "#5ba900"], + booleanWheelcolors: ["#d3cf76", "#b8b45f"], + piemenuVoicesColors: ["#3ea4a3", "#60bfbc", "#1d8989", "#60bfbc", "#1d8989"], + intervalNameWheelcolors: ["#77c428", "#93e042", "#77c428", "#5ba900", "#93e042"], + intervalWheelcolors: ["#77c428", "#93e042", "#77c428", "#5ba900", "#93e042"], + modeWheelcolors: ["#77c428", "#93e042"], + modeGroupWheelcolors: [ + "#ffb2bc", + "#ffccd6", + "#ffb2bc", + "#ffccd6", + "#ffb2bc", + "#ffccd6", + "#ffb2bc", + "#ffccd6", + "#c0c0c0", + "#c0c0c0", + "#c0c0c0", + "#c0c0c0", + "#c0c0c0", + "#c0c0c0" + ], + modePieMenusIfColorPush: "#4b8b0e", + modePieMenusElseColorPush: "#66a62d", + wheelcolors: ["#808080", "#909090", "#808080", "#909090", "#707070"] + }; +} document.querySelector("meta[name=theme-color]").content = platformColor.header; diff --git a/script.js b/script.js index e1fe68120f..64e12c2935 100644 --- a/script.js +++ b/script.js @@ -13,10 +13,22 @@ $(document).ready(function() { mode = localStorage.getItem("beginnerMode") || "true"; } catch (error) { console.error("Error accessing localStorage:", error); - - mode = "true"; + + mode = "true"; } + /** + * The user's selected dark mode, stored in local storage. + * @type {boolean} + */ + var isDarkModeON; + try { + console.log("log from script.js"); + isDarkModeON = localStorage.getItem("isDarkModeON") === "true"; + } catch (error) { + console.error("Error accessing localStorage:", error); + isDarkModeON = false; // Default to light mode + } /** * The icon element that displays the user's current mode. @@ -30,6 +42,12 @@ $(document).ready(function() { */ var modeText = document.getElementById("modeText"); + /** + * The dark mode icon element. + * @type {HTMLElement} + */ + var darkModeIcon = document.getElementById("darkModeIcon"); + // Set the mode icon and tooltip based on the user's selected mode. if (mode === null || mode === "true") { modeIcon.innerHTML = "star_border"; From 692aa98ceae37a5377c481c0767c3c6029860b41 Mon Sep 17 00:00:00 2001 From: Diwangshu Kakoty Date: Tue, 14 Jan 2025 00:26:00 +0530 Subject: [PATCH 03/15] css file added --- lib/materialize-dark.css | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 lib/materialize-dark.css diff --git a/lib/materialize-dark.css b/lib/materialize-dark.css new file mode 100644 index 0000000000..b65c992f6b --- /dev/null +++ b/lib/materialize-dark.css @@ -0,0 +1,3 @@ +.dark-mode .blue { + background-color: black !important; +} \ No newline at end of file From 326319541827d62885282de88b0588576103e5f2 Mon Sep 17 00:00:00 2001 From: Diwangshu Kakoty Date: Tue, 14 Jan 2025 00:27:59 +0530 Subject: [PATCH 04/15] css toogle --- js/activity.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/js/activity.js b/js/activity.js index eacc84bac5..7090f3ccaa 100644 --- a/js/activity.js +++ b/js/activity.js @@ -284,8 +284,11 @@ class Activity { if (typeof this.isDarkModeON === "string") { if (this.isDarkModeON === "true") { this.isDarkModeON = true; + body.classList.add('dark-mode'); + //navbar.classList.add('dark-mode'); } else if (this.isDarkModeON === "false") { this.isDarkModeON = false; + body.classList.remove('dark-mode'); } } } From 8c59a39d9e5dae87c8f2c1761c468fe1d81c4fea Mon Sep 17 00:00:00 2001 From: Diwangshu Kakoty Date: Tue, 14 Jan 2025 00:34:19 +0530 Subject: [PATCH 05/15] linked to html --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index b0ec4f7efd..a04c4479b2 100644 --- a/index.html +++ b/index.html @@ -70,6 +70,7 @@ + From ea9a87d9045ba5992f502e815bedbb2e38bbf2b6 Mon Sep 17 00:00:00 2001 From: Diwangshu Kakoty Date: Tue, 14 Jan 2025 17:38:07 +0530 Subject: [PATCH 06/15] fix 1 --- js/utils/platformstyle.js | 5 ++++- lib/materialize-dark.css | 6 +++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/js/utils/platformstyle.js b/js/utils/platformstyle.js index 0c07fa3de9..65ea6b6ad3 100644 --- a/js/utils/platformstyle.js +++ b/js/utils/platformstyle.js @@ -19,7 +19,10 @@ along with this program. If not, see . /* exported showButtonHighlight */ -const isDarkModeON = JSON.parse(localStorage.darkMode); +const isDarkModeON = localStorage.darkMode + ? JSON.parse(localStorage.darkMode) + : false; + window.platform = { android: /Android/i.test(navigator.userAgent), diff --git a/lib/materialize-dark.css b/lib/materialize-dark.css index b65c992f6b..ff893ef2a6 100644 --- a/lib/materialize-dark.css +++ b/lib/materialize-dark.css @@ -1,3 +1,7 @@ .dark-mode .blue { - background-color: black !important; + background-color: #022363 !important; +} + +.dark-mode .blue.darken-1 { + background-color: #01143b !important; } \ No newline at end of file From 40298eeb95d0e3e1586c0d1a80b0e527d72fc409 Mon Sep 17 00:00:00 2001 From: Diwangshu Kakoty Date: Wed, 15 Jan 2025 05:35:18 +0530 Subject: [PATCH 07/15] update 2 --- css/darkmode.css | 39 +++++++++++++++++++++++++++++++++++++ index.html | 2 +- js/activity.js | 4 ++-- js/palette.js | 35 ++++++++++++++++++--------------- js/utils/platformstyle.js | 12 +++++++++--- js/widgets/musickeyboard.js | 1 + js/widgets/phrasemaker.js | 1 - lib/materialize-dark.css | 7 ------- 8 files changed, 71 insertions(+), 30 deletions(-) create mode 100644 css/darkmode.css delete mode 100644 lib/materialize-dark.css diff --git a/css/darkmode.css b/css/darkmode.css new file mode 100644 index 0000000000..74cd1c9908 --- /dev/null +++ b/css/darkmode.css @@ -0,0 +1,39 @@ +.dark-mode .blue { + background-color: #022363 !important; +} + +.dark-mode .blue.darken-1 { + background-color: #01143b !important; +} + +.dark-mode #floatingWindows > .windowFrame { + border: 2px solid #000000; + background-color: #454545; +} + +.dark-mode .wfbtItem { + background-color: #225a91; +} + +.dark-mode #floatingWindows > .windowFrame > .wfTopBar .wftTitle { + color: #e8e8e8; +} + +.dark-mode .popupMsg { + background-color: #084e86; + color: #e8e8e8; +} + +.dark-mode #printText { + border-color: #000000; +} + +.dark-mode #loading-image-container { + background: #1a1a1a !important; + background-color: #1a1a1a !important; +} + +.dark-mode #loadingText { + color: white !important; +} + diff --git a/index.html b/index.html index a04c4479b2..7e6a2d6e06 100644 --- a/index.html +++ b/index.html @@ -70,7 +70,7 @@ - + diff --git a/js/activity.js b/js/activity.js index 7090f3ccaa..dd8af2dc20 100644 --- a/js/activity.js +++ b/js/activity.js @@ -275,7 +275,6 @@ class Activity { // Flag to check if dark mode is on or not this.isDarkModeON = false; try { - console.log("log from activity"); if (this.storage.darkMode === undefined) { this.isDarkModeON = false; } else if (this.storage.darkMode !== null) { @@ -1682,7 +1681,7 @@ class Activity { if (this.blockscale > 0) { this.resizeDebounce = true; this.blockscale -= 1; - this.clearCache(); + this.clearCache(); await this.blocks.setBlockScale(BLOCKSCALES[this.blockscale]); this.blocks.checkBounds(); this.refreshCanvas(); @@ -6495,6 +6494,7 @@ class Activity { console.log(`Dark Mode is now ${this.isDarkModeON ? "ON" : "OFF"}`); try { this.storage.darkMode = this.isDarkModeON.toString(); // Save the state as a string + window.location.reload(); } catch (e) { console.error("Error saving darkMode state to storage:", e); } diff --git a/js/palette.js b/js/palette.js index f2e5e8c160..705274d23d 100644 --- a/js/palette.js +++ b/js/palette.js @@ -130,12 +130,13 @@ class Palettes { td.width = 1.5 * this.cellSize; td.height = 1.5 * this.cellSize; td.style.position = "relative"; + td.style.backgroundColor = platformColor.paletteBackground; td.appendChild( makePaletteIcons( PALETTEICONS[MULTIPALETTEICONS[i]] - .replace("background_fill_color", platformColor.selectorBackground) - .replace(/stroke_color/g, platformColor.ruleColor) - .replace(/fill_color/g, platformColor.background), + .replace("background_fill_color", platformColor.paletteLabelBackground) + .replace(/stroke_color/g, "#E2E2E2") + .replace(/fill_color/g, "#F9F9F9"), 1.5 * this.cellSize, 1.5 * this.cellSize ) @@ -146,7 +147,7 @@ class Palettes { cover.style.top = "0"; cover.style.width = "100%"; cover.style.height = "1px"; - cover.style.background = platformColor.selectorBackground; + cover.style.background = platformColor.paletteLabelBackground; td.appendChild(cover); td.onmouseover = () => { this.showSelection(i, tr); @@ -161,23 +162,23 @@ class Palettes { if (j === i) { img = makePaletteIcons( PALETTEICONS[MULTIPALETTEICONS[j]] - .replace("background_fill_color", platformColor.selectorSelected) - .replace(/stroke_color/g, platformColor.ruleColor) - .replace(/fill_color/g, platformColor.background), + .replace("background_fill_color", platformColor.paletteLabelSelected) + .replace(/stroke_color/g, "#E2E2E2") + .replace(/fill_color/g, "#F9F9F9"), this.cellSize, this.cellSize ); - tr.children[j].children[1].style.background = platformColor.selectorSelected; + tr.children[j].children[1].style.background = platformColor.paletteLabelSelected; } else { img = makePaletteIcons( PALETTEICONS[MULTIPALETTEICONS[j]] - .replace("background_fill_color", platformColor.selectorBackground) - .replace(/stroke_color/g, platformColor.ruleColor) - .replace(/fill_color/g, platformColor.background), + .replace("background_fill_color", platformColor.paletteLabelBackground) + .replace(/stroke_color/g, "#E2E2E2") + .replace(/fill_color/g, "#F9F9F9"), this.cellSize, this.cellSize ); - tr.children[j].children[1].style.background = platformColor.selectorBackground; + tr.children[j].children[1].style.background = platformColor.paletteLabelBackground; } tr.children[j].children[0].src = img.src; } @@ -283,7 +284,7 @@ class Palettes { ); } } - + makeSearchButton(name, icon, listBody) { const row = listBody.insertRow(-1); const img = row.insertCell(-1); @@ -302,6 +303,7 @@ class Palettes { row.style.flexDirection = "row"; row.style.alignItems = "center"; row.style.width = "126px"; + row.style.backgroundColor = platformColor.paletteBackground; this._loadPaletteButtonHandler(name, row); } @@ -323,6 +325,7 @@ class Palettes { row.style.flexDirection = "row"; row.style.alignItems = "center"; row.style.width = "126px"; + row.style.backgroundColor = platformColor.paletteBackground; this._loadPaletteButtonHandler(name, row); } @@ -426,7 +429,7 @@ class Palettes { 'px"bgcolor="white">'; element.childNodes[0].style.border = `1px solid ${platformColor.selectorSelected}`; document.body.appendChild(element); - + } catch (e) { console.error('Error clearing palettes:', e); } @@ -457,9 +460,9 @@ class Palettes { timeout = setTimeout(() => this.showPalette(name), 400); } }; - + row.onmouseout = () => clearTimeout(timeout); - + // eslint-disable-next-line no-unused-vars row.onclick = (event) => { if (name == "search") { diff --git a/js/utils/platformstyle.js b/js/utils/platformstyle.js index 65ea6b6ad3..6883f330f9 100644 --- a/js/utils/platformstyle.js +++ b/js/utils/platformstyle.js @@ -37,6 +37,7 @@ console.log("platform", isDarkModeON); if (isDarkModeON) { window.platformColor = { + textColor : "#E2E2E2", blockText: "#E2E2E2", paletteColors: { widgets: ["#4CAF50", "#388E3C", "#66BB6A", "#A5D6A7"], @@ -65,7 +66,7 @@ if (isDarkModeON) { dictionary: ["#A1887F", "#6D4C41", "#8D6E63", "#D7CCC8"], ensemble: ["#7986CB", "#3F51B5", "#5C6BC0", "#9FA8DA"] }, - + disconnected: "#424242", // Dimmed gray header: "#1E88E5", // Blue header aux: "#1976D2", @@ -79,11 +80,14 @@ if (isDarkModeON) { background: "#303030", // Very dark gray paletteSelected: "#1E1E1E", paletteBackground: "#1C1C1C", + paletteLabelBackground: "#022363", + paletteLabelSelected: "#01143b", paletteText: "#BDBDBD", rulerHighlight: "#FFEB3B", selectorBackground: "#64B5F6", selectorSelected: "#1E88E5", labelColor: "#BDBDBD", + lyricsLabelBackground: "#FF2B77", tupletBackground: "#424242", drumBackground: "#00ACC1", pitchBackground: "#4CAF50", @@ -169,9 +173,9 @@ if (isDarkModeON) { modePieMenusElseColorPush: "#81C784", wheelcolors: ["#757575", "#9E9E9E", "#757575", "#9E9E9E", "#616161"] }; - } else { window.platformColor = { + textColor : "black", blockText: "#282828", paletteColors: { widgets: ["#7CD622", "#57AD02", "#77C428", "#B4EB7D"], @@ -204,7 +208,7 @@ if (isDarkModeON) { dictionary: ["#D98A43", "#B7651A", "#D68136", "#ECC6A4"], ensemble: ["#92A9FF", "#5370DC", "#728FF9", "#CDD8FF"] }, - + disconnected: "#C4C4C4", // disconnected block color header: platform.FF ? "#4DA6FF" : "#4DA6FF", aux: "#1A8CFF", @@ -218,6 +222,8 @@ if (isDarkModeON) { background: "#F9F9F9", paletteSelected: "#F3F3F3", paletteBackground: "#FFFFFF", + paletteLabelBackground: "#8CC6FF", + paletteLabelSelected: "#1A8CFF", paletteText: "#666666", rulerHighlight: "#FFBF00", selectorBackground: "#8CC6FF", diff --git a/js/widgets/musickeyboard.js b/js/widgets/musickeyboard.js index d65eeff7fa..225158a1ba 100644 --- a/js/widgets/musickeyboard.js +++ b/js/widgets/musickeyboard.js @@ -1623,6 +1623,7 @@ function MusicKeyboard(activity) { cell.setAttribute("start", selectedNotes[j].startTime); cell.setAttribute("dur", maxWidth); cell.style.backgroundColor = platformColor.rhythmcellcolor; + cell.style.color = platformColor.textColor; } const innerDiv = docById("mkbInnerDiv"); diff --git a/js/widgets/phrasemaker.js b/js/widgets/phrasemaker.js index a362abeb4d..c5bd7ff6e9 100644 --- a/js/widgets/phrasemaker.js +++ b/js/widgets/phrasemaker.js @@ -1051,7 +1051,6 @@ class PhraseMaker { tempTable = document.createElement("table"); tempTable.setAttribute("cellpadding", "0px"); this._tupletNoteValueRow = tempTable.insertRow(); - const tempTable2 = tempTable; this._tupletValueRow = tempTable.insertRow(); this._noteValueRow = tempTable.insertRow(); ptmTableRow.insertCell().append(tempTable); diff --git a/lib/materialize-dark.css b/lib/materialize-dark.css deleted file mode 100644 index ff893ef2a6..0000000000 --- a/lib/materialize-dark.css +++ /dev/null @@ -1,7 +0,0 @@ -.dark-mode .blue { - background-color: #022363 !important; -} - -.dark-mode .blue.darken-1 { - background-color: #01143b !important; -} \ No newline at end of file From f2bc6c5719f67230010b986dda222d5808603ee9 Mon Sep 17 00:00:00 2001 From: Diwangshu Kakoty Date: Thu, 16 Jan 2025 20:15:41 +0530 Subject: [PATCH 08/15] update 3 --- css/darkmode.css | 14 +++++++++ js/activity.js | 10 +++---- js/palette.js | 4 +-- js/planetInterface.js | 1 + js/toolbar.js | 2 +- js/utils/platformstyle.js | 60 ++++++++++++++++++++------------------- js/widgets/phrasemaker.js | 3 +- 7 files changed, 56 insertions(+), 38 deletions(-) diff --git a/css/darkmode.css b/css/darkmode.css index 74cd1c9908..677561dc63 100644 --- a/css/darkmode.css +++ b/css/darkmode.css @@ -37,3 +37,17 @@ color: white !important; } +.dark-mode .dropdown-content li > a{ + background-color: #1c1c1c; + color: #3fe0d1; +} + +.dark-mode .dropdown-content li > a:hover { + color: #252525 +} + +.dark-mode .dropdown-content{ + background-color: #1c1c1c; +} + + diff --git a/js/activity.js b/js/activity.js index dd8af2dc20..43e91321ac 100644 --- a/js/activity.js +++ b/js/activity.js @@ -1075,7 +1075,7 @@ class Activity { modal.style.transform = "translate(-50%, -50%)"; modal.style.width = "400px"; modal.style.padding = "24px"; - modal.style.backgroundColor = "#fff"; + modal.style.backgroundColor = platformColor.dialogueBox; modal.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.2)"; modal.style.borderRadius = "8px"; modal.style.zIndex = "10000"; @@ -1087,8 +1087,8 @@ class Activity { title.style.margin = "0 0 16px 0"; modal.appendChild(title); const message = document.createElement("p"); - message.textContent = "Are you sure you want to clear the workspace?"; - message.style.color = "#666666"; + message.textContent = _("Are you sure you want to clear the workspace?"); + message.style.color = platformColor.textColor; message.style.fontSize = "16px"; message.style.marginBottom = "24px"; modal.appendChild(message); @@ -1096,10 +1096,10 @@ class Activity { const buttonContainer = document.createElement("div"); buttonContainer.style.display = "flex"; buttonContainer.style.justifyContent = "flex-start"; - + const confirmBtn = document.createElement("button"); confirmBtn.textContent = "Confirm"; - confirmBtn.style.backgroundColor = "#2196F3"; + confirmBtn.style.backgroundColor = "#0066FF"; confirmBtn.style.color = "white"; confirmBtn.style.border = "none"; confirmBtn.style.borderRadius = "4px"; diff --git a/js/palette.js b/js/palette.js index 705274d23d..67a2204637 100644 --- a/js/palette.js +++ b/js/palette.js @@ -884,7 +884,7 @@ class Palette { if (createHeader) { let header = this.menuContainer.children[0]; header = header.insertRow(); - header.style.background = platformColor.selectorSelected; + header.style.backgroundColor = platformColor.paletteLabelBackground; header.innerHTML = ''; header = header.children[0]; @@ -903,7 +903,7 @@ class Palette { const label = document.createElement("span"); label.textContent = toTitleCase(_(this.name)); label.style.fontWeight = "bold"; - label.style.color = platformColor.paletteBackground; + label.style.color = platformColor.textColor; header.appendChild(label); const closeDownImg = document.createElement("span"); diff --git a/js/planetInterface.js b/js/planetInterface.js index 5e5c6ec783..09e273ac32 100644 --- a/js/planetInterface.js +++ b/js/planetInterface.js @@ -307,6 +307,7 @@ class PlanetInterface { */ this.init = async () => { this.iframe = document.getElementById("planet-iframe"); + this.iframe.style.backgroundColor = platformColor.background; try { await this.iframe.contentWindow.makePlanet( _THIS_IS_MUSIC_BLOCKS_, diff --git a/js/toolbar.js b/js/toolbar.js index c4e51eadcd..ae4b796be1 100644 --- a/js/toolbar.js +++ b/js/toolbar.js @@ -1086,7 +1086,7 @@ function renderNewProjectConfirmation() { const confirmationButton = document.createElement("a"); confirmationButton.id = "new-project"; confirmationButton.style.display = "inline-block"; - confirmationButton.style.backgroundColor = "#2196F3"; + confirmationButton.style.backgroundColor = "#0066FF"; confirmationButton.style.color = "white"; confirmationButton.style.textDecoration = "none"; confirmationButton.style.borderRadius = "4px"; diff --git a/js/utils/platformstyle.js b/js/utils/platformstyle.js index 6883f330f9..9294aedec1 100644 --- a/js/utils/platformstyle.js +++ b/js/utils/platformstyle.js @@ -33,42 +33,42 @@ window.platform = { platform.androidWebkit = platform.android && !platform.FF; platform.FFOS = platform.FF && (platform.mobile || platform.tablet) && !platform.android; -console.log("platform", isDarkModeON); if (isDarkModeON) { window.platformColor = { textColor : "#E2E2E2", blockText: "#E2E2E2", + dialogueBox:"#1C1C1C", paletteColors: { - widgets: ["#4CAF50", "#388E3C", "#66BB6A", "#A5D6A7"], - pitch: ["#4CAF50", "#388E3C", "#66BB6A", "#A5D6A7"], - rhythm: ["#FF5722", "#D84315", "#FF7043", "#FFAB91"], - meter: ["#FF5722", "#D84315", "#FF7043", "#FFAB91"], - tone: ["#00BCD4", "#008BA3", "#00ACC1", "#80DEEA"], - ornament: ["#00BCD4", "#008BA3", "#00ACC1", "#80DEEA"], - intervals: ["#4CAF50", "#388E3C", "#66BB6A", "#A5D6A7"], - volume: ["#00BCD4", "#008BA3", "#00ACC1", "#80DEEA"], - drum: ["#00BCD4", "#008BA3", "#00ACC1", "#80DEEA"], - graphics: ["#7986CB", "#3F51B5", "#5C6BC0", "#9FA8DA"], - turtle: ["#7986CB", "#3F51B5", "#5C6BC0", "#9FA8DA"], - pen: ["#7986CB", "#3F51B5", "#5C6BC0", "#9FA8DA"], - boxes: ["#FF9800", "#E65100", "#FFAB40", "#FFE0B2"], - action: ["#FFC107", "#FFA000", "#FFCA28", "#FFECB3"], - media: ["#FF5252", "#D32F2F", "#FF6E6E", "#FFCDD2"], - number: ["#F48FB1", "#EC407A", "#F06292", "#F8BBD0"], - boolean: ["#BA68C8", "#8E24AA", "#AB47BC", "#E1BEE7"], - flow: ["#A1887F", "#6D4C41", "#8D6E63", "#D7CCC8"], - sensors: ["#CDDC39", "#827717", "#DCE775", "#F0F4C3"], - extras: ["#757575", "#424242", "#616161", "#BDBDBD"], - program: ["#757575", "#424242", "#616161", "#BDBDBD"], - myblocks: ["#FFC107", "#FFA000", "#FFCA28", "#FFECB3"], - heap: ["#A1887F", "#6D4C41", "#8D6E63", "#D7CCC8"], - dictionary: ["#A1887F", "#6D4C41", "#8D6E63", "#D7CCC8"], - ensemble: ["#7986CB", "#3F51B5", "#5C6BC0", "#9FA8DA"] + widgets: ["#2E7D32", "#1B5E20", "#388E3C", "#81C784"], + pitch: ["#2E7D32", "#1B5E20", "#388E3C", "#81C784"], + rhythm: ["#BF360C", "#8C2A0B", "#D84315", "#FF8A65"], + meter: ["#BF360C", "#8C2A0B", "#D84315", "#FF8A65"], + tone: ["#00838F", "#005662", "#0097A7", "#4DD0E1"], + ornament: ["#00838F", "#005662", "#0097A7", "#4DD0E1"], + intervals: ["#2E7D32", "#1B5E20", "#388E3C", "#81C784"], + volume: ["#00838F", "#005662", "#0097A7", "#4DD0E1"], + drum: ["#00838F", "#005662", "#0097A7", "#4DD0E1"], + graphics: ["#3949AB", "#283593", "#5E35B1", "#7986CB"], + turtle: ["#3949AB", "#283593", "#5E35B1", "#7986CB"], + pen: ["#3949AB", "#283593", "#5E35B1", "#7986CB"], + boxes: ["#E65100", "#BF360C", "#F57C00", "#FFB74D"], + action: ["#FF8F00", "#FF6F00", "#FFB300", "#FFE082"], + media: ["#C62828", "#8E0000", "#E53935", "#FF8A80"], + number: ["#AD1457", "#880E4F", "#EC407A", "#F48FB1"], + boolean: ["#7B1FA2", "#4A0072", "#9C27B0", "#CE93D8"], + flow: ["#5D4037", "#3E2723", "#795548", "#BCAAA4"], + sensors: ["#827717", "#4B830D", "#C0CA33", "#E6EE9C"], + extras: ["#424242", "#212121", "#616161", "#9E9E9E"], + program: ["#424242", "#212121", "#616161", "#9E9E9E"], + myblocks: ["#FF8F00", "#FF6F00", "#FFB300", "#FFE082"], + heap: ["#5D4037", "#3E2723", "#795548", "#BCAAA4"], + dictionary: ["#5D4037", "#3E2723", "#795548", "#BCAAA4"], + ensemble: ["#3949AB", "#283593", "#5E35B1", "#7986CB"] }, - disconnected: "#424242", // Dimmed gray - header: "#1E88E5", // Blue header + disconnected: "#5C5C5C", + header: "#1E88E5", aux: "#1976D2", sub: "#64B5F6", doHeaderShadow: !platform.FF, @@ -87,7 +87,7 @@ if (isDarkModeON) { selectorBackground: "#64B5F6", selectorSelected: "#1E88E5", labelColor: "#BDBDBD", - lyricsLabelBackground: "#FF2B77", + lyricsLabelBackground: "#C7225D", tupletBackground: "#424242", drumBackground: "#00ACC1", pitchBackground: "#4CAF50", @@ -177,6 +177,7 @@ if (isDarkModeON) { window.platformColor = { textColor : "black", blockText: "#282828", + dialogueBox:"#fff", paletteColors: { widgets: ["#7CD622", "#57AD02", "#77C428", "#B4EB7D"], pitch: ["#7CD622", "#57AD02", "#77C428", "#B4EB7D"], @@ -229,6 +230,7 @@ if (isDarkModeON) { selectorBackground: "#8CC6FF", selectorSelected: "#1A8CFF", labelColor: "#a0a0a0", + lyricsLabelBackground: "#FF2B77", tupletBackground: "#c0c0c0", drumBackground: "#3EDCDD", pitchBackground: "#7CD622", diff --git a/js/widgets/phrasemaker.js b/js/widgets/phrasemaker.js index c5bd7ff6e9..157ab2c696 100644 --- a/js/widgets/phrasemaker.js +++ b/js/widgets/phrasemaker.js @@ -942,7 +942,7 @@ class PhraseMaker { cell.style.position = "sticky"; cell.style.left = "1.2px"; cell.style.zIndex = "1"; - cell.style.backgroundColor = platformColor.lyricsLabelBackground || "#FF2B77"; + cell.style.backgroundColor = platformColor.lyricsLabelBackground; cell.style.textAlign = "center"; cell.innerHTML = "Lyrics"; @@ -3143,6 +3143,7 @@ class PhraseMaker { cell.style.textAlign = "center"; cell.innerHTML = noteValueToDisplay; cell.style.backgroundColor = platformColor.rhythmcellcolor; + cell.style.color = platformColor.textColor; cell.setAttribute("alt", noteValue); if (this._matrixHasTuplets) { From 2be6b8baf53dc153a5d0f7a1c5b96a42009ae552 Mon Sep 17 00:00:00 2001 From: Diwangshu Kakoty Date: Fri, 17 Jan 2025 03:41:30 +0530 Subject: [PATCH 09/15] suggested changes are updated --- js/palette.js | 4 ++-- js/toolbar.js | 2 +- js/utils/platformstyle.js | 8 ++++++++ 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/js/palette.js b/js/palette.js index 67a2204637..c291528ab6 100644 --- a/js/palette.js +++ b/js/palette.js @@ -135,8 +135,8 @@ class Palettes { makePaletteIcons( PALETTEICONS[MULTIPALETTEICONS[i]] .replace("background_fill_color", platformColor.paletteLabelBackground) - .replace(/stroke_color/g, "#E2E2E2") - .replace(/fill_color/g, "#F9F9F9"), + .replace(/stroke_color/g, platformColor.strokeColor) + .replace(/fill_color/g, platformColor.fillColor), 1.5 * this.cellSize, 1.5 * this.cellSize ) diff --git a/js/toolbar.js b/js/toolbar.js index ae4b796be1..abc9b84b16 100644 --- a/js/toolbar.js +++ b/js/toolbar.js @@ -1086,7 +1086,7 @@ function renderNewProjectConfirmation() { const confirmationButton = document.createElement("a"); confirmationButton.id = "new-project"; confirmationButton.style.display = "inline-block"; - confirmationButton.style.backgroundColor = "#0066FF"; + confirmationButton.style.backgroundColor = platformColor.blueButton; confirmationButton.style.color = "white"; confirmationButton.style.textDecoration = "none"; confirmationButton.style.borderRadius = "4px"; diff --git a/js/utils/platformstyle.js b/js/utils/platformstyle.js index 9294aedec1..76612bb28c 100644 --- a/js/utils/platformstyle.js +++ b/js/utils/platformstyle.js @@ -39,6 +39,9 @@ if (isDarkModeON) { textColor : "#E2E2E2", blockText: "#E2E2E2", dialogueBox:"#1C1C1C", + strokeColor: "#E2E2E2", + fillColor: "#F9F9F9", + blueButton: "#0066FF", paletteColors: { widgets: ["#2E7D32", "#1B5E20", "#388E3C", "#81C784"], pitch: ["#2E7D32", "#1B5E20", "#388E3C", "#81C784"], @@ -88,6 +91,7 @@ if (isDarkModeON) { selectorSelected: "#1E88E5", labelColor: "#BDBDBD", lyricsLabelBackground: "#C7225D", + lyricsInputBackground: "#D15A84", tupletBackground: "#424242", drumBackground: "#00ACC1", pitchBackground: "#4CAF50", @@ -178,6 +182,9 @@ if (isDarkModeON) { textColor : "black", blockText: "#282828", dialogueBox:"#fff", + strokeColor: "#E2E2E2", + fillColor: "#F9F9F9", + blueButton: "#0066FF", paletteColors: { widgets: ["#7CD622", "#57AD02", "#77C428", "#B4EB7D"], pitch: ["#7CD622", "#57AD02", "#77C428", "#B4EB7D"], @@ -231,6 +238,7 @@ if (isDarkModeON) { selectorSelected: "#1A8CFF", labelColor: "#a0a0a0", lyricsLabelBackground: "#FF2B77", + lyricsInputBackground: "#FF6EA1", tupletBackground: "#c0c0c0", drumBackground: "#3EDCDD", pitchBackground: "#7CD622", From 5d1614d7d0c3ccedd7f48c8687ea9bbf14125011 Mon Sep 17 00:00:00 2001 From: Diwangshu Kakoty Date: Sun, 19 Jan 2025 00:25:28 +0530 Subject: [PATCH 10/15] added README file --- js/utils/README.md | 76 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 js/utils/README.md diff --git a/js/utils/README.md b/js/utils/README.md new file mode 100644 index 0000000000..ffccf4be1a --- /dev/null +++ b/js/utils/README.md @@ -0,0 +1,76 @@ +# How to Customize Theme in Music Blocks? + +This guide explains how themes are managed in Music Blocks (MB) and how you can customize them using both **internal** and **external** methods. + +--- + +### Key Points on Theme Customization: + +1. **Refresh Required for Theme Application** + The site must be refreshed to apply a new theme in Music Blocks. + +2. **Canvas and Palette Button Styles** + Styles for the canvas and palette buttons are initialized at the time of loading MB. + - These cannot be directly modified using CSS. + +3. **Internal and External CSS** + MB uses a combination of internal and external CSS: + - **Internal CSS**: Block colors, pie menu, background, and other essential styles are defined in `js/utils/platformstyle.js`. + - **External CSS**: Elements like the navbar and dropdown menu are styled using external CSS files. + +4. **Saving Theme Name Locally** + To persist a theme, save its name locally when toggled. For example, the **dark mode** implementation: + ```javascript + this.toggleDarkMode = () => { + this.isDarkModeON = !this.isDarkModeON; // Toggle the boolean value + try { + this.storage.darkMode = this.isDarkModeON.toString(); // Save the state as a string + window.location.reload(); // Reload the browser + } catch (e) { + console.error("Error saving darkMode state to storage:", e); + } + }; + ``` + +5. **Applying the Theme After Reload** + Upon reloading, retrieve the theme name from local storage, and apply the corresponding class to the `` element. + - External CSS with the same class name will override the styles. + - Ensure the external CSS file is linked **last** in the main HTML file. + + Example: + ```javascript + // Flag to check if dark mode is enabled + this.isDarkModeON = false; + + try { + if (this.storage.darkMode === undefined) { + this.isDarkModeON = false; + } else if (this.storage.darkMode !== null) { + this.isDarkModeON = this.storage.darkMode; + + if (typeof this.isDarkModeON === "string") { + if (this.isDarkModeON === "true") { + this.isDarkModeON = true; + body.classList.add('dark-mode'); // Add class to body + } else if (this.isDarkModeON === "false") { + this.isDarkModeON = false; + body.classList.remove('dark-mode'); // Remove class + } + } + } + } catch (e) { + console.error("Error accessing darkMode storage:", e); + this.isDarkModeON = false; + } + ``` + +6. **Theme Integration in `platformstyle.js`** + Retrieve the saved theme name in `platformstyle.js`. Depending on the theme, initialize a different set of color variables that will affect multiple elements in MB. + +--- + +#### Additional Notes: +- **Order of CSS Loading**: Always link your external CSS **after** the internal CSS to allow overriding. +- **Test Before Deployment**: Ensure theme persistence and compatibility with different features in Music Blocks. + +By following these steps, you can efficiently manage and customize themes in Music Blocks to suit your preferences or design requirements. \ No newline at end of file From 907f9d1f72c3800ef4a5010053238318fa5e03df Mon Sep 17 00:00:00 2001 From: Diwangshu Kakoty Date: Sun, 19 Jan 2025 00:31:40 +0530 Subject: [PATCH 11/15] space --- js/utils/README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/js/utils/README.md b/js/utils/README.md index ffccf4be1a..f451414d02 100644 --- a/js/utils/README.md +++ b/js/utils/README.md @@ -7,18 +7,22 @@ This guide explains how themes are managed in Music Blocks (MB) and how you can ### Key Points on Theme Customization: 1. **Refresh Required for Theme Application** + The site must be refreshed to apply a new theme in Music Blocks. 2. **Canvas and Palette Button Styles** + Styles for the canvas and palette buttons are initialized at the time of loading MB. - These cannot be directly modified using CSS. 3. **Internal and External CSS** + MB uses a combination of internal and external CSS: - **Internal CSS**: Block colors, pie menu, background, and other essential styles are defined in `js/utils/platformstyle.js`. - **External CSS**: Elements like the navbar and dropdown menu are styled using external CSS files. 4. **Saving Theme Name Locally** + To persist a theme, save its name locally when toggled. For example, the **dark mode** implementation: ```javascript this.toggleDarkMode = () => { @@ -33,6 +37,7 @@ This guide explains how themes are managed in Music Blocks (MB) and how you can ``` 5. **Applying the Theme After Reload** + Upon reloading, retrieve the theme name from local storage, and apply the corresponding class to the `` element. - External CSS with the same class name will override the styles. - Ensure the external CSS file is linked **last** in the main HTML file. @@ -65,11 +70,13 @@ This guide explains how themes are managed in Music Blocks (MB) and how you can ``` 6. **Theme Integration in `platformstyle.js`** + Retrieve the saved theme name in `platformstyle.js`. Depending on the theme, initialize a different set of color variables that will affect multiple elements in MB. --- #### Additional Notes: + - **Order of CSS Loading**: Always link your external CSS **after** the internal CSS to allow overriding. - **Test Before Deployment**: Ensure theme persistence and compatibility with different features in Music Blocks. From abfb57e4240d3406169699bee3bdea2fcc01dff7 Mon Sep 17 00:00:00 2001 From: Diwangshu Kakoty Date: Sun, 19 Jan 2025 15:57:41 +0530 Subject: [PATCH 12/15] no boolean --- js/activity.js | 44 ++++++++++++------------------ js/palette.js | 8 +++--- js/utils/README.md | 56 +++++++++++++++++---------------------- js/utils/platformstyle.js | 6 ++--- script.js | 13 --------- 5 files changed, 47 insertions(+), 80 deletions(-) diff --git a/js/activity.js b/js/activity.js index 43e91321ac..a062d3bad7 100644 --- a/js/activity.js +++ b/js/activity.js @@ -272,28 +272,15 @@ class Activity { //Flag to check if any other input box is active or not this.isInputON = false; - // Flag to check if dark mode is on or not - this.isDarkModeON = false; + // If the theme is set to "darkMode", enable dark mode else diable try { - if (this.storage.darkMode === undefined) { - this.isDarkModeON = false; - } else if (this.storage.darkMode !== null) { - this.isDarkModeON = this.storage.darkMode; - - if (typeof this.isDarkModeON === "string") { - if (this.isDarkModeON === "true") { - this.isDarkModeON = true; - body.classList.add('dark-mode'); - //navbar.classList.add('dark-mode'); - } else if (this.isDarkModeON === "false") { - this.isDarkModeON = false; - body.classList.remove('dark-mode'); - } - } + if (this.storage.myThemeName === "darkMode") { + body.classList.add("dark-mode"); + } else { + body.classList.remove("dark-mode"); } } catch (e) { - console.error("Error accessing darkMode storage:", e); - this.isDarkModeON = false; + console.error("Error accessing myThemeName storage:", e); } this.beginnerMode = true; @@ -1082,7 +1069,7 @@ class Activity { modal.style.textAlign = "left"; const title = document.createElement("h2"); title.textContent = "Clear Workspace"; - title.style.color = "#0066FF"; + title.style.color = platformColor.blueButton; title.style.fontSize = "24px"; title.style.margin = "0 0 16px 0"; modal.appendChild(title); @@ -6488,15 +6475,18 @@ class Activity { this._createErrorContainers(); - // Function to toggle dark mode - this.toggleDarkMode = () => { - this.isDarkModeON = !this.isDarkModeON; // Toggle the boolean value - console.log(`Dark Mode is now ${this.isDarkModeON ? "ON" : "OFF"}`); + // Function to toggle theme mode + this.toggleThemeMode = () => { + if (this.storage.myThemeName === "darkMode") { + // If currently in dark mode, remove the theme + delete this.storage.myThemeName; + } else { + this.storage.myThemeName = "darkMode"; + } try { - this.storage.darkMode = this.isDarkModeON.toString(); // Save the state as a string window.location.reload(); } catch (e) { - console.error("Error saving darkMode state to storage:", e); + console.error("Error reloading the window:", e); } }; @@ -6566,7 +6556,7 @@ class Activity { this.toolbar.renderModeSelectIcon(doSwitchMode, doRecordButton, doAnalytics, doOpenPlugin, deletePlugin, setScroller); this.toolbar.renderRunSlowlyIcon(doSlowButton); this.toolbar.renderRunStepIcon(doStepButton); - this.toolbar.renderDarkModeIcon(this.toggleDarkMode); + this.toolbar.renderDarkModeIcon(this.toggleThemeMode); this.toolbar.renderMergeIcon(_doMergeLoad); this.toolbar.renderRestoreIcon(restoreTrash); if (_THIS_IS_MUSIC_BLOCKS_) { diff --git a/js/palette.js b/js/palette.js index c291528ab6..2c6d220d02 100644 --- a/js/palette.js +++ b/js/palette.js @@ -163,8 +163,8 @@ class Palettes { img = makePaletteIcons( PALETTEICONS[MULTIPALETTEICONS[j]] .replace("background_fill_color", platformColor.paletteLabelSelected) - .replace(/stroke_color/g, "#E2E2E2") - .replace(/fill_color/g, "#F9F9F9"), + .replace(/stroke_color/g, platformColor.strokeColor) + .replace(/fill_color/g, platformColor.fillColor), this.cellSize, this.cellSize ); @@ -173,8 +173,8 @@ class Palettes { img = makePaletteIcons( PALETTEICONS[MULTIPALETTEICONS[j]] .replace("background_fill_color", platformColor.paletteLabelBackground) - .replace(/stroke_color/g, "#E2E2E2") - .replace(/fill_color/g, "#F9F9F9"), + .replace(/stroke_color/g, platformColor.strokeColor) + .replace(/fill_color/g, platformColor.fillColor), this.cellSize, this.cellSize ); diff --git a/js/utils/README.md b/js/utils/README.md index f451414d02..3337960426 100644 --- a/js/utils/README.md +++ b/js/utils/README.md @@ -25,15 +25,20 @@ This guide explains how themes are managed in Music Blocks (MB) and how you can To persist a theme, save its name locally when toggled. For example, the **dark mode** implementation: ```javascript - this.toggleDarkMode = () => { - this.isDarkModeON = !this.isDarkModeON; // Toggle the boolean value - try { - this.storage.darkMode = this.isDarkModeON.toString(); // Save the state as a string - window.location.reload(); // Reload the browser - } catch (e) { - console.error("Error saving darkMode state to storage:", e); - } - }; + // Function to toggle theme mode + this.toggleThemeMode = () => { + if (this.storage.myThemeName === "darkMode") { + // If currently in dark mode, remove the theme + delete this.storage.myThemeName; + } else { + this.storage.myThemeName = "darkMode"; + } + try { + window.location.reload(); + } catch (e) { + console.error("Error reloading the window:", e); + } + }; ``` 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 Example: ```javascript - // Flag to check if dark mode is enabled - this.isDarkModeON = false; - - try { - if (this.storage.darkMode === undefined) { - this.isDarkModeON = false; - } else if (this.storage.darkMode !== null) { - this.isDarkModeON = this.storage.darkMode; - - if (typeof this.isDarkModeON === "string") { - if (this.isDarkModeON === "true") { - this.isDarkModeON = true; - body.classList.add('dark-mode'); // Add class to body - } else if (this.isDarkModeON === "false") { - this.isDarkModeON = false; - body.classList.remove('dark-mode'); // Remove class - } - } - } - } catch (e) { - console.error("Error accessing darkMode storage:", e); - this.isDarkModeON = false; - } + // If the theme is set to "darkMode", enable dark mode else diable + try { + if (this.storage.myThemeName === "darkMode") { + body.classList.add("dark-mode"); + } else { + body.classList.remove("dark-mode"); + } + } catch (e) { + console.error("Error accessing myThemeName storage:", e); + } ``` 6. **Theme Integration in `platformstyle.js`** diff --git a/js/utils/platformstyle.js b/js/utils/platformstyle.js index 76612bb28c..b3a28167f4 100644 --- a/js/utils/platformstyle.js +++ b/js/utils/platformstyle.js @@ -19,9 +19,7 @@ along with this program. If not, see . /* exported showButtonHighlight */ -const isDarkModeON = localStorage.darkMode - ? JSON.parse(localStorage.darkMode) - : false; +const themeName = localStorage.myThemeName || undefined; window.platform = { @@ -34,7 +32,7 @@ window.platform = { platform.androidWebkit = platform.android && !platform.FF; platform.FFOS = platform.FF && (platform.mobile || platform.tablet) && !platform.android; -if (isDarkModeON) { +if (themeName === "darkMode") { window.platformColor = { textColor : "#E2E2E2", blockText: "#E2E2E2", diff --git a/script.js b/script.js index 64e12c2935..f720153c85 100644 --- a/script.js +++ b/script.js @@ -17,19 +17,6 @@ $(document).ready(function() { mode = "true"; } - /** - * The user's selected dark mode, stored in local storage. - * @type {boolean} - */ - var isDarkModeON; - try { - console.log("log from script.js"); - isDarkModeON = localStorage.getItem("isDarkModeON") === "true"; - } catch (error) { - console.error("Error accessing localStorage:", error); - isDarkModeON = false; // Default to light mode - } - /** * The icon element that displays the user's current mode. * @type {HTMLElement} From 3365acc6b55982c482372e0345d40d34f91c1bd1 Mon Sep 17 00:00:00 2001 From: Diwangshu Kakoty Date: Sun, 19 Jan 2025 16:31:20 +0530 Subject: [PATCH 13/15] platformColor --- js/activity.js | 2 +- js/widgets/phrasemaker.js | 6 +++--- script.js | 6 ------ 3 files changed, 4 insertions(+), 10 deletions(-) diff --git a/js/activity.js b/js/activity.js index a062d3bad7..2c0e8f4da2 100644 --- a/js/activity.js +++ b/js/activity.js @@ -1086,7 +1086,7 @@ class Activity { const confirmBtn = document.createElement("button"); confirmBtn.textContent = "Confirm"; - confirmBtn.style.backgroundColor = "#0066FF"; + confirmBtn.style.backgroundColor = platformColor.blueButton; confirmBtn.style.color = "white"; confirmBtn.style.border = "none"; confirmBtn.style.borderRadius = "4px"; diff --git a/js/widgets/phrasemaker.js b/js/widgets/phrasemaker.js index 157ab2c696..c3d2f69c10 100644 --- a/js/widgets/phrasemaker.js +++ b/js/widgets/phrasemaker.js @@ -965,7 +965,7 @@ class PhraseMaker { inputCell.style.width = this._noteWidth(noteValue) + "px"; inputCell.style.minWidth = inputCell.style.width; inputCell.style.maxWidth = inputCell.style.width; - inputCell.style.backgroundColor = "#FF6EA1"; + inputCell.style.backgroundColor = platformColor.lyricsLabelBackground; inputCell.style.fontFamily = "sans-serif"; inputCell.style.cursor = "default"; inputCell.style.borderSpacing = "1px 1px"; @@ -991,7 +991,7 @@ class PhraseMaker { lyricsInput.style.padding = "0"; lyricsInput.style.border = "none"; lyricsInput.style.borderRadius = "6px"; - lyricsInput.style.backgroundColor = "#FF6EA1"; + lyricsInput.style.backgroundColor = platformColor.lyricsInputBackground; inputCell.appendChild(lyricsInput); inputCell.addEventListener("mouseover", (event) => { @@ -999,7 +999,7 @@ class PhraseMaker { }); inputCell.addEventListener("mouseout", (event) => { - event.target.style.backgroundColor = "#FF6EA1"; + event.target.style.backgroundColor = platformColor.lyricsInputBackground; }); lyricsInput.addEventListener("focus", () => this.activity.isInputON = true); lyricsInput.addEventListener("blur", () => this.activity.isInputON = false); diff --git a/script.js b/script.js index f720153c85..7a2482b71e 100644 --- a/script.js +++ b/script.js @@ -29,12 +29,6 @@ $(document).ready(function() { */ var modeText = document.getElementById("modeText"); - /** - * The dark mode icon element. - * @type {HTMLElement} - */ - var darkModeIcon = document.getElementById("darkModeIcon"); - // Set the mode icon and tooltip based on the user's selected mode. if (mode === null || mode === "true") { modeIcon.innerHTML = "star_border"; From 6c4ba6e212668bab791a06ffc226df5d36c3aa0c Mon Sep 17 00:00:00 2001 From: Diwangshu Kakoty Date: Sun, 19 Jan 2025 16:49:47 +0530 Subject: [PATCH 14/15] platform2 --- js/widgets/phrasemaker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/widgets/phrasemaker.js b/js/widgets/phrasemaker.js index c3d2f69c10..50cb88d5d7 100644 --- a/js/widgets/phrasemaker.js +++ b/js/widgets/phrasemaker.js @@ -965,7 +965,7 @@ class PhraseMaker { inputCell.style.width = this._noteWidth(noteValue) + "px"; inputCell.style.minWidth = inputCell.style.width; inputCell.style.maxWidth = inputCell.style.width; - inputCell.style.backgroundColor = platformColor.lyricsLabelBackground; + inputCell.style.backgroundColor = platformColor.lyricsInputBackground; inputCell.style.fontFamily = "sans-serif"; inputCell.style.cursor = "default"; inputCell.style.borderSpacing = "1px 1px"; From 20712ee9348a18d87b273ae10e1e897223d13f60 Mon Sep 17 00:00:00 2001 From: Diwangshu Kakoty Date: Sun, 19 Jan 2025 19:17:16 +0530 Subject: [PATCH 15/15] highlight fix --- js/palette.js | 6 ++++++ js/utils/platformstyle.js | 2 ++ 2 files changed, 8 insertions(+) diff --git a/js/palette.js b/js/palette.js index 2c6d220d02..b61a6305c7 100644 --- a/js/palette.js +++ b/js/palette.js @@ -326,6 +326,12 @@ class Palettes { row.style.alignItems = "center"; row.style.width = "126px"; row.style.backgroundColor = platformColor.paletteBackground; + row.addEventListener('mouseover', () => { + row.style.backgroundColor = platformColor.hoverColor; + }); + row.addEventListener('mouseout', () => { + row.style.backgroundColor = platformColor.paletteBackground; + }); this._loadPaletteButtonHandler(name, row); } diff --git a/js/utils/platformstyle.js b/js/utils/platformstyle.js index b3a28167f4..678ca6d995 100644 --- a/js/utils/platformstyle.js +++ b/js/utils/platformstyle.js @@ -40,6 +40,7 @@ if (themeName === "darkMode") { strokeColor: "#E2E2E2", fillColor: "#F9F9F9", blueButton: "#0066FF", + hoverColor: "#808080", paletteColors: { widgets: ["#2E7D32", "#1B5E20", "#388E3C", "#81C784"], pitch: ["#2E7D32", "#1B5E20", "#388E3C", "#81C784"], @@ -183,6 +184,7 @@ if (themeName === "darkMode") { strokeColor: "#E2E2E2", fillColor: "#F9F9F9", blueButton: "#0066FF", + hoverColor: "#E0E0E0", paletteColors: { widgets: ["#7CD622", "#57AD02", "#77C428", "#B4EB7D"], pitch: ["#7CD622", "#57AD02", "#77C428", "#B4EB7D"],