diff --git a/demo/e2e/screenshot.spec.ts-snapshots/item-list-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/item-list-dark.png
index d87875b..67b9555 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/item-list-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/item-list-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/item-list.png b/demo/e2e/screenshot.spec.ts-snapshots/item-list.png
index 5ff6701..47fb8b8 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/item-list.png and b/demo/e2e/screenshot.spec.ts-snapshots/item-list.png differ
diff --git a/demo/src/app/index/pages/item-list/item-list.page.html b/demo/src/app/index/pages/item-list/item-list.page.html
index e3921ec..2c6e6e6 100644
--- a/demo/src/app/index/pages/item-list/item-list.page.html
+++ b/demo/src/app/index/pages/item-list/item-list.page.html
@@ -34,6 +34,8 @@ <h2>item-list</h2>
       </ion-item>
     </ion-item-group>
     <ion-note>Note additional information.</ion-note>
+    <ion-note color="primary">Primary note additional information.</ion-note>
+    <ion-note color="danger">Danger note additional information.</ion-note>
   </ion-list>
 
   <ion-list [inset]="true">
diff --git a/src/styles/utils/structured-list.scss b/src/styles/utils/structured-list.scss
index a4ce3e6..32da319 100644
--- a/src/styles/utils/structured-list.scss
+++ b/src/styles/utils/structured-list.scss
@@ -156,7 +156,7 @@ $groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group
   }
 
   & > ion-note {
-    color: var(--ion-color-medium-tint);
+    --color: var(--ion-color-medium-tint);
     font-size: 0.9rem;
     display: block;
     margin: 8px calc(var(--ion-safe-area-right, 0) + $outer-note-inset) 8px calc(var(--ion-safe-area-left, 0) + $outer-note-inset);