Tidy up color-mode.md

Also hit up static-resources.md for style

Author: stevepiercy

docs/classic-ui/static-resources.md

@@ -4,7 +4,7 @@ myst:
     "description": "Static resources in Plone 6"
     "property=og:description": "Static resources in Plone 6"
     "property=og:title": "Static resources in Plone 6"
-    "keywords": "Plone, static, resources"
+    "keywords": "Plone, static, resources, JavaScript, CSS"
 ---
 
 (classic-ui-static-resources-label)=
@@ -16,12 +16,13 @@ For this, we need to register static resources.
 
 
 (classic-ui-static-resources-registering-label)=
-## Registering javascript and css
+
+## Registering JavaScript and CSS
 
 To register a static resource in Plone 6, we need to use the `plone.base.interfaces.resources.IBundleRegistry` interface.
 
-The following example registers a Javascript resource in `browser/profiles/default/registry` of your Plone 6 project.
-The js files have to be in the `browser/static` folder of your Plone 6 project.
+The following example registers a JavaScript resource in `browser/profiles/default/registry` of your Plone 6 project.
+The JavaScript files have to be in the `browser/static` folder of your Plone 6 project.
 
 ```xml
 <registry>
@@ -47,7 +48,7 @@ You can register a CSS resource in the same way.
   </registry>
 ```
 
-Registering a js file and a css file in the same bundle is also possible.
+Registering a JavaScript file and a CSS file in the same bundle is also possible.
 
 ```xml 
 <registry>
@@ -62,33 +63,37 @@ Registering a js file and a css file in the same bundle is also possible.
 </registry>
 ```
 
+
 (classic-ui-static-resources-available-attributeslabel)=
 
 ## Available attributes
 
 The following attributes are available for registering a static resource:
 
 `enabled`
-:  Whether the bundle is enabled or not. If it is disabled, the bundle will not be loaded.
+:   Whether the bundle is enabled or not.
+    If it is disabled, the bundle will not be loaded.
 
 `jscompilation`
-:  The path to the compiled js file.
+:   The path to the compiled JavaScript file.
 
 `csscompilation`
-:  The path to the compiled css file.
+:   The path to the compiled CSS file.
 
 `depends`
-:  A list of bundles that this bundle depends on.
+:   A list of bundles that this bundle depends on.
 
 `load_async`
-:  Whether the bundle should be loaded asynchronously or not. *Only JS*
+:   Whether the bundle should be loaded asynchronously or not.
+    *Only JavaScript*
 
 `load_defer`
-:  Whether the bundle should be loaded deferred or not. *Only JS*
+:   Whether the bundle should be loaded deferred or not.
+    *Only JavaScript*
 
 
 (classic-ui-static-resources-loading-order-label)=
 
 ## Loading order of resources
 
-`depends` is used to define the loading order of resources, by specifying the name of the depending bundle.
+`depends` is used to define the loading order of resources, by specifying the name of the depending bundle.

docs/classic-ui/theming/color-mode.md

@@ -1,11 +1,28 @@
-# Color Modes
+---
+myst:
+  html_meta:
+    "description": "Color modes in Plone Classic UI"
+    "property=og:description": "Color modes in Plone Classic UI"
+    "property=og:title": "Color modes in Plone Classic UI"
+    "keywords": "Plone, Classic UI, theming, color modes, Bootstrap, Twitter"
+---
+
+(color-modes-label)=
+
+# Color modes
+
 Bootstrap 5.3 has introduced [Color Modes](https://getbootstrap.com/docs/5.3/customize/color-modes/).
-Here is a small guide how to implement color themes in Plone 6.
+This chapter is a guide for how to implement color themes in Plone 6.
+
 
-## Preferred Color Modes
-You will need to add some Javascript functionality to set the Bootstrap theme to the user's preferred color scheme.
-Add the Javascript file to the `browser/static` folder of your Plone 6 project and register it in the `browser/profiles/default/registry` of your Plone 6 project.
-See [Registering Javascript and CSS](classic-ui-static-resources-registering-label) for more information.
+(preferred-color-modes-label)=
+
+## Preferred color modes
+
+You will need to add some JavaScript functionality to set the Bootstrap theme to the user's preferred color scheme.
+Add the JavaScript file to the `browser/static` folder of your Plone 6 project.
+Register it in the `browser/profiles/default/registry` of your Plone 6 project.
+See {ref}`classic-ui-static-resources-registering-label` for more information.
 
 ```js
 (() => {
@@ -26,11 +43,14 @@ See [Registering Javascript and CSS](classic-ui-static-resources-registering-lab
 })()
 ```
 
-## Toggle Button
-In order to switch color themes, corresponding elements with `data-bs-theme-value`
-attributes must be added to the DOM.
-Default Bootstrap 5.3 color themes include `light`, `dark` and `auto`.
-If you want to add a theme toggler to your site, you can use the following example:
+
+(toggle-button-label)=
+
+## Toggle button
+
+To switch color themes, corresponding elements with `data-bs-theme-value` attributes must be added to the DOM.
+Default Bootstrap 5.3 color themes include `light`, `dark`, and `auto`.
+If you want to add a theme toggler to your site, you can use the following example.
 
 ```html
 <div class="btn-group btn-group-sm">
@@ -43,13 +63,17 @@ If you want to add a theme toggler to your site, you can use the following examp
 </div>
 ```
 
-## Registering the Toggle Button
 
-You will need to add some Javascript functionality to the toggler.
+(register-the-toggle-button-label)=
+
+## Register the toggle button
+
+You will need to add some JavaScript functionality to the toggler.
 The following code snippet is based on the [Bootstrap 5.3 documentation](https://getbootstrap.com/docs/5.3/customize/color-modes/#javascript).
 
-Add the Javascript file to the `browser/static` folder of your Plone 6 project and register it in the `browser/profiles/default/registry` of your Plone 6 project.
-See [Registering Javascript and CSS](classic-ui-static-resources-registering-label) for more information.
+Add the JavaScript file to the `browser/static` folder of your Plone 6 project.
+Register it in the `browser/profiles/default/registry` of your Plone 6 project.
+See {ref}`classic-ui-static-resources-registering-label` for more information.
 
 ```js
 (() => {
@@ -104,10 +128,14 @@ See [Registering Javascript and CSS](classic-ui-static-resources-registering-lab
 })()
 ```
 
+
+(customize-single-elements-label)=
+
 ## Customize single elements
+
 Elements can be assigned a static theme using the `data-bs-theme` attribute.
-When set to a value the element will be rendered in the given theme, despite the global theme.
-For example:
+When set to a value, the element will be rendered in the given theme, overriding the global theme.
+See the following example.
 
 ```html
 <form data-bs-theme='light'>
@@ -117,4 +145,4 @@ For example:
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
 </form>
-```
+```