Task/replace text-muted with text-body-secondary (#8173)

Replace text-muted with text-body-secondary

apps/client/src/app/components/admin-market-data/admin-market-data.html

@@ -95,7 +95,9 @@
               <div class="text-truncate">{{ element.name }}</div>
               @if (!isUUID(element.symbol)) {
                 <div>
-                  <small class="text-muted">{{ element.symbol }}</small>
+                  <small class="text-body-secondary">{{
+                    element.symbol
+                  }}</small>
                 </div>
               }
             </td>
@@ -116,7 +118,9 @@
               </div>
               @if (element.dataProviderInfo?.name) {
                 <div>
-                  <small class="text-muted">{{ element.dataSource }}</small>
+                  <small class="text-body-secondary">{{
+                    element.dataSource
+                  }}</small>
                 </div>
               }
             </td>
@@ -134,7 +138,9 @@
               <div>{{ translate(element.assetClass) }}</div>
               @if (element.assetClass) {
                 <div>
-                  <small class="text-muted">{{ element.assetClass }}</small>
+                  <small class="text-body-secondary">{{
+                    element.assetClass
+                  }}</small>
                 </div>
               }
             </td>
@@ -152,7 +158,9 @@
               <div>{{ translate(element.assetSubClass) }}</div>
               @if (element.assetSubClass) {
                 <div>
-                  <small class="text-muted">{{ element.assetSubClass }}</small>
+                  <small class="text-body-secondary">{{
+                    element.assetSubClass
+                  }}</small>
                 </div>
               }
             </td>

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html

@@ -164,7 +164,7 @@
                   </button>
                 </form>
                 @if (data.dataSource !== DataSource.MANUAL) {
-                  <p class="my-1 px-1 text-muted" i18n>or</p>
+                  <p class="my-1 px-1 text-body-secondary" i18n>or</p>
                   <button
                     color="accent"
                     mat-flat-button
@@ -573,7 +573,7 @@
                       [for]="dateOfSplit"
                     >
                       <ion-icon
-                        class="text-muted"
+                        class="text-body-secondary"
                         matDatepickerToggleIcon
                         name="calendar-clear-outline"
                       />

apps/client/src/app/components/admin-settings/admin-settings.component.html

@@ -30,7 +30,7 @@
             >
               <ng-container i18n>Get Access</ng-container>
             </a>
-            <div class="mx-3 text-muted">
+            <div class="mx-3 text-body-secondary">
               <small i18n>or</small>
             </div>
             <a
@@ -91,7 +91,7 @@
                 </a>
                 @if (isGhostfolioApiKeyValid === true) {
                   <div class="line-height-1">
-                    <small class="text-muted">
+                    <small class="text-body-secondary">
                       <ng-container i18n>Valid until</ng-container>
                       {{
                         ghostfolioApiStatus?.subscription?.expiresAt
@@ -165,7 +165,7 @@
                         100
                     "
                   />
-                  <small class="text-muted">
+                  <small class="text-body-secondary">
                     {{ ghostfolioApiStatus.dailyRequests }}
                     <ng-container i18n>of</ng-container>
                     {{ ghostfolioApiStatus.dailyRequestsMax }}

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html

@@ -31,7 +31,10 @@
         @if (hasPermissionToAccessAdminControl) {
           <mat-option [routerLink]="routerLinkAdminControlMarketData">
             <div class="align-items-center d-flex">
-              <ion-icon class="me-2 text-muted" name="arrow-forward-outline" />
+              <ion-icon
+                class="me-2 text-body-secondary"
+                name="arrow-forward-outline"
+              />
               <span i18n>Manage Benchmarks</span>
             </div>
           </mat-option>

apps/client/src/app/components/footer/footer.component.html

@@ -181,7 +181,7 @@
       <a href="https://ghostfol.io">Ghostfolio</a>
     </div>
   </div>
-  <div class="row text-center text-muted">
+  <div class="row text-body-secondary text-center">
     <div class="col">
       <small class="d-block" i18n
         >The risk of loss in trading can be substantial. It is not advisable to

apps/client/src/app/components/home-overview/home-overview.html

@@ -13,7 +13,7 @@
         <ol class="fw-bold">
           <li
             class="mb-2"
-            [class.text-muted]="(user()?.accounts?.length ?? 0) > 1"
+            [class.text-body-secondary]="(user()?.accounts?.length ?? 0) > 1"
           >
             <a class="d-block" [routerLink]="routerLinkAccounts"
               ><span i18n>Setup your accounts</span><br />

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html

@@ -30,7 +30,7 @@
       @if (
         data.hasPermissionToUseAuthGoogle && data.hasPermissionToUseAuthToken
       ) {
-        <div class="my-3 text-center text-muted" i18n>or</div>
+        <div class="my-3 text-body-secondary text-center" i18n>or</div>
       }
 
       @if (data.hasPermissionToUseAuthGoogle) {

apps/client/src/app/components/markets/markets.html

@@ -20,7 +20,7 @@
               />
             </div>
           }
-          <div class="mb-2 text-center text-muted">
+          <div class="mb-2 text-body-secondary text-center">
             <small i18n>Last {{ numberOfDays }} Days</small>
           </div>
           <gf-line-chart
@@ -58,7 +58,7 @@
       />
       @if (benchmarks()?.length) {
         <div
-          class="gf-text-wrap-balance line-height-1 mt-3 text-center text-muted"
+          class="gf-text-wrap-balance line-height-1 mt-3 text-body-secondary text-center"
         >
           <small i18n>
             Calculations are based on delayed market data and may not be

apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html

@@ -1,6 +1,6 @@
 <div class="container p-0">
   <div class="d-flex flex-wrap">
-    <div class="px-1 status-container text-end text-muted">
+    <div class="px-1 status-container text-body-secondary text-end">
       @if ((errors()?.length ?? 0) > 0 && !isLoading()) {
         <ion-icon
           i18n-title

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html

@@ -98,7 +98,7 @@
       />
     </div>
   </div>
-  <div class="d-flex py-1 text-muted">
+  <div class="d-flex py-1 text-body-secondary">
     <div class="flex-grow-1 indent-1 text-truncate" i18n>thereof Dividend</div>
     <div class="justify-content-end">
       <gf-value
@@ -154,7 +154,7 @@
         PerformanceCalculationType.ROAI
       ) {
         <abbr
-          class="d-none d-sm-inline-block initialism ms-2 text-muted"
+          class="d-none d-sm-inline-block initialism ms-2 text-body-secondary"
           i18n-title
           title="Return on Average Investment (total return with dividends)"
           >(ROAI)</abbr
@@ -173,7 +173,7 @@
       />
     </div>
   </div>
-  <div class="d-flex py-1 text-muted">
+  <div class="d-flex py-1 text-body-secondary">
     <div class="flex-grow-1 indent-2 text-truncate">
       <ng-container i18n>thereof Dividend Performance</ng-container>
     </div>
@@ -217,7 +217,7 @@
           class="align-items-center caret-container d-inline-flex justify-content-center"
         >
           <ion-icon
-            class="caret text-muted"
+            class="caret text-body-secondary"
             name="caret-forward-outline"
             [class.caret-expanded]="isHoldingsExpanded"
           />
@@ -230,7 +230,7 @@
         user?.settings?.isExperimentalFeatures
       ) {
         <gf-value
-          class="d-lg-inline-block d-none ms-2 small text-muted"
+          class="d-lg-inline-block d-none ms-2 small text-body-secondary"
           [isLoading]="isLoading"
           [isPercent]="true"
           [locale]="locale"
@@ -295,7 +295,7 @@
           class="align-items-center caret-container d-inline-flex justify-content-center"
         >
           <ion-icon
-            class="caret text-muted"
+            class="caret text-body-secondary"
             name="caret-forward-outline"
             [class.caret-expanded]="isCashExpanded"
           />
@@ -308,7 +308,7 @@
         user?.settings?.isExperimentalFeatures
       ) {
         <gf-value
-          class="d-lg-inline-block d-none ms-2 small text-muted"
+          class="d-lg-inline-block d-none ms-2 small text-body-secondary"
           [isLoading]="isLoading"
           [isPercent]="true"
           [locale]="locale"
@@ -371,7 +371,7 @@
         user?.settings?.isExperimentalFeatures
       ) {
         <gf-value
-          class="d-lg-inline-block d-none ms-2 small text-muted"
+          class="d-lg-inline-block d-none ms-2 small text-body-secondary"
           [isLoading]="isLoading"
           [isPercent]="true"
           [locale]="locale"
@@ -456,7 +456,7 @@
         user?.settings?.isExperimentalFeatures
       ) {
         <gf-value
-          class="d-lg-inline-block d-none ms-2 small text-muted"
+          class="d-lg-inline-block d-none ms-2 small text-body-secondary"
           [isLoading]="isLoading"
           [isPercent]="true"
           [locale]="locale"
@@ -486,7 +486,7 @@
         user?.subscription?.type !== 'Basic'
       ) {
         <ion-icon
-          class="me-1 text-muted"
+          class="me-1 text-body-secondary"
           name="ellipsis-horizontal-circle-outline"
         />
       }

apps/client/src/app/components/rule/rule.component.html

@@ -24,7 +24,7 @@
         } @else if (rule?.isActive === true) {
           <ion-icon name="warning-outline" />
         } @else {
-          <ion-icon class="text-muted" name="remove-circle-outline" />
+          <ion-icon class="text-body-secondary" name="remove-circle-outline" />
         }
       </div>
     }

apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.html

@@ -60,7 +60,7 @@
         />
         <mat-datepicker-toggle class="me-2" matSuffix [for]="expiresAt">
           <ion-icon
-            class="text-muted"
+            class="text-body-secondary"
             matDatepickerToggleIcon
             name="calendar-clear-outline"
           />

apps/client/src/app/components/user-account-membership/user-account-membership.html

@@ -26,7 +26,7 @@
               @if (price) {
                 <div class="mt-1 text-center">
                   @if (coupon) {
-                    <del class="text-muted"
+                    <del class="text-body-secondary"
                       >{{ baseCurrency }}&nbsp;{{ price }}</del
                     >&nbsp;{{ baseCurrency }}&nbsp;{{ price - coupon }}
                   } @else {
@@ -75,7 +75,7 @@
             </div>
           </div>
         } @else {
-          <div class="mt-3 text-muted">
+          <div class="mt-3 text-body-secondary">
             <small i18n>No auto-renewal on membership.</small>
           </div>
         }

apps/client/src/app/components/user-account-settings/user-account-settings.html

@@ -23,7 +23,7 @@
                   [currencies]="currencies"
                 />
                 @if (hasImpersonationId) {
-                  <mat-hint class="mt-1 text-muted text-truncate" i18n
+                  <mat-hint class="mt-1 text-body-secondary text-truncate" i18n
                     >Derived from the portfolio you are viewing</mat-hint
                   >
                 }
@@ -60,7 +60,7 @@
             <div class="pe-1 w-50">
               <div i18n>Language</div>
               @if (isCommunityLanguage()) {
-                <div class="hint-text text-muted" i18n>
+                <div class="hint-text text-body-secondary" i18n>
                   If a translation is missing, kindly support us in extending it
                   <a
                     href="https://github.com/ghostfolio/ghostfolio/blob/main/apps/client/src/locales/messages.{{
@@ -154,7 +154,7 @@
           <div class="align-items-center d-flex mb-4">
             <div class="pe-1 w-50">
               <div i18n>Locale</div>
-              <div class="hint-text text-muted">
+              <div class="hint-text text-body-secondary">
                 <ng-container i18n>Date and number format</ng-container>
               </div>
             </div>
@@ -176,7 +176,7 @@
                     <mat-option [value]="locale">{{ locale }}</mat-option>
                   }
                 </mat-select>
-                <mat-hint class="d-flex mt-2 text-muted text-truncate">
+                <mat-hint class="d-flex mt-2 text-body-secondary text-truncate">
                   <gf-value
                     [deviceType]="deviceType()"
                     [isDate]="true"
@@ -224,7 +224,7 @@
       <div class="align-items-center d-flex mt-4 py-1">
         <div class="pe-1 w-50">
           <div i18n>Presenter View</div>
-          <div class="hint-text text-muted" i18n>
+          <div class="hint-text text-body-secondary" i18n>
             Protection for sensitive information like absolute performances and
             quantity values
           </div>
@@ -242,7 +242,7 @@
       <div class="d-flex mt-4 py-1">
         <div class="pe-1 w-50">
           <div i18n>Zen Mode</div>
-          <div class="hint-text text-muted" i18n>
+          <div class="hint-text text-body-secondary" i18n>
             Distraction-free experience for turbulent times
           </div>
         </div>
@@ -259,7 +259,9 @@
       <div class="align-items-center d-flex mt-4 py-1">
         <div class="pe-1 w-50">
           <div i18n>Biometric Authentication</div>
-          <div class="hint-text text-muted" i18n>Sign in with fingerprint</div>
+          <div class="hint-text text-body-secondary" i18n>
+            Sign in with fingerprint
+          </div>
         </div>
         <div class="ps-1 w-50">
           <mat-slide-toggle
@@ -276,7 +278,7 @@
       <div class="align-items-center d-flex mt-4 py-1">
         <div class="pe-1 w-50">
           <div i18n>Experimental Features</div>
-          <div class="hint-text text-muted" i18n>
+          <div class="hint-text text-body-secondary" i18n>
             Sneak peek at upcoming functionality
           </div>
         </div>
@@ -294,7 +296,7 @@
         <div class="align-items-center d-flex mt-4 py-1">
           <div class="pe-1 w-50">
             <div>Ghostfolio AI</div>
-            <div class="hint-text text-muted" i18n>
+            <div class="hint-text text-body-secondary" i18n>
               Powered by third-party AI providers
             </div>
           </div>
@@ -401,7 +403,7 @@
               <button color="warn" i18n mat-flat-button [disabled]="true">
                 Close Account
               </button>
-              <div class="hint-text mt-2 text-muted" i18n>
+              <div class="hint-text mt-2 text-body-secondary" i18n>
                 For security reasons, please delete all activities and accounts
                 first before your Ghostfolio account can be closed.
               </div>

apps/client/src/app/pages/about/oss-friends/oss-friends-page.html

@@ -5,7 +5,7 @@
         <span class="d-none d-sm-block"
           ><ng-container i18n>Our</ng-container> OSS Friends</span
         >
-        <small class="text-muted" i18n
+        <small class="text-body-secondary" i18n
           >Discover other exciting Open Source Software projects</small
         >
       </h1>

apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.html

@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Hallo Ghostfolio 👋</h1>
-          <div class="text-muted"><small>2021-07-31</small></div>
+          <div class="text-body-secondary"><small>2021-07-31</small></div>
         </div>
         <section class="mb-4">
           <p>

apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.html

@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Hello Ghostfolio 👋</h1>
-          <div class="text-muted"><small>2021-07-31</small></div>
+          <div class="text-body-secondary"><small>2021-07-31</small></div>
         </div>
         <section class="mb-4">
           <p>

apps/client/src/app/pages/blog/2022/01/first-months-in-open-source/first-months-in-open-source-page.html

@@ -7,7 +7,7 @@
             👻 Ghostfolio –
             <span class="text-nowrap">First months in Open Source</span>
           </h1>
-          <div class="text-muted"><small>2022-01-05</small></div>
+          <div class="text-body-secondary"><small>2022-01-05</small></div>
         </div>
         <section class="mb-4">
           <p>

apps/client/src/app/pages/blog/2022/07/ghostfolio-meets-internet-identity/ghostfolio-meets-internet-identity-page.html

@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Ghostfolio meets Internet Identity</h1>
-          <div class="mb-3 text-muted"><small>2022-07-23</small></div>
+          <div class="mb-3 text-body-secondary"><small>2022-07-23</small></div>
           <img
             alt="Ghostfolio meets Internet Identity Teaser"
             class="border rounded w-100"

apps/client/src/app/pages/blog/2022/07/how-do-i-get-my-finances-in-order/how-do-i-get-my-finances-in-order-page.html

@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">How do I get my finances in order?</h1>
-          <div class="text-muted"><small>2022-07-14</small></div>
+          <div class="text-body-secondary"><small>2022-07-14</small></div>
         </div>
         <section class="mb-4">
           <p>

apps/client/src/app/pages/blog/2022/08/500-stars-on-github/500-stars-on-github-page.html

@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">500 Stars</h1>
-          <div class="mb-3 text-muted"><small>2022-08-18</small></div>
+          <div class="mb-3 text-body-secondary"><small>2022-08-18</small></div>
           <img
             alt="500 Stars on GitHub Teaser"
             class="rounded w-100"

apps/client/src/app/pages/blog/2022/10/hacktoberfest-2022/hacktoberfest-2022-page.html

@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Hacktoberfest 2022</h1>
-          <div class="mb-3 text-muted"><small>2022-10-01</small></div>
+          <div class="mb-3 text-body-secondary"><small>2022-10-01</small></div>
           <img
             alt="Hacktoberfest 2022 with Ghostfolio Teaser"
             class="rounded w-100"

apps/client/src/app/pages/blog/2022/11/black-friday-2022/black-friday-2022-page.html

@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Black Friday 2022</h1>
-          <div class="mb-3 text-muted"><small>2022-11-13</small></div>
+          <div class="mb-3 text-body-secondary"><small>2022-11-13</small></div>
           <img
             alt="Black Friday 2022 Teaser"
             class="rounded w-100"

apps/client/src/app/pages/blog/2022/12/the-importance-of-tracking-your-personal-finances/the-importance-of-tracking-your-personal-finances-page.html

@@ -6,7 +6,7 @@
           <h1 class="mb-1">
             The importance of tracking your personal finances
           </h1>
-          <div class="mb-3 text-muted"><small>2022-12-26</small></div>
+          <div class="mb-3 text-body-secondary"><small>2022-12-26</small></div>
           <img
             alt="The importance of tracking your personal finances Teaser"
             class="rounded w-100"

apps/client/src/app/pages/blog/2023/01/ghostfolio-auf-sackgeld-vorgestellt/ghostfolio-auf-sackgeld-vorgestellt-page.html

@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Ghostfolio auf Sackgeld.com vorgestellt</h1>
-          <div class="mb-3 text-muted"><small>2023-01-21</small></div>
+          <div class="mb-3 text-body-secondary"><small>2023-01-21</small></div>
           <img
             alt="Ghostfolio auf Sackgeld.com vorgestellt Teaser"
             class="border rounded w-100"

apps/client/src/app/pages/blog/2023/02/ghostfolio-meets-umbrel/ghostfolio-meets-umbrel-page.html

@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Ghostfolio meets Umbrel</h1>
-          <div class="mb-3 text-muted"><small>2023-02-25</small></div>
+          <div class="mb-3 text-body-secondary"><small>2023-02-25</small></div>
           <img
             alt="Ghostfolio meets Umbrel Teaser"
             class="border rounded w-100"

apps/client/src/app/pages/blog/2023/03/1000-stars-on-github/1000-stars-on-github-page.html

@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Ghostfolio reaches 1’000 Stars on GitHub</h1>
-          <div class="mb-3 text-muted"><small>2023-03-25</small></div>
+          <div class="mb-3 text-body-secondary"><small>2023-03-25</small></div>
           <img
             alt="1000 Stars on GitHub Teaser"
             class="rounded w-100"

apps/client/src/app/pages/blog/2023/05/unlock-your-financial-potential-with-ghostfolio/unlock-your-financial-potential-with-ghostfolio-page.html

@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Unlock your Financial Potential with Ghostfolio</h1>
-          <div class="mb-3 text-muted"><small>2023-05-20</small></div>
+          <div class="mb-3 text-body-secondary"><small>2023-05-20</small></div>
           <img
             alt="Unlock your financial potential with Ghostfolio Teaser"
             class="border rounded w-100"

apps/client/src/app/pages/blog/2023/07/exploring-the-path-to-fire/exploring-the-path-to-fire-page.html

@@ -7,7 +7,7 @@
             Exploring the Path to Financial Independence and Retiring Early
             (FIRE)
           </h1>
-          <div class="mb-3 text-muted"><small>2023-07-01</small></div>
+          <div class="mb-3 text-body-secondary"><small>2023-07-01</small></div>
           <img
             alt="Exploring the Path to Financial Independence and Retiring Early (FIRE) Teaser"
             class="rounded w-100"

apps/client/src/app/pages/blog/2023/08/ghostfolio-joins-oss-friends/ghostfolio-joins-oss-friends-page.html

@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Ghostfolio joins OSS Friends</h1>
-          <div class="mb-3 text-muted"><small>2023-08-23</small></div>
+          <div class="mb-3 text-body-secondary"><small>2023-08-23</small></div>
           <img
             alt="Ghostfolio joins OSS Friends Teaser"
             class="rounded w-100"

apps/client/src/app/pages/blog/2023/09/ghostfolio-2/ghostfolio-2-page.html

@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Ghostfolio 2.0</h1>
-          <div class="mb-3 text-muted"><small>2023-09-09</small></div>
+          <div class="mb-3 text-body-secondary"><small>2023-09-09</small></div>
           <img
             alt="Ghostfolio 2.0 Teaser"
             class="border rounded w-100"

apps/client/src/app/pages/blog/2023/09/hacktoberfest-2023/hacktoberfest-2023-page.html

@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Hacktoberfest 2023</h1>
-          <div class="mb-3 text-muted"><small>2023-09-26</small></div>
+          <div class="mb-3 text-body-secondary"><small>2023-09-26</small></div>
           <img
             alt="Hacktoberfest 2023 with Ghostfolio Teaser"
             class="rounded w-100"

apps/client/src/app/pages/blog/2023/11/black-week-2023/black-week-2023-page.html

@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Black Week 2023</h1>
-          <div class="mb-3 text-muted"><small>2023-11-19</small></div>
+          <div class="mb-3 text-body-secondary"><small>2023-11-19</small></div>
           <img
             alt="Black Week 2023 Teaser"
             class="rounded w-100"

apps/client/src/app/pages/blog/2023/11/hacktoberfest-2023-debriefing/hacktoberfest-2023-debriefing-page.html

@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Hacktoberfest 2023 Debriefing</h1>
-          <div class="mb-3 text-muted"><small>2023-11-05</small></div>
+          <div class="mb-3 text-body-secondary"><small>2023-11-05</small></div>
           <img
             alt="Hacktoberfest 2023 with Ghostfolio Teaser"
             class="rounded w-100"

apps/client/src/app/pages/blog/2024/09/hacktoberfest-2024/hacktoberfest-2024-page.html

@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Hacktoberfest 2024</h1>
-          <div class="mb-3 text-muted"><small>2024-09-24</small></div>
+          <div class="mb-3 text-body-secondary"><small>2024-09-24</small></div>
           <img
             alt="Hacktoberfest 2024 with Ghostfolio Teaser"
             class="rounded w-100"

apps/client/src/app/pages/blog/2024/11/black-weeks-2024/black-weeks-2024-page.html

@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Black Weeks 2024</h1>
-          <div class="mb-3 text-muted"><small>2024-11-16</small></div>
+          <div class="mb-3 text-body-secondary"><small>2024-11-16</small></div>
           <img
             alt="Black Week 2024 Teaser"
             class="rounded w-100"

apps/client/src/app/pages/blog/2025/09/hacktoberfest-2025/hacktoberfest-2025-page.html

@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Hacktoberfest 2025</h1>
-          <div class="mb-3 text-muted"><small>2025-09-27</small></div>
+          <div class="mb-3 text-body-secondary"><small>2025-09-27</small></div>
           <img
             alt="Hacktoberfest 2025 with Ghostfolio Teaser"
             class="rounded w-100"

apps/client/src/app/pages/blog/2025/11/black-weeks-2025/black-weeks-2025-page.html

@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Black Weeks 2025</h1>
-          <div class="mb-3 text-muted"><small>2025-11-16</small></div>
+          <div class="mb-3 text-body-secondary"><small>2025-11-16</small></div>
           <img
             alt="Black Week 2025 Teaser"
             class="rounded w-100"

apps/client/src/app/pages/blog/2026/04/ghostfolio-3/ghostfolio-3-page.html

@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Ghostfolio 3.0</h1>
-          <div class="mb-3 text-muted"><small>2026-04-23</small></div>
+          <div class="mb-3 text-body-secondary"><small>2026-04-23</small></div>
           <img
             alt="Ghostfolio 3.0 Teaser"
             class="border rounded w-100"

apps/client/src/app/pages/blog/blog-page.html

@@ -3,7 +3,7 @@
     <div class="col">
       <h1 class="h3 line-height-1 mb-4 text-center">
         <span class="d-none d-sm-block" i18n>Blog</span>
-        <small class="text-muted" i18n
+        <small class="text-body-secondary" i18n
           >Discover the latest Ghostfolio updates and insights on personal
           finance</small
         >
@@ -20,11 +20,11 @@
                   <div class="h6 m-0 text-truncate">
                     Announcing Ghostfolio 3.0
                   </div>
-                  <div class="d-flex text-muted">2026-04-03</div>
+                  <div class="d-flex text-body-secondary">2026-04-03</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -45,11 +45,11 @@
                 >
                   <div class="flex-grow-1 overflow-hidden">
                     <div class="h6 m-0 text-truncate">Black Weeks 2025</div>
-                    <div class="d-flex text-muted">2025-11-15</div>
+                    <div class="d-flex text-body-secondary">2025-11-15</div>
                   </div>
                   <div class="align-items-center d-flex">
                     <ion-icon
-                      class="chevron text-muted"
+                      class="chevron text-body-secondary"
                       name="chevron-forward-outline"
                       size="small"
                     />
@@ -70,11 +70,11 @@
               >
                 <div class="flex-grow-1 overflow-hidden">
                   <div class="h6 m-0 text-truncate">Hacktoberfest 2025</div>
-                  <div class="d-flex text-muted">2025-09-27</div>
+                  <div class="d-flex text-body-secondary">2025-09-27</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -95,11 +95,11 @@
                 >
                   <div class="flex-grow-1 overflow-hidden">
                     <div class="h6 m-0 text-truncate">Black Weeks 2024</div>
-                    <div class="d-flex text-muted">2024-11-16</div>
+                    <div class="d-flex text-body-secondary">2024-11-16</div>
                   </div>
                   <div class="align-items-center d-flex">
                     <ion-icon
-                      class="chevron text-muted"
+                      class="chevron text-body-secondary"
                       name="chevron-forward-outline"
                       size="small"
                     />
@@ -120,11 +120,11 @@
               >
                 <div class="flex-grow-1 overflow-hidden">
                   <div class="h6 m-0 text-truncate">Hacktoberfest 2024</div>
-                  <div class="d-flex text-muted">2024-09-24</div>
+                  <div class="d-flex text-body-secondary">2024-09-24</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -145,11 +145,11 @@
                 >
                   <div class="flex-grow-1 overflow-hidden">
                     <div class="h6 m-0 text-truncate">Black Week 2023</div>
-                    <div class="d-flex text-muted">2023-11-19</div>
+                    <div class="d-flex text-body-secondary">2023-11-19</div>
                   </div>
                   <div class="align-items-center d-flex">
                     <ion-icon
-                      class="chevron text-muted"
+                      class="chevron text-body-secondary"
                       name="chevron-forward-outline"
                       size="small"
                     />
@@ -172,11 +172,11 @@
                   <div class="h6 m-0 text-truncate">
                     Hacktoberfest 2023 Debriefing
                   </div>
-                  <div class="d-flex text-muted">2023-11-05</div>
+                  <div class="d-flex text-body-secondary">2023-11-05</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -196,11 +196,11 @@
               >
                 <div class="flex-grow-1 overflow-hidden">
                   <div class="h6 m-0 text-truncate">Hacktoberfest 2023</div>
-                  <div class="d-flex text-muted">2023-09-26</div>
+                  <div class="d-flex text-body-secondary">2023-09-26</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -222,11 +222,11 @@
                   <div class="h6 m-0 text-truncate">
                     Announcing Ghostfolio 2.0
                   </div>
-                  <div class="d-flex text-muted">2023-09-09</div>
+                  <div class="d-flex text-body-secondary">2023-09-09</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -248,11 +248,11 @@
                   <div class="h6 m-0 text-truncate">
                     Ghostfolio joins OSS Friends
                   </div>
-                  <div class="d-flex text-muted">2023-08-23</div>
+                  <div class="d-flex text-body-secondary">2023-08-23</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -275,11 +275,11 @@
                     Exploring the Path to Financial Independence and Retiring
                     Early (FIRE)
                   </div>
-                  <div class="d-flex text-muted">2023-07-01</div>
+                  <div class="d-flex text-body-secondary">2023-07-01</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -301,11 +301,11 @@
                   <div class="h6 m-0 text-truncate">
                     Unlock your Financial Potential with Ghostfolio
                   </div>
-                  <div class="d-flex text-muted">2023-05-20</div>
+                  <div class="d-flex text-body-secondary">2023-05-20</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -327,11 +327,11 @@
                   <div class="h6 m-0 text-truncate">
                     Ghostfolio reaches 1’000 Stars on GitHub
                   </div>
-                  <div class="d-flex text-muted">2023-03-25</div>
+                  <div class="d-flex text-body-secondary">2023-03-25</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -353,11 +353,11 @@
                   <div class="h6 m-0 text-truncate">
                     Ghostfolio meets Umbrel
                   </div>
-                  <div class="d-flex text-muted">2023-02-25</div>
+                  <div class="d-flex text-body-secondary">2023-02-25</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -379,11 +379,11 @@
                   <div class="h6 m-0 text-truncate">
                     Ghostfolio auf Sackgeld.com vorgestellt
                   </div>
-                  <div class="d-flex text-muted">2023-01-21</div>
+                  <div class="d-flex text-body-secondary">2023-01-21</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -405,11 +405,11 @@
                   <div class="h6 m-0 text-truncate">
                     The importance of tracking your personal finances
                   </div>
-                  <div class="d-flex text-muted">2022-12-26</div>
+                  <div class="d-flex text-body-secondary">2022-12-26</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -430,11 +430,11 @@
                 >
                   <div class="flex-grow-1 overflow-hidden">
                     <div class="h6 m-0 text-truncate">Black Friday 2022</div>
-                    <div class="d-flex text-muted">2022-11-13</div>
+                    <div class="d-flex text-body-secondary">2022-11-13</div>
                   </div>
                   <div class="align-items-center d-flex">
                     <ion-icon
-                      class="chevron text-muted"
+                      class="chevron text-body-secondary"
                       name="chevron-forward-outline"
                       size="small"
                     />
@@ -455,11 +455,11 @@
               >
                 <div class="flex-grow-1 overflow-hidden">
                   <div class="h6 m-0 text-truncate">Hacktoberfest 2022</div>
-                  <div class="d-flex text-muted">2022-10-01</div>
+                  <div class="d-flex text-body-secondary">2022-10-01</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -479,11 +479,11 @@
               >
                 <div class="flex-grow-1 overflow-hidden">
                   <div class="h6 m-0 text-truncate">500 Stars on GitHub</div>
-                  <div class="d-flex text-muted">2022-08-18</div>
+                  <div class="d-flex text-body-secondary">2022-08-18</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -505,11 +505,11 @@
                   <div class="h6 m-0 text-truncate">
                     Ghostfolio meets Internet Identity
                   </div>
-                  <div class="d-flex text-muted">2022-07-23</div>
+                  <div class="d-flex text-body-secondary">2022-07-23</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -531,11 +531,11 @@
                   <div class="h6 m-0 text-truncate">
                     How do I get my finances in order?
                   </div>
-                  <div class="d-flex text-muted">2022-07-14</div>
+                  <div class="d-flex text-body-secondary">2022-07-14</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -557,11 +557,11 @@
                   <div class="h6 m-0 text-truncate">
                     First months in Open Source
                   </div>
-                  <div class="d-flex text-muted">2022-01-05</div>
+                  <div class="d-flex text-body-secondary">2022-01-05</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -581,11 +581,11 @@
               >
                 <div class="flex-grow-1 overflow-hidden">
                   <div class="h6 m-0 text-truncate">Hello Ghostfolio</div>
-                  <div class="d-flex text-muted">2021-07-31</div>
+                  <div class="d-flex text-body-secondary">2021-07-31</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -605,11 +605,11 @@
               >
                 <div class="flex-grow-1 overflow-hidden">
                   <div class="h6 m-0 text-truncate">Hallo Ghostfolio</div>
-                  <div class="d-flex text-muted">2021-07-31</div>
+                  <div class="d-flex text-body-secondary">2021-07-31</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />

apps/client/src/app/pages/features/features-page.html

@@ -3,7 +3,7 @@
     <div class="col">
       <h1 class="h3 line-height-1 mb-4 text-center">
         <span class="d-none d-sm-block" i18n>Features</span>
-        <small class="text-muted" i18n>
+        <small class="text-body-secondary" i18n>
           Check out the numerous features of Ghostfolio to manage your wealth
         </small>
       </h1>

apps/client/src/app/pages/landing/landing-page.html

@@ -44,7 +44,7 @@
       }
       @if (hasPermissionForDemo) {
         @if (hasPermissionToCreateUser) {
-          <div class="mx-3 text-muted" i18n>or</div>
+          <div class="mx-3 text-body-secondary" i18n>or</div>
         }
         <a i18n mat-stroked-button [routerLink]="routerLinkDemo">Live Demo</a>
       }
@@ -114,7 +114,7 @@
   }
 
   <div class="row mb-5">
-    <div class="col-12 text-center text-muted">
+    <div class="col-12 text-body-secondary text-center">
       <small i18n>As seen in</small>
     </div>
     <div class="col-12">
@@ -242,7 +242,7 @@
               />
               <div>
                 <div>{{ testimonial.quote }}</div>
-                <div class="mt-2 text-muted">
+                <div class="mt-2 text-body-secondary">
                   —
                   @if (testimonial.url) {
                     <a target="_blank" [href]="testimonial.url">{{
@@ -292,11 +292,11 @@
           <mat-card-content class="d-flex flex-row">
             <div class="flex-grow-1">
               <div class="fw-bold" i18n>Sign up anonymously*</div>
-              <div class="text-muted" i18n>
+              <div class="text-body-secondary" i18n>
                 <small>* no e-mail address nor credit card required</small>
               </div>
             </div>
-            <div class="ps-2 text-end text-muted">1</div>
+            <div class="ps-2 text-body-secondary text-end">1</div>
           </mat-card-content>
         </mat-card>
       </div>
@@ -308,7 +308,7 @@
                 Add any of your historical transactions
               </div>
             </div>
-            <div class="ps-2 text-end text-muted">2</div>
+            <div class="ps-2 text-body-secondary text-end">2</div>
           </mat-card-content>
         </mat-card>
       </div>
@@ -320,7 +320,7 @@
                 Get valuable insights of your portfolio composition
               </div>
             </div>
-            <div class="ps-2 text-end text-muted">3</div>
+            <div class="ps-2 text-body-secondary text-end">3</div>
           </mat-card-content>
         </mat-card>
       </div>
@@ -348,7 +348,7 @@
             >Get Started</a
           >
           @if (hasPermissionForDemo) {
-            <div class="mx-3 text-muted" i18n>or</div>
+            <div class="mx-3 text-body-secondary" i18n>or</div>
             <a i18n mat-stroked-button [routerLink]="routerLinkDemo"
               >Live Demo</a
             >

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html

@@ -21,7 +21,9 @@
             <span
               ><b>{{ typesTranslationMap['BUY'] }}</b></span
             >
-            <small class="d-block line-height-1 text-muted text-nowrap" i18n
+            <small
+              class="d-block line-height-1 text-body-secondary text-nowrap"
+              i18n
               >Stocks, ETFs, bonds, cryptocurrencies, commodities</small
             >
           </mat-option>
@@ -29,7 +31,9 @@
             <span
               ><b>{{ typesTranslationMap['FEE'] }}</b></span
             >
-            <small class="d-block line-height-1 text-muted text-nowrap" i18n
+            <small
+              class="d-block line-height-1 text-body-secondary text-nowrap"
+              i18n
               >One-time fee, annual account fees</small
             >
           </mat-option>
@@ -37,7 +41,9 @@
             <span
               ><b>{{ typesTranslationMap['DIVIDEND'] }}</b></span
             >
-            <small class="d-block line-height-1 text-muted text-nowrap" i18n
+            <small
+              class="d-block line-height-1 text-body-secondary text-nowrap"
+              i18n
               >Distribution of corporate earnings</small
             >
           </mat-option>
@@ -45,7 +51,9 @@
             <span
               ><b>{{ typesTranslationMap['INTEREST'] }}</b></span
             >
-            <small class="d-block line-height-1 text-muted text-nowrap" i18n
+            <small
+              class="d-block line-height-1 text-body-secondary text-nowrap"
+              i18n
               >Revenue for lending out money</small
             >
           </mat-option>
@@ -53,7 +61,9 @@
             <span
               ><b>{{ typesTranslationMap['LIABILITY'] }}</b></span
             >
-            <small class="d-block line-height-1 text-muted text-nowrap" i18n
+            <small
+              class="d-block line-height-1 text-body-secondary text-nowrap"
+              i18n
               >Mortgages, personal loans, credit cards</small
             >
           </mat-option>
@@ -61,7 +71,9 @@
             <span
               ><b>{{ typesTranslationMap['SELL'] }}</b></span
             >
-            <small class="d-block line-height-1 text-muted text-nowrap" i18n
+            <small
+              class="d-block line-height-1 text-body-secondary text-nowrap"
+              i18n
               >Stocks, ETFs, bonds, cryptocurrencies, commodities</small
             >
           </mat-option>
@@ -69,7 +81,9 @@
             <span
               ><b>{{ typesTranslationMap['VALUABLE'] }}</b></span
             >
-            <small class="d-block line-height-1 text-muted text-nowrap" i18n
+            <small
+              class="d-block line-height-1 text-body-secondary text-nowrap"
+              i18n
               >Luxury items, real estate, private companies</small
             >
           </mat-option>
@@ -144,7 +158,7 @@
         />
         <mat-datepicker-toggle class="me-2" matSuffix [for]="date">
           <ion-icon
-            class="text-muted"
+            class="text-body-secondary"
             matDatepickerToggleIcon
             name="calendar-clear-outline"
           />
@@ -222,7 +236,7 @@
             type="button"
             (click)="applyCurrentMarketPrice()"
           >
-            <ion-icon class="text-muted" name="refresh-outline" />
+            <ion-icon class="text-body-secondary" name="refresh-outline" />
           </button>
         }
       </div>

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html

@@ -51,7 +51,7 @@
                       ><b>{{ holding.assetProfile.name }}</b></span
                     >
                     <br />
-                    <small class="text-muted"
+                    <small class="text-body-secondary"
                       >{{ holding.assetProfile.symbol }} ·
                       {{ holding.assetProfile.currency }}</small
                     >
@@ -77,14 +77,14 @@
           <div class="d-flex flex-column justify-content-center">
             @if (isLoading) {
               <div
-                class="align-items-center d-flex drop-area flex-column justify-content-center p-4 text-center text-muted"
+                class="align-items-center d-flex drop-area flex-column justify-content-center p-4 text-body-secondary text-center"
               >
                 <mat-spinner [diameter]="20" />
                 <span i18n>Ghostfolio AI is processing the file...</span>
               </div>
             } @else {
               <button
-                class="drop-area p-4 text-center text-muted"
+                class="drop-area p-4 text-body-secondary text-center"
                 gfFileDrop
                 (click)="onSelectFile(stepper)"
                 (filesDropped)="onFilesDropped({ stepper, files: $event })"
@@ -139,7 +139,7 @@
                 <span
                   class="align-items-center d-flex"
                   matTooltipPosition="above"
-                  [class.text-muted]="isLoading"
+                  [class.text-body-secondary]="isLoading"
                   [matTooltip]="ghostfolioAiTooltip"
                 >
                   <ion-icon name="information-circle-outline" />

apps/client/src/app/pages/portfolio/analysis/analysis-page.html

@@ -259,7 +259,7 @@
                 PerformanceCalculationType.ROAI
               ) {
                 <abbr
-                  class="d-none d-sm-inline-block initialism ms-2 text-muted"
+                  class="d-none d-sm-inline-block initialism ms-2 text-body-secondary"
                   i18n-title
                   title="Return on Average Investment (total return with dividends)"
                   >(ROAI)</abbr
@@ -280,7 +280,7 @@
               />
             </div>
           </div>
-          <div class="d-flex ms-3 py-1 text-muted">
+          <div class="d-flex ms-3 py-1 text-body-secondary">
             <div
               class="align-items-center d-flex flex-grow-1 me-2 text-truncate"
             >
@@ -301,7 +301,7 @@
               />
             </div>
           </div>
-          <div class="d-flex ms-3 py-1 text-muted">
+          <div class="d-flex ms-3 py-1 text-body-secondary">
             <div class="flex-grow-1 me-2 text-truncate">
               <ng-container i18n>thereof Dividend Performance</ng-container>
             </div>

apps/client/src/app/pages/portfolio/fire/fire-page.html

@@ -63,7 +63,7 @@
         />
       </div>
     } @else {
-      <div [class.text-muted]="user?.subscription?.type === 'Basic'">
+      <div [class.text-body-secondary]="user?.subscription?.type === 'Basic'">
         <div class="mb-2">
           <ng-container i18n
             >If you retire today, you would be able to withdraw

apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.html

@@ -49,7 +49,10 @@
               statistics?.rulesActiveCount === 0 ||
               statistics?.rulesFulfilledCount === 0
             ) {
-              <ion-icon class="text-muted" name="remove-circle-outline" />
+              <ion-icon
+                class="text-body-secondary"
+                name="remove-circle-outline"
+              />
             } @else if (
               statistics?.rulesFulfilledCount === statistics?.rulesActiveCount
             ) {

apps/client/src/app/pages/pricing/pricing-page.html

@@ -90,7 +90,7 @@
               @if (user?.subscription?.type === 'Basic') {
                 <div class="d-none d-lg-block invisible mt-3 text-center">
                   <a color="primary" mat-flat-button>&nbsp;</a>
-                  <p class="m-0 text-muted">
+                  <p class="m-0 text-body-secondary">
                     <small>&nbsp;</small>
                   </p>
                 </div>
@@ -156,7 +156,7 @@
               @if (user?.subscription?.type === 'Basic') {
                 <div class="d-none d-lg-block invisible mt-3 text-center">
                   <a color="primary" mat-flat-button>&nbsp;</a>
-                  <p class="m-0 text-muted">
+                  <p class="m-0 text-body-secondary">
                     <small>&nbsp;</small>
                   </p>
                 </div>
@@ -264,7 +264,7 @@
                 <p class="h5 text-end">
                   <span class="fw-normal">
                     @if (coupon) {
-                      <del class="text-muted"
+                      <del class="text-body-secondary"
                         >{{ baseCurrency }}&nbsp;{{ price }}</del
                       >&nbsp;{{ baseCurrency }}&nbsp;<strong>{{
                         price - coupon
@@ -293,7 +293,7 @@
                       <ng-container i18n>Upgrade Plan</ng-container>
                     }
                   </button>
-                  <p class="m-0 text-muted">
+                  <p class="m-0 text-body-secondary">
                     <small i18n>One-time payment, no auto-renewal.</small>
                   </p>
                 </div>
@@ -371,7 +371,7 @@
           [routerLink]="routerLinkRegister"
           >Get Started</a
         >
-        <p class="m-0 text-muted"><small i18n>It’s free.</small></p>
+        <p class="m-0 text-body-secondary"><small i18n>It’s free.</small></p>
       </div>
     </div>
   }

apps/client/src/app/pages/register/register-page.html

@@ -27,7 +27,7 @@
             </button>
           }
           @if (hasPermissionForAuthToken && hasPermissionForAuthGoogle) {
-            <div class="my-3 text-muted" i18n>or</div>
+            <div class="my-3 text-body-secondary" i18n>or</div>
           }
           @if (hasPermissionForAuthGoogle) {
             <a

apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.html

@@ -45,7 +45,7 @@
                   </div>
                   <div class="align-items-center d-flex">
                     <ion-icon
-                      class="chevron text-muted"
+                      class="chevron text-body-secondary"
                       name="chevron-forward-outline"
                       size="small"
                     />

apps/client/src/app/pages/resources/personal-finance-tools/product-page.html

@@ -9,7 +9,9 @@
           </h1>
         </div>
         @if (product2().isArchived) {
-          <div class="info-container my-4 p-2 rounded text-center text-muted">
+          <div
+            class="info-container my-4 p-2 rounded text-body-secondary text-center"
+          >
             <ng-container i18n>This page has been archived.</ng-container>
           </div>
         }

apps/client/src/app/pages/webauthn/webauthn-page.html

@@ -20,7 +20,7 @@
           >
             <ng-container i18n>Try again</ng-container>
           </button>
-          <div class="my-2 text-muted">
+          <div class="my-2 text-body-secondary">
             <ng-container i18n>or</ng-container>
           </div>
           <button mat-stroked-button (click)="deregisterDevice()">

libs/ui/src/lib/account-balances/account-balances.component.html

@@ -24,7 +24,7 @@
           />
           <mat-datepicker-toggle class="me-2" matSuffix [for]="date">
             <ion-icon
-              class="text-muted"
+              class="text-body-secondary"
               matDatepickerToggleIcon
               name="calendar-clear-outline"
             />

libs/ui/src/lib/account-selector/account-selector.component.html

@@ -39,7 +39,7 @@
           <div class="line-height-1">
             <span>{{ account.name }}</span>
             <br />
-            <small class="text-muted">
+            <small class="text-body-secondary">
               @if (account.platform?.name) {
                 {{ account.platform?.name }} ·
               }

libs/ui/src/lib/activities-table/activities-table.component.html

@@ -196,7 +196,9 @@
           !isUUID(element.assetProfile?.symbol)
         ) {
           <div>
-            <small class="text-muted">{{ element.assetProfile?.symbol }}</small>
+            <small class="text-body-secondary">{{
+              element.assetProfile?.symbol
+            }}</small>
           </div>
         }
       </td>

libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.html

@@ -7,7 +7,7 @@
   ><span>{{ item?.name }}</span>
   @if (item && isAsset(item)) {
     <br />
-    <small class="text-muted"
+    <small class="text-body-secondary"
       >{{ item?.symbol }}
       @if (item.currency) {
         · {{ item.currency }}

libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.scss

@@ -8,7 +8,7 @@
       color: rgba(var(--light-primary-text));
       font-weight: bold;
 
-      .text-muted {
+      .text-body-secondary {
         color: rgba(var(--light-primary-text)) !important;
       }
     }
@@ -20,7 +20,7 @@
     a {
       color: rgba(var(--dark-primary-text));
 
-      .text-muted {
+      .text-body-secondary {
         color: rgba(var(--dark-primary-text)) !important;
       }
     }

libs/ui/src/lib/assistant/assistant.html

@@ -49,13 +49,15 @@
           searchResults.holdings?.length === 0 &&
           searchResults.quickLinks?.length === 0
         ) {
-          <div class="px-3 py-1 text-muted" i18n>No results found...</div>
+          <div class="px-3 py-1 text-body-secondary" i18n>
+            No results found...
+          </div>
         } @else {
           @if (
             isLoading.quickLinks || searchResults?.quickLinks?.length !== 0
           ) {
             <div class="mb-2">
-              <div class="fw-bold px-3 text-muted title">
+              <div class="fw-bold px-3 text-body-secondary title">
                 <ng-container i18n>Quick Links</ng-container>
               </div>
               @for (
@@ -81,7 +83,7 @@
           }
           @if (isLoading.accounts || searchResults?.accounts?.length !== 0) {
             <div>
-              <div class="fw-bold px-3 text-muted title">
+              <div class="fw-bold px-3 text-body-secondary title">
                 <ng-container i18n>Accounts</ng-container>
               </div>
               @for (
@@ -107,7 +109,7 @@
           }
           @if (isLoading.holdings || searchResults?.holdings?.length !== 0) {
             <div>
-              <div class="fw-bold px-3 text-muted title">
+              <div class="fw-bold px-3 text-body-secondary title">
                 <ng-container i18n>Holdings</ng-container>
               </div>
               @for (
@@ -137,7 +139,7 @@
               searchResults?.assetProfiles?.length !== 0)
           ) {
             <div class="mt-2">
-              <div class="fw-bold px-3 text-muted title">
+              <div class="fw-bold px-3 text-body-secondary title">
                 <ng-container i18n>Asset Profiles</ng-container>
               </div>
               @for (

libs/ui/src/lib/benchmark/benchmark.component.html

@@ -32,7 +32,7 @@
         </div>
         @if (showSymbol()) {
           <div>
-            <small class="text-muted">{{ element?.symbol }}</small>
+            <small class="text-body-secondary">{{ element?.symbol }}</small>
           </div>
         }
       </td>
@@ -226,7 +226,7 @@
     }"
   />
 } @else if (benchmarks()?.length === 0) {
-  <div class="p-3 text-center text-muted">
+  <div class="p-3 text-body-secondary text-center">
     <small i18n>No data available</small>
   </div>
 }

libs/ui/src/lib/data-provider-credits/data-provider-credits.component.html

@@ -1,4 +1,4 @@
-<small class="text-muted">
+<small class="text-body-secondary">
   <ng-container i18n>Market data provided by</ng-container>{{ ' ' }}
   @for (
     dataProviderInfo of dataProviderInfos;

libs/ui/src/lib/fear-and-greed-index/fear-and-greed-index.component.html

@@ -13,7 +13,7 @@
       <div class="h4 mb-0">
         <span class="me-2">{{ fearAndGreedIndexText() }}</span>
         @let value = fearAndGreedIndex() | number: '1.0-0';
-        <small class="text-muted"
+        <small class="text-body-secondary"
           ><span [class.fw-bold]="value">{{ value ?? placeholder }}</span
           >/100</small
         >

libs/ui/src/lib/fire-calculator/fire-calculator.component.html

@@ -45,7 +45,7 @@
             [for]="date"
           >
             <ion-icon
-              class="text-muted"
+              class="text-body-secondary"
               matDatepickerToggleIcon
               name="calendar-clear-outline"
             />

libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.html

@@ -11,7 +11,7 @@
         <input formControlName="date" matInput [matDatepicker]="date" />
         <mat-datepicker-toggle class="me-2" matSuffix [for]="date">
           <ion-icon
-            class="text-muted"
+            class="text-body-secondary"
             matDatepickerToggleIcon
             name="calendar-clear-outline"
           />
@@ -33,7 +33,7 @@
         type="button"
         (click)="onFetchSymbolForDate()"
       >
-        <ion-icon class="text-muted" name="refresh-outline" />
+        <ion-icon class="text-body-secondary" name="refresh-outline" />
       </button>
     </div>
   </div>

libs/ui/src/lib/holdings-table/holdings-table.component.html

@@ -53,7 +53,9 @@
         </div>
         @if (mode() === 'default') {
           <div>
-            <small class="text-muted">{{ element.assetProfile.symbol }}</small>
+            <small class="text-body-secondary">{{
+              element.assetProfile.symbol
+            }}</small>
           </div>
         }
       </td>

libs/ui/src/lib/membership-card/membership-card.component.html

@@ -16,13 +16,13 @@
       <div class="d-flex justify-content-end">
         <gf-logo
           size="large"
-          [class.text-muted]="name === 'Basic'"
+          [class.text-body-secondary]="name === 'Basic'"
           [showLabel]="false"
         />
       </div>
       @if (hasPermissionToCreateApiKey) {
         <div class="mt-5">
-          <div class="heading text-muted" i18n>API Key</div>
+          <div class="heading text-body-secondary" i18n>API Key</div>
           <div class="align-items-center d-flex">
             <div class="font-monospace value">* * * * * * * * *</div>
             <div class="ms-1">
@@ -41,12 +41,12 @@
       }
       <div class="d-flex justify-content-between">
         <div>
-          <div class="heading text-muted" i18n>Membership</div>
+          <div class="heading text-body-secondary" i18n>Membership</div>
           <div class="text-truncate value">{{ name }}</div>
         </div>
         @if (expiresAt) {
           <div>
-            <div class="heading text-muted" i18n>Valid until</div>
+            <div class="heading text-body-secondary" i18n>Valid until</div>
             <div class="text-truncate value">
               {{ expiresAt }}
             </div>

libs/ui/src/lib/page-tabs/page-tabs.component.html

@@ -21,7 +21,7 @@
             *ngTemplateOutlet="tabContent; context: { $implicit: tab }"
           />
           <ion-icon
-            class="d-none d-sm-block external-link-icon ms-auto text-muted"
+            class="d-none d-sm-block external-link-icon ms-auto text-body-secondary"
             name="open-outline"
           />
         </button>

libs/ui/src/lib/portfolio-filter-form/portfolio-filter-form.component.html

@@ -24,7 +24,7 @@
             <div class="line-height-1 text-truncate">
               <span>{{ holding.assetProfile.name }}</span>
               <br />
-              <small class="text-muted"
+              <small class="text-body-secondary"
                 >{{ holding.assetProfile.symbol }} ·
                 {{ holding.assetProfile.currency }}</small
               >

libs/ui/src/lib/premium-indicator/premium-indicator.component.html

@@ -4,5 +4,5 @@
   title="Upgrade to Ghostfolio Premium"
   [routerLink]="routerLinkPricing"
   [style.pointer-events]="enableLink ? 'initial' : 'none'"
-  ><ion-icon class="text-muted" name="diamond-outline"
+  ><ion-icon class="text-body-secondary" name="diamond-outline"
 /></a>

libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html

@@ -25,7 +25,7 @@
             <gf-premium-indicator class="ms-1" [enableLink]="false" />
           }
         </span>
-        <small class="text-muted"
+        <small class="text-body-secondary"
           >{{ lookupItem.symbol }}
           @if (lookupItem.currency) {
             · {{ lookupItem.currency }}

libs/ui/src/lib/top-holdings/top-holdings.component.html

@@ -79,7 +79,7 @@
                 >
                   <div class="text-truncate">{{ parentHolding?.name }}</div>
                   <div>
-                    <small class="text-muted">{{
+                    <small class="text-body-secondary">{{
                       parentHolding?.symbol
                     }}</small>
                   </div>
@@ -177,7 +177,7 @@
 }
 
 @if (dataSource.data.length === 0 && !isLoading) {
-  <div class="p-3 text-center text-muted">
+  <div class="p-3 text-body-secondary text-center">
     <small i18n>No data available</small>
   </div>
 }

libs/ui/src/lib/trend-indicator/trend-indicator.component.html

@@ -9,9 +9,13 @@
   />
 } @else {
   @if (marketState === 'closed' && dateRange === '1d') {
-    <ion-icon class="text-muted" name="pause-circle-outline" [size]="size" />
+    <ion-icon
+      class="text-body-secondary"
+      name="pause-circle-outline"
+      [size]="size"
+    />
   } @else if (marketState === 'delayed' && dateRange === '1d') {
-    <ion-icon class="text-muted" name="time-outline" [size]="size" />
+    <ion-icon class="text-body-secondary" name="time-outline" [size]="size" />
   } @else if (value <= -0.0005) {
     <ion-icon
       class="text-danger"
@@ -21,7 +25,7 @@
     />
   } @else if (value > -0.0005 && value < 0.0005) {
     <ion-icon
-      class="text-muted"
+      class="text-body-secondary"
       name="arrow-forward-circle-outline"
       [size]="size"
     />

libs/ui/src/lib/value/value.component.html

@@ -20,7 +20,7 @@
         (mousedown)="$event.preventDefault()"
       >
         <ion-icon
-          class="text-muted"
+          class="text-body-secondary"
           [name]="isCopied ? 'checkmark-outline' : 'copy-outline'"
         />
       </button>
@@ -57,7 +57,7 @@
           [class.h4]="size === 'medium'"
         >
           @if (value === null) {
-            <span class="font-monospace text-muted">*****</span>
+            <span class="font-monospace text-body-secondary">*****</span>
           } @else {
             {{ formattedValue }}
           }
@@ -91,7 +91,7 @@
         <ng-container *ngTemplateOutlet="copyIcon" />
       }
       @if (subLabel) {
-        <span class="text-muted"> {{ subLabel }}</span>
+        <span class="text-body-secondary"> {{ subLabel }}</span>
       }
     </div>
   } @else {