space

sugarlabs · Jan 18, 2025 · 907f9d1 · 907f9d1
1 parent 5d1614d
commit 907f9d1
Showing 1 changed file with 7 additions and 0 deletions.
diff --git 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 `<body>` 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.