Use list colors for list header icons

app/components/app-menu/home.gjs

@@ -22,7 +22,7 @@ import iconRounded from '../../icons/icon-rounded.svg?raw';
       <li>
         <button type="button" {{on "click" @onSavedPlaces}}>
           <Icon @name="bookmark" @size={{20}} />
-          <span>Saved places</span>
+          <span>Collections</span>
         </button>
       </li>
       <li>

app/components/places-sidebar.gjs

@@ -177,7 +177,11 @@ export default class PlacesSidebar extends Component {
               /></button>
           {{/if}}
           {{#if @title}}
-            <h2><Icon @name="bookmark" @size={{20}} @color="#333" />
+            <h2><Icon
+                @name="bookmark"
+                @size={{20}}
+                @color={{or @color "#898989"}}
+              />
               {{@title}}</h2>
           {{else if this.isNearbySearch}}
             <h2><Icon @name="target" @size={{20}} @color="#ea4335" />

app/templates/lists/index.gjs

@@ -12,7 +12,12 @@ export default class ListsIndexTemplate extends Component {
   @service mapUi;
 
   styleFor(color) {
-    return htmlSafe(`background-color: ${color}`);
+    const finalColor =
+      color ||
+      getComputedStyle(document.documentElement)
+        .getPropertyValue('--default-list-color')
+        .trim();
+    return htmlSafe(`background-color: ${finalColor}`);
   }
 
   @action
@@ -37,8 +42,8 @@ export default class ListsIndexTemplate extends Component {
           <button type="button" class="back-btn" {{on "click" this.backToMenu}}>
             <Icon @name="arrow-left" @size={{20}} @color="#333" />
           </button>
-          <h2><Icon @name="bookmark" @size={{20}} @color="#333" />
-            Saved places</h2>
+          <h2><Icon @name="bookmark" @size={{20}} @color="#898989" />
+            Collections</h2>
           <button type="button" class="close-btn" {{on "click" this.close}}>
             <Icon @name="x" @size={{20}} @color="#333" />
           </button>

app/templates/lists/list.gjs

@@ -16,9 +16,19 @@ export default class ListsListTemplate extends Component {
     return this.mapUi.getScrollPosition(`list-${this.listId}`);
   }
 
+  get listColor() {
+    const list = this.storage.lists.find((l) => l.id === this.listId);
+    if (list && list.color) {
+      return list.color;
+    }
+    return getComputedStyle(document.documentElement)
+      .getPropertyValue('--default-list-color')
+      .trim();
+  }
+
   get listTitle() {
     const list = this.storage.lists.find((l) => l.id === this.listId);
-    return list ? list.title : 'Saved places';
+    return list ? list.title : 'Collections';
   }
 
   get places() {
@@ -88,6 +98,7 @@ export default class ListsListTemplate extends Component {
       <PlacesSidebar
         @places={{this.places}}
         @title={{this.listTitle}}
+        @color={{this.listColor}}
         @scrollTop={{this.scrollTop}}
         @onSelect={{this.selectPlace}}
         @onClose={{this.close}}