diff --git a/css/darkmode.css b/css/darkmode.css new file mode 100644 index 0000000000..677561dc63 --- /dev/null +++ b/css/darkmode.css @@ -0,0 +1,53 @@ +.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; +} + +.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/index.html b/index.html index 5030f78fc4..241cb17bc3 100644 --- a/index.html +++ b/index.html @@ -70,6 +70,7 @@ + @@ -767,6 +768,15 @@ > +
  • + brightness_4 +
  • 0) { this.resizeDebounce = true; this.blockscale -= 1; - this.clearCache(); + this.clearCache(); await this.blocks.setBlockScale(BLOCKSCALES[this.blockscale]); this.blocks.checkBounds(); this.refreshCanvas(); @@ -6561,6 +6572,21 @@ class Activity { this._createErrorContainers(); + // 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); + } + }; + /* Z-Order (top to bottom): * menus * palettes @@ -6627,6 +6653,7 @@ class Activity { this.toolbar.renderModeSelectIcon(doSwitchMode, doRecordButton, doAnalytics, doOpenPlugin, deletePlugin, setScroller); this.toolbar.renderRunSlowlyIcon(doSlowButton); this.toolbar.renderRunStepIcon(doStepButton); + this.toolbar.renderDarkModeIcon(this.toggleThemeMode); this.toolbar.renderMergeIcon(_doMergeLoad); this.toolbar.renderRestoreIcon(restoreTrash); if (_THIS_IS_MUSIC_BLOCKS_) { @@ -7190,6 +7217,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/palette.js b/js/palette.js index f2e5e8c160..b61a6305c7 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, platformColor.strokeColor) + .replace(/fill_color/g, platformColor.fillColor), 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, platformColor.strokeColor) + .replace(/fill_color/g, platformColor.fillColor), 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, platformColor.strokeColor) + .replace(/fill_color/g, platformColor.fillColor), 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,13 @@ class Palettes { row.style.flexDirection = "row"; 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); } @@ -426,7 +435,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 +466,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") { @@ -881,7 +890,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]; @@ -900,7 +909,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 fc6d41ff43..c581fed5a3 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"), @@ -433,7 +437,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} @@ -446,6 +450,14 @@ class Toolbar { }; } + renderDarkModeIcon(onclick) { + const darkModeIcon = docById("darkModeIcon"); + + darkModeIcon.onclick = () => { + onclick(); + } + } + /** * Renders the wrap icon. * @@ -1085,7 +1097,7 @@ function renderNewProjectConfirmation() { const confirmationButton = document.createElement("a"); confirmationButton.id = "new-project"; confirmationButton.style.display = "inline-block"; - confirmationButton.style.backgroundColor = "#2196F3"; + confirmationButton.style.backgroundColor = platformColor.blueButton; confirmationButton.style.color = "white"; confirmationButton.style.textDecoration = "none"; confirmationButton.style.borderRadius = "4px"; diff --git a/js/utils/README.md b/js/utils/README.md new file mode 100644 index 0000000000..3337960426 --- /dev/null +++ b/js/utils/README.md @@ -0,0 +1,75 @@ +# 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 + // 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** + + 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 + // 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`** + + 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 diff --git a/js/utils/platformstyle.js b/js/utils/platformstyle.js index 5d0d4b465d..678ca6d995 100644 --- a/js/utils/platformstyle.js +++ b/js/utils/platformstyle.js @@ -19,6 +19,9 @@ along with this program. If not, see . /* exported showButtonHighlight */ +const themeName = localStorage.myThemeName || undefined; + + window.platform = { android: /Android/i.test(navigator.userAgent), FF: /Firefox/i.test(navigator.userAgent), @@ -29,143 +32,299 @@ window.platform = { platform.androidWebkit = platform.android && !platform.FF; platform.FFOS = platform.FF && (platform.mobile || platform.tablet) && !platform.android; -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"] - }, +if (themeName === "darkMode") { + window.platformColor = { + textColor : "#E2E2E2", + blockText: "#E2E2E2", + dialogueBox:"#1C1C1C", + strokeColor: "#E2E2E2", + fillColor: "#F9F9F9", + blueButton: "#0066FF", + hoverColor: "#808080", + paletteColors: { + 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: "#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"] -}; + disconnected: "#5C5C5C", + header: "#1E88E5", + 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", + paletteLabelBackground: "#022363", + paletteLabelSelected: "#01143b", + paletteText: "#BDBDBD", + rulerHighlight: "#FFEB3B", + selectorBackground: "#64B5F6", + selectorSelected: "#1E88E5", + labelColor: "#BDBDBD", + lyricsLabelBackground: "#C7225D", + lyricsInputBackground: "#D15A84", + 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 = { + textColor : "black", + blockText: "#282828", + dialogueBox:"#fff", + strokeColor: "#E2E2E2", + fillColor: "#F9F9F9", + blueButton: "#0066FF", + hoverColor: "#E0E0E0", + 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", + paletteLabelBackground: "#8CC6FF", + paletteLabelSelected: "#1A8CFF", + paletteText: "#666666", + rulerHighlight: "#FFBF00", + selectorBackground: "#8CC6FF", + selectorSelected: "#1A8CFF", + labelColor: "#a0a0a0", + lyricsLabelBackground: "#FF2B77", + lyricsInputBackground: "#FF6EA1", + 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/js/widgets/musickeyboard.js b/js/widgets/musickeyboard.js index 15bc7dd91f..002f889d53 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 c312cf4d72..de3926b8c0 100644 --- a/js/widgets/phrasemaker.js +++ b/js/widgets/phrasemaker.js @@ -943,7 +943,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"; @@ -966,7 +966,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.lyricsInputBackground; inputCell.style.fontFamily = "sans-serif"; inputCell.style.cursor = "default"; inputCell.style.borderSpacing = "1px 1px"; @@ -992,7 +992,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) => { @@ -1000,7 +1000,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); @@ -1052,7 +1052,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); @@ -3149,6 +3148,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) { diff --git a/script.js b/script.js index e1fe68120f..7a2482b71e 100644 --- a/script.js +++ b/script.js @@ -13,10 +13,9 @@ $(document).ready(function() { mode = localStorage.getItem("beginnerMode") || "true"; } catch (error) { console.error("Error accessing localStorage:", error); - - mode = "true"; - } + mode = "true"; + } /** * The icon element that displays the user's current mode.