From 716f97950205bdf49e72547e7358932f42e99a51 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 11 Aug 2024 15:43:02 +0200
Subject: [PATCH] Feature/refactor dark theme css selector (#3662)

* Refactor dark theme CSS selector

* Update changelog
---
 CHANGELOG.md                                                  | 1 +
 apps/client/src/app/app.component.scss                        | 2 +-
 apps/client/src/app/app.component.ts                          | 4 ++--
 apps/client/src/app/components/header/header.component.scss   | 2 +-
 apps/client/src/app/components/rule/rule.component.scss       | 2 +-
 apps/client/src/app/components/toggle/toggle.component.scss   | 2 +-
 .../components/user-account-access/user-account-access.scss   | 2 +-
 .../user-account-membership/user-account-membership.scss      | 2 +-
 .../user-account-settings/user-account-settings.scss          | 2 +-
 .../components/world-map-chart/world-map-chart.component.scss | 2 +-
 apps/client/src/app/pages/about/about-page.scss               | 2 +-
 apps/client/src/app/pages/about/changelog/changelog-page.scss | 2 +-
 apps/client/src/app/pages/about/license/license-page.scss     | 2 +-
 .../src/app/pages/about/overview/about-overview-page.scss     | 2 +-
 .../app/pages/about/privacy-policy/privacy-policy-page.scss   | 2 +-
 apps/client/src/app/pages/admin/admin-page.scss               | 2 +-
 apps/client/src/app/pages/blog/blog-page.scss                 | 2 +-
 apps/client/src/app/pages/faq/faq-page.scss                   | 2 +-
 apps/client/src/app/pages/features/features-page.scss         | 2 +-
 apps/client/src/app/pages/home/home-page.scss                 | 2 +-
 apps/client/src/app/pages/landing/landing-page.scss           | 2 +-
 apps/client/src/app/pages/open/open-page.scss                 | 2 +-
 .../create-or-update-activity-dialog.scss                     | 2 +-
 .../import-activities-dialog/import-activities-dialog.scss    | 2 +-
 .../src/app/pages/portfolio/allocations/allocations-page.scss | 2 +-
 apps/client/src/app/pages/portfolio/portfolio-page.scss       | 2 +-
 apps/client/src/app/pages/pricing/pricing-page.scss           | 2 +-
 apps/client/src/app/pages/public/public-page.scss             | 2 +-
 apps/client/src/app/pages/register/register-page.scss         | 2 +-
 .../personal-finance-tools/personal-finance-tools-page.scss   | 2 +-
 .../pages/resources/personal-finance-tools/product-page.scss  | 2 +-
 apps/client/src/app/pages/resources/resources-page.scss       | 2 +-
 apps/client/src/app/pages/user-account/user-account-page.scss | 2 +-
 apps/client/src/app/pages/zen/zen-page.scss                   | 2 +-
 apps/client/src/styles.scss                                   | 2 +-
 apps/client/src/styles/theme.scss                             | 4 ++--
 .../lib/activities-filter/activities-filter.component.scss    | 2 +-
 libs/ui/src/lib/activity-type/activity-type.component.scss    | 2 +-
 .../assistant/assistant-list-item/assistant-list-item.scss    | 2 +-
 libs/ui/src/lib/assistant/assistant.scss                      | 2 +-
 .../ui/src/lib/fire-calculator/fire-calculator.component.scss | 2 +-
 .../no-transactions-info/no-transactions-info.component.scss  | 2 +-
 42 files changed, 44 insertions(+), 43 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 19504c4a..3a787984 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Refactored the dark theme CSS selector
 - Improved the language localization for German (`de`)
 
 ### Fixed
diff --git a/apps/client/src/app/app.component.scss b/apps/client/src/app/app.component.scss
index a23e94fb..6037e963 100644
--- a/apps/client/src/app/app.component.scss
+++ b/apps/client/src/app/app.component.scss
@@ -46,7 +46,7 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   footer {
     background-color: rgba(var(--palette-foreground-text-dark), 0.05);
   }
diff --git a/apps/client/src/app/app.component.ts b/apps/client/src/app/app.component.ts
index b1d9a7f0..d432d961 100644
--- a/apps/client/src/app/app.component.ts
+++ b/apps/client/src/app/app.component.ts
@@ -296,9 +296,9 @@ export class AppComponent implements OnDestroy, OnInit {
     );
 
     if (isDarkTheme) {
-      this.document.body.classList.add('is-dark-theme');
+      this.document.body.classList.add('theme-dark');
     } else {
-      this.document.body.classList.remove('is-dark-theme');
+      this.document.body.classList.remove('theme-dark');
     }
 
     this.document
diff --git a/apps/client/src/app/components/header/header.component.scss b/apps/client/src/app/components/header/header.component.scss
index 6a152179..d73bf1a8 100644
--- a/apps/client/src/app/components/header/header.component.scss
+++ b/apps/client/src/app/components/header/header.component.scss
@@ -50,7 +50,7 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   .mat-toolbar {
     background-color: var(--dark-background);
 
diff --git a/apps/client/src/app/components/rule/rule.component.scss b/apps/client/src/app/components/rule/rule.component.scss
index 7246f41d..54ddce82 100644
--- a/apps/client/src/app/components/rule/rule.component.scss
+++ b/apps/client/src/app/components/rule/rule.component.scss
@@ -20,7 +20,7 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   .icon-container {
     background-color: rgba(var(--light-primary-text), 0.05);
   }
diff --git a/apps/client/src/app/components/toggle/toggle.component.scss b/apps/client/src/app/components/toggle/toggle.component.scss
index 84ca3fd3..b61a0286 100644
--- a/apps/client/src/app/components/toggle/toggle.component.scss
+++ b/apps/client/src/app/components/toggle/toggle.component.scss
@@ -25,7 +25,7 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   .mat-mdc-radio-button {
     &.mat-mdc-radio-checked {
       background-color: rgba(var(--light-dividers));
diff --git a/apps/client/src/app/components/user-account-access/user-account-access.scss b/apps/client/src/app/components/user-account-access/user-account-access.scss
index 39eb6792..c19bfd34 100644
--- a/apps/client/src/app/components/user-account-access/user-account-access.scss
+++ b/apps/client/src/app/components/user-account-access/user-account-access.scss
@@ -3,6 +3,6 @@
   display: block;
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   color: rgb(var(--light-primary-text));
 }
diff --git a/apps/client/src/app/components/user-account-membership/user-account-membership.scss b/apps/client/src/app/components/user-account-membership/user-account-membership.scss
index bb296c89..0b66f6ee 100644
--- a/apps/client/src/app/components/user-account-membership/user-account-membership.scss
+++ b/apps/client/src/app/components/user-account-membership/user-account-membership.scss
@@ -4,6 +4,6 @@
   height: 100%;
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   color: rgb(var(--light-primary-text));
 }
diff --git a/apps/client/src/app/components/user-account-settings/user-account-settings.scss b/apps/client/src/app/components/user-account-settings/user-account-settings.scss
index 22555407..53ea0acb 100644
--- a/apps/client/src/app/components/user-account-settings/user-account-settings.scss
+++ b/apps/client/src/app/components/user-account-settings/user-account-settings.scss
@@ -17,6 +17,6 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   color: rgb(var(--light-primary-text));
 }
diff --git a/apps/client/src/app/components/world-map-chart/world-map-chart.component.scss b/apps/client/src/app/components/world-map-chart/world-map-chart.component.scss
index b317294e..9fd9418b 100644
--- a/apps/client/src/app/components/world-map-chart/world-map-chart.component.scss
+++ b/apps/client/src/app/components/world-map-chart/world-map-chart.component.scss
@@ -21,7 +21,7 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   ::ng-deep {
     .svgMap-map-wrapper {
       .svgMap-country {
diff --git a/apps/client/src/app/pages/about/about-page.scss b/apps/client/src/app/pages/about/about-page.scss
index e87d9a05..b536ec21 100644
--- a/apps/client/src/app/pages/about/about-page.scss
+++ b/apps/client/src/app/pages/about/about-page.scss
@@ -2,6 +2,6 @@
   color: rgb(var(--dark-primary-text));
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   color: rgb(var(--light-primary-text));
 }
diff --git a/apps/client/src/app/pages/about/changelog/changelog-page.scss b/apps/client/src/app/pages/about/changelog/changelog-page.scss
index aff47b34..6f9de3bc 100644
--- a/apps/client/src/app/pages/about/changelog/changelog-page.scss
+++ b/apps/client/src/app/pages/about/changelog/changelog-page.scss
@@ -35,6 +35,6 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   color: rgb(var(--light-primary-text));
 }
diff --git a/apps/client/src/app/pages/about/license/license-page.scss b/apps/client/src/app/pages/about/license/license-page.scss
index 39eb6792..c19bfd34 100644
--- a/apps/client/src/app/pages/about/license/license-page.scss
+++ b/apps/client/src/app/pages/about/license/license-page.scss
@@ -3,6 +3,6 @@
   display: block;
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   color: rgb(var(--light-primary-text));
 }
diff --git a/apps/client/src/app/pages/about/overview/about-overview-page.scss b/apps/client/src/app/pages/about/overview/about-overview-page.scss
index df675944..8b9853f3 100644
--- a/apps/client/src/app/pages/about/overview/about-overview-page.scss
+++ b/apps/client/src/app/pages/about/overview/about-overview-page.scss
@@ -24,7 +24,7 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   color: rgb(var(--light-primary-text));
 
   .about-container {
diff --git a/apps/client/src/app/pages/about/privacy-policy/privacy-policy-page.scss b/apps/client/src/app/pages/about/privacy-policy/privacy-policy-page.scss
index e3c73e9f..b90d2307 100644
--- a/apps/client/src/app/pages/about/privacy-policy/privacy-policy-page.scss
+++ b/apps/client/src/app/pages/about/privacy-policy/privacy-policy-page.scss
@@ -16,6 +16,6 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   color: rgb(var(--light-primary-text));
 }
diff --git a/apps/client/src/app/pages/admin/admin-page.scss b/apps/client/src/app/pages/admin/admin-page.scss
index e87d9a05..b536ec21 100644
--- a/apps/client/src/app/pages/admin/admin-page.scss
+++ b/apps/client/src/app/pages/admin/admin-page.scss
@@ -2,6 +2,6 @@
   color: rgb(var(--dark-primary-text));
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   color: rgb(var(--light-primary-text));
 }
