diff --git a/templates/components/storage_usage.html b/templates/components/storage_usage.html
index 2f4123a..a90899a 100644
--- a/templates/components/storage_usage.html
+++ b/templates/components/storage_usage.html
@@ -16,7 +16,7 @@
         {% for type in storage_by_type %}
         <div class="d-flex justify-content-between align-items-center mb-2">
           <div class="d-flex align-items-center">
-            <div class="color-indicator me-2" style="width: 12px; height: 12px; border-radius: 50%; background-color: var(--chart-{% if loop.index0 == 0 %}primary{% elif loop.index0 == 1 %}primary-light{% elif loop.index0 == 2 %}primary-lighter{% elif loop.index0 == 3 %}primary-lightest{% elif loop.index0 == 4 %}primary-pale{% elif loop.index0 == 5 %}secondary{% elif loop.index0 == 6 %}secondary-light{% elif loop.index0 == 7 %}secondary-lighter{% elif loop.index0 == 8 %}secondary-lightest{% else %}secondary-pale{% endif %});"></div>
+            <div class="color-indicator me-2" style="width: 12px; height: 12px; border-radius: 50%; background-color: var(--chart-color-{{ loop.index }})"></div>
             <span class="text-muted">{{ type.extension|upper }}:</span>
           </div>
           <div class="fw-bold text-primary">{{ format_size(type.total_size) }}</div>
diff --git a/templates/components/trash_type.html b/templates/components/trash_type.html
index 353545c..8b59aa5 100644
--- a/templates/components/trash_type.html
+++ b/templates/components/trash_type.html
@@ -14,7 +14,7 @@
         {% for type in trash_by_type %}
         <div class="d-flex justify-content-between align-items-center mb-2">
           <div class="d-flex align-items-center">
-            <div class="color-indicator me-2" style="width: 12px; height: 12px; border-radius: 50%; background-color: var(--chart-{% if loop.index0 == 0 %}primary{% elif loop.index0 == 1 %}primary-light{% elif loop.index0 == 2 %}primary-lighter{% elif loop.index0 == 3 %}primary-lightest{% elif loop.index0 == 4 %}primary-pale{% elif loop.index0 == 5 %}secondary{% elif loop.index0 == 6 %}secondary-light{% elif loop.index0 == 7 %}secondary-lighter{% elif loop.index0 == 8 %}secondary-lightest{% else %}secondary-pale{% endif %});"></div>
+            <div class="color-indicator me-2" style="width: 12px; height: 12px; border-radius: 50%; background-color: var(--chart-color-{{ loop.index }})"></div>
             <span class="text-muted">{{ type.extension|upper }}:</span>
           </div>
           <div class="fw-bold text-primary">{{ type.count }}</div>