diff --git a/apps/client/src/app/pages/blog/blog-page.scss b/apps/client/src/app/pages/blog/blog-page.scss
index 9235ed3c..e576551f 100644
--- a/apps/client/src/app/pages/blog/blog-page.scss
+++ b/apps/client/src/app/pages/blog/blog-page.scss
@@ -9,6 +9,6 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   color: rgb(var(--light-primary-text));
 }
diff --git a/apps/client/src/app/pages/faq/faq-page.scss b/apps/client/src/app/pages/faq/faq-page.scss
index e87d9a05..b536ec21 100644
--- a/apps/client/src/app/pages/faq/faq-page.scss
+++ b/apps/client/src/app/pages/faq/faq-page.scss
@@ -2,6 +2,6 @@
   color: rgb(var(--dark-primary-text));
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   color: rgb(var(--light-primary-text));
 }
diff --git a/apps/client/src/app/pages/features/features-page.scss b/apps/client/src/app/pages/features/features-page.scss
index 4a868071..c3109fdf 100644
--- a/apps/client/src/app/pages/features/features-page.scss
+++ b/apps/client/src/app/pages/features/features-page.scss
@@ -12,6 +12,6 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   color: rgb(var(--light-primary-text));
 }
diff --git a/apps/client/src/app/pages/home/home-page.scss b/apps/client/src/app/pages/home/home-page.scss
index e87d9a05..b536ec21 100644
--- a/apps/client/src/app/pages/home/home-page.scss
+++ b/apps/client/src/app/pages/home/home-page.scss
@@ -2,6 +2,6 @@
   color: rgb(var(--dark-primary-text));
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   color: rgb(var(--light-primary-text));
 }
diff --git a/apps/client/src/app/pages/landing/landing-page.scss b/apps/client/src/app/pages/landing/landing-page.scss
index 5a3e129c..4c0c14ef 100644
--- a/apps/client/src/app/pages/landing/landing-page.scss
+++ b/apps/client/src/app/pages/landing/landing-page.scss
@@ -120,7 +120,7 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   .button-container {
     .mat-mdc-outlined-button {
       background-color: var(--dark-background);
diff --git a/apps/client/src/app/pages/open/open-page.scss b/apps/client/src/app/pages/open/open-page.scss
index e58d9f23..65c9b4e3 100644
--- a/apps/client/src/app/pages/open/open-page.scss
+++ b/apps/client/src/app/pages/open/open-page.scss
@@ -14,6 +14,6 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   color: rgb(var(--light-primary-text));
 }
diff --git a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.scss b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.scss
index 6b1415dc..5af305f9 100644
--- a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.scss
+++ b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.scss
@@ -18,7 +18,7 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   .mat-mdc-dialog-content {
     .mat-datepicker-input {
       &.mat-mdc-input-element:disabled {
diff --git a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss
index 2dbbdaef..54aa8c89 100644
--- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss
+++ b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss
@@ -53,7 +53,7 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   .drop-area {
     border-color: rgba(
       var(--palette-foreground-divider-dark),
diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.scss b/apps/client/src/app/pages/portfolio/allocations/allocations-page.scss
index c73ac7fc..28071385 100644
--- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.scss
+++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.scss
@@ -43,7 +43,7 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   .mat-mdc-progress-bar {
     ::ng-deep {
       .mdc-linear-progress__buffer-bar {
diff --git a/apps/client/src/app/pages/portfolio/portfolio-page.scss b/apps/client/src/app/pages/portfolio/portfolio-page.scss
index e87d9a05..b536ec21 100644
--- a/apps/client/src/app/pages/portfolio/portfolio-page.scss
+++ b/apps/client/src/app/pages/portfolio/portfolio-page.scss
@@ -2,6 +2,6 @@
   color: rgb(var(--dark-primary-text));
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   color: rgb(var(--light-primary-text));
 }
diff --git a/apps/client/src/app/pages/pricing/pricing-page.scss b/apps/client/src/app/pages/pricing/pricing-page.scss
index 86f4b526..ad8e97b1 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.scss
+++ b/apps/client/src/app/pages/pricing/pricing-page.scss
@@ -26,6 +26,6 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   color: rgb(var(--light-primary-text));
 }
diff --git a/apps/client/src/app/pages/public/public-page.scss b/apps/client/src/app/pages/public/public-page.scss
index 9a6909a9..dbea95e2 100644
--- a/apps/client/src/app/pages/public/public-page.scss
+++ b/apps/client/src/app/pages/public/public-page.scss
@@ -17,6 +17,6 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   color: rgb(var(--light-primary-text));
 }
diff --git a/apps/client/src/app/pages/register/register-page.scss b/apps/client/src/app/pages/register/register-page.scss
index 2334b58d..322a2064 100644
--- a/apps/client/src/app/pages/register/register-page.scss
+++ b/apps/client/src/app/pages/register/register-page.scss
@@ -24,7 +24,7 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   .button-container {
     .mat-mdc-outlined-button {
       background-color: var(--dark-background);
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.scss b/apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.scss
index 00667fe8..90a5a41d 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.scss
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.scss
@@ -20,6 +20,6 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   color: rgb(var(--light-primary-text));
 }
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/product-page.scss b/apps/client/src/app/pages/resources/personal-finance-tools/product-page.scss
index 9726e095..670cde9a 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/product-page.scss
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/product-page.scss
@@ -16,7 +16,7 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   color: rgb(var(--light-primary-text));
 
   .call-to-action {
diff --git a/apps/client/src/app/pages/resources/resources-page.scss b/apps/client/src/app/pages/resources/resources-page.scss
index 4a868071..c3109fdf 100644
--- a/apps/client/src/app/pages/resources/resources-page.scss
+++ b/apps/client/src/app/pages/resources/resources-page.scss
@@ -12,6 +12,6 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   color: rgb(var(--light-primary-text));
 }
diff --git a/apps/client/src/app/pages/user-account/user-account-page.scss b/apps/client/src/app/pages/user-account/user-account-page.scss
index e87d9a05..b536ec21 100644
--- a/apps/client/src/app/pages/user-account/user-account-page.scss
+++ b/apps/client/src/app/pages/user-account/user-account-page.scss
@@ -2,6 +2,6 @@
   color: rgb(var(--dark-primary-text));
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   color: rgb(var(--light-primary-text));
 }
diff --git a/apps/client/src/app/pages/zen/zen-page.scss b/apps/client/src/app/pages/zen/zen-page.scss
index e87d9a05..b536ec21 100644
--- a/apps/client/src/app/pages/zen/zen-page.scss
+++ b/apps/client/src/app/pages/zen/zen-page.scss
@@ -2,6 +2,6 @@
   color: rgb(var(--dark-primary-text));
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   color: rgb(var(--light-primary-text));
 }
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index b9b7ce82..2b864452 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -214,7 +214,7 @@ body {
     }
   }
 
-  &.is-dark-theme {
+  &.theme-dark {
     background: var(--dark-background);
     color: rgba(var(--light-primary-text));
 
diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss
index 40a872c7..f437ec67 100644
--- a/apps/client/src/styles/theme.scss
+++ b/apps/client/src/styles/theme.scss
@@ -3,7 +3,7 @@
 $dark-primary-text: rgba(black, 0.87);
 $light-primary-text: white;
 
-$mat-css-dark-theme-selector: '.is-dark-theme';
+$mat-css-dark-theme-selector: '.theme-dark';
 
 $gf-primary: (
   50: var(--gf-theme-primary-50),
@@ -99,7 +99,7 @@ $gf-theme-dark: mat.m2-define-dark-theme(
   )
 );
 
-.is-dark-theme {
+.theme-dark {
   @include mat.all-component-colors($gf-theme-dark);
 }
 
diff --git a/libs/ui/src/lib/activities-filter/activities-filter.component.scss b/libs/ui/src/lib/activities-filter/activities-filter.component.scss
index 07964fdf..f8b7f88d 100644
--- a/libs/ui/src/lib/activities-filter/activities-filter.component.scss
+++ b/libs/ui/src/lib/activities-filter/activities-filter.component.scss
@@ -15,7 +15,7 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   .mat-mdc-form-field {
     color: rgba(var(--light-primary-text));
   }
diff --git a/libs/ui/src/lib/activity-type/activity-type.component.scss b/libs/ui/src/lib/activity-type/activity-type.component.scss
index c6aebbbe..49889b66 100644
--- a/libs/ui/src/lib/activity-type/activity-type.component.scss
+++ b/libs/ui/src/lib/activity-type/activity-type.component.scss
@@ -40,7 +40,7 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   .activity-type-badge {
     background-color: rgba(var(--palette-foreground-text-dark), 0.1) !important;
   }
diff --git a/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.scss b/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.scss
index c1679e56..9f677c1a 100644
--- a/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.scss
+++ b/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.scss
@@ -10,7 +10,7 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   &.has-focus {
     a {
       color: rgba(var(--dark-primary-text));
diff --git a/libs/ui/src/lib/assistant/assistant.scss b/libs/ui/src/lib/assistant/assistant.scss
index 6ed02f65..2de06824 100644
--- a/libs/ui/src/lib/assistant/assistant.scss
+++ b/libs/ui/src/lib/assistant/assistant.scss
@@ -26,7 +26,7 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   .date-range-selector-container {
     border-color: rgba(var(--light-dividers));
   }
diff --git a/libs/ui/src/lib/fire-calculator/fire-calculator.component.scss b/libs/ui/src/lib/fire-calculator/fire-calculator.component.scss
index d5465964..5662415d 100644
--- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.scss
+++ b/libs/ui/src/lib/fire-calculator/fire-calculator.component.scss
@@ -25,7 +25,7 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   ::ng-deep {
     .mdc-text-field--disabled {
       .mdc-notched-outline__leading,
diff --git a/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.scss b/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.scss
index 4f558830..14d72b7d 100644
--- a/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.scss
+++ b/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.scss
@@ -11,6 +11,6 @@
   }
 }
 
-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
   border-color: rgba(var(--light-dividers));
 